Joe主题 给首页和文章页顶部加一个大图
登录 / 注册
标签搜索
侧边栏壁纸
博主昵称
奉天   

    • 累计撰写 234 篇文章
    • 累计收到 644 条评论
    Joe主题 给首页和文章页顶部加一个大图
    2022-08-07  308 阅读 12 评论 3 点赞
    Typechos 技术展示
    温馨提示：
    本文最后更新于2022年08月07日，已超过1006天没有更新，若内容或图片失效，请留言反馈。

    截图展示

    首页
    文章页
    屏幕截图 2022-08-06 235713.png
    第一步

    先加首页
    修改 index.php 文件，文件目录 Joe主题文件 /index.php

    下面两个是我推荐的，放在图片地址里即可

    同步侧边栏博主背景壁纸代码： <?php $this->options->JAside_Author_Image() ?>

    随机背景图API：https://api.ococn.cn/api/img （代码里的这个链接可以换成自己喜欢的）

    代码
    代码位置
    <div class="HeaderImg" style="background: url(https://api.ococn.cn/api/img) 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>
    第二步

    下载CSS文件放入服务器，然后后台代码引入CSS

    此处内容作者设置了 回复 可见

    代码
    代码位置
    <link rel="stylesheet" href="这里填写你CSS的直链地址">
    第三步

    设置全局透明度，这个看个人需求，也可以忽略此步骤（不喜欢可以跳过）

    代码
    代码位置
    body {--background: rgba(255,255,255,0.8);}
    第四步

    再给文章页顶部加一个大图

    友情提示：
    　　文章顶部图显示规则写成了与首页文章列表一样获取，会自动显示文章里的第一张图，文章无图的情况下会自动显示你后台设置的自定义缩略图，在后台图片设置选项添加，或者你也可以更换自己的api图库。

    自行更换图库方法：下面第一行代码中 <?php echo _getThumbnails($this)[0] ?>换成自己的图片地址即可

    使用方法

    修改 post.php 文件，文件目录 Joe主题文件 /post.php

    代码
    代码位置
    <div class="HeaderImg" style="background: url(<?php echo _getThumbnails($this)[0] ?>) 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>
    价格：0.50 元
    温馨提示：登录用户付款后可永久阅读隐藏的内容。 付费可读
    3

    海报

    正在生成.....
    暂无标签
    注意：本站资源多为网络收集，如涉及版权问题请及时与站长联系，我们会在第一时间内删除资源。
    您购买的只是资源，不提供解答疑问和安装服务。
    本站用户发帖仅代表本站用户个人观点，并不代表本站赞同其观点和对其真实性负责。
    本站资源大多存储在云盘，如发现链接失效，请及时与站长联系，我们会第一时间更新。
    转载本网站任何内容，请按照转载方式正确书写本站原文地址
    发表者：奉天
    百度收录：检测收录中......
    本文链接：https://blog.ococn.cn/archives/772.html（非特殊说明，文章均收集于互网联！）
    文章转载：
    作品采用： 本文版权内容属于《 奉天博客 》转载请标明出处

    评论 (12)

    取消
    1. 头像
      小白呗
      Windows 10 · Google Chrome

      画图

      回复
    2. 头像
      匿名
      Windows 10 · Google Chrome

      233333

      回复
    3. 头像
      匿名
      Windows 10 · Google Chrome

      画图

      回复
    4. 头像
      匿名
      Windows 10 · Google Chrome

      an

      回复
    5. 头像
      匿名
      Windows 10 · Google Chrome

      画图

      回复