🎀 🌸

Joe主题大图设置

有问题请联系小渡qq2092115940

Joe主题大图设置

{card-describe title=”说明”}
实现Joe主题首页大图及文章大图设置!
{/card-describe}

{callout color=”#f0ad4e”}
PS:本教程使用版本为typecho 1.21 +Joe 7.71
{/callout}
{mtitle title=” 第一步 “/}

  1. 修改 index.php 文件
  2. 文件目录 Joe主题文件/index.php

{tabs}
{tabs-pane label=”代码定位”}
1
{/tabs-pane}
{tabs-pane label=”代码”}
{hide}

<div class="HeaderImg" style="background: url(这里填写你的图片地址) 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>

{/hide}
{/tabs-pane}
{/tabs}

{mtitle title=” 第二步 “/}

引入CSS

首先上传下载的css文件至网站目录(就是宝塔创建完网站的域名主目录)

{tabs}
{tabs-pane label=”代码定位”}
1
{/tabs-pane}
{tabs-pane label=”代码”}

<link rel="stylesheet" href="你的域名/heylie.min.css">

{/tabs-pane}
{/tabs}

{hide}

{cloud title=”导入文件” type=”lz” url=”https://heylie.lanzoum.com/iYxdQ0rr67xg” password=””/}

新增通用引用:https://blog.heylie.cn/general/heylie.min.css

{/hide}

{mtitle title=” 第三步 “/}

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

{tabs}
{tabs-pane label=”代码定位”}
1
{/tabs-pane}
{tabs-pane label=”代码”}
{hide}

<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>

{/hide}
{/tabs-pane}
{/tabs}

默认文章自带,可以自行更换图库
方法:将代码中 <?php echo _getThumbnails($this)[0] ?> 换成自己的图片地址即可
温馨提示:本文最后更新于2023-11-06 00:05:00,某些文章具有时效性,若有错误或已失效,请在下方留言或联系站长
版权声明

   站内部分内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供网络资源分享服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请 联系我们 一经核实,立即删除。并对发布账号进行永久封禁处理。在为用户提供最好的产品同时,保证优秀的服务质量。


本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。
THE END
喜欢就支持一下吧
分享
评论 共70条

请登录后发表评论

    • 头像885
    • 头像awdw
    • 头像我是你爸爸
    • 头像小二
    • 头像Mesyr
    • 头像trznvpdlde
    • 头像nsdgcmiqpx
    • 头像故渊渡
    • 头像mbhjb
    • 头像零一
    • 头像fguesiqyqb
    • 头像oxelgozsgj
    • 头像plqdcpcotu
    • 头像dfunupqlpx
    • 头像dqgvimutin
    • 头像katelya
    • 头像1
    • 头像NB
    • 头像大瓦房
    • 头像十七
    • 头像你的牛子哥
    • 头像uku
    • 头像sky
    • 头像xx
    • 头像的是
    • 头像昨日南墙
    • 头像moko
    • 头像moko
    • 头像酷小呵
    • 头像gg boad
    • 头像alen
    • 头像64648
    • 头像shy
    • 头像山川
    • 头像小白
    • 头像3
    • 头像酷小呵
    • 头像梦泽不是梦
    • 头像梦泽不是梦
    • 头像辰漪
    • 头像Katelya
    • 头像厕所干饭人
    • 头像小高
    • 头像啊哈
    • 头像11
    • 头像link
    • 头像看看
    • 头像uu
    • 头像大大哇
        • 头像收获大大哇
        • 头像收获大大哇
        • 头像收获大大哇
    • 头像鹤辞
    • 头像八九
    • 头像八九
    • 头像x
    • 头像来了
    • 头像123
    • 头像x
      • 头像顾渊渡
    • 头像坂田银时
    • 头像笔记堡
    • 头像笔记堡
    • 头像凌柒