Joe 大图设置

袁先生

2023-12-05 / 1 评论 / 170 阅读 / 正在检测是否收录...

12/05

将下载的oxna.min.zip解压放到任意网站目录位置，例如根目录： /oxna.min.css
在Joe后台全局设置中引入css文件

{collapse-item label="引入位置"}
0.1.png

{/collapse-item}
{collapse-item label="样例代码"}

<link rel="stylesheet" href="/你的文件位置/oxna.min.css">

{/collapse-item}
{collapse-item label="css文件下载"}

{/collapse-item}

修改 index.php 文件
文件目录 joe/index.php
将下方代码贴贴到25行后面，其中 url() 中的内容替换成自己的图片地址即可

{collapse-item label="代码位置"}
1.1.png

{/collapse-item}
{collapse-item label="代码"}

    <div class="HeaderImg" style="background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/aff47512c970c827cf3249417a3efde7.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_2560%2ch_1440) center;background-size:cover;">
        <div class="infomation">
            <div class="title"><?php $this->options->title(); ?></div>
            <div class="desctitle">
                <span class="motto joe_motto" </span>
            </div>
        </div>
        <section class="HeaderImg_bottom">
            <svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
                <defs>
                    <path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path>
                </defs>
                <g class="parallax">
                    <use xlink:href="#gentle-wave" x="48" y="0"></use>
                    <use xlink:href="#gentle-wave" x="48" y="3"></use>
                    <use xlink:href="#gentle-wave" x="48" y="5"></use>
                    <use xlink:href="#gentle-wave" x="48" y="7"></use>
                </g>
            </svg>
        </section>
    </div>

{/collapse-item}

文章页顶部加一个大图

修改 post.php 文件
文件目录 joe/post.php
将下方代码贴贴到19行后面，其中文章缩略图作为大图和指定图片作为大图可自选将代码注释或取消注释即可

{collapse-item label="代码位置"}
1.2.png

{/collapse-item}
{collapse-item label="代码"}

    <!--文章缩略图作为大图-->
    <!--<div class="HeaderImg" style="background: url(<?php echo _getThumbnails($this)[0] ?>) center;background-size:cover;">-->
    <!--指定图片作为大图-->
    <div class="HeaderImg" style="background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/aff47512c970c827cf3249417a3efde7.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_2560%2ch_1440) center;background-size:cover;">
        <div class="infomation">
            <div class="title"><?php $this->title() ?></div>
            <div class="desctitle">
                <div class="item">
                    <span class="text"><?php $this->date('Y-m-d'); ?></span>
                    <span class="line"></span>
                    <span class="text"><?php $this->commentsNum('%d'); ?> 评论</span>
                    <span class="line"></span>
                    <span class="text" id="Joe_Article_Views"><?php _getViews($this); ?> 阅读</span>
                    <span class="line"></span>
                    <span class="text" id="Joe_Article_Views"><?php _getAgree($this) ?> 点赞</span>
                </div>
            </div>
        </div>
        <section class="HeaderImg_bottom">
            <svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
                <defs>
                    <path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path>
                </defs>
                <g class="parallax">
                    <use xlink:href="#gentle-wave" x="48" y="0"></use>
                    <use xlink:href="#gentle-wave" x="48" y="3"></use>
                    <use xlink:href="#gentle-wave" x="48" y="5"></use>
                    <use xlink:href="#gentle-wave" x="48" y="7"></use>
                </g>
            </svg>
        </section>
    </div>
    <!--指定图片作为大图-->

{/collapse-item}