实用指南：Typecho 系统的 Joe 主题美化技巧持续更新

博主： demius
发布时间：2024 年 10 月 09 日
77 次浏览
暂无评论
17001字数
分类： typecho

## 说明：

生命不息，折腾不止，哎，就是玩儿......

## 本站环境：

PHP：8.0.2

Mysql：8.4.2
Typecho：1.2.1正式版
Joe：7.7.1
其他版本的PHP、Typecho和Joe不确定其可行性，请自行测试~

## 基础设置

这个其实不用写，安装Joe主题后去配置网站基础设置就好了。

### 开启gzip压缩

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-884b0315fa08b1baadced19e0f85b56b4" aria-expanded="true"><div class="accordion-toggle"><span style="">开启gzip压缩</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-884b0315fa08b1baadced19e0f85b56b4" class="collapse collapse-content"><p></p>

打开typecho目录下的 index.php，并在开头添加
`ob_start('ob_gzhandler');`

### robots.txt

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d8eb90a63b9ced8915f8772d1ee1b97692" aria-expanded="true"><div class="accordion-toggle"><span style="">robots.txt</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d8eb90a63b9ced8915f8772d1ee1b97692" class="collapse collapse-content"><p></p>

在网站根目录下创建并设置 robots.txt,方便搜索引擎爬虫爬取:

```java
User-agent: *
Allow: /*.html$
Allow: /usr
Allow: /*.png$
Allow: /*.jpg$
Allow: /*.jepg$
Allow: /*.gif$
Allow: /*.bmp$
Disallow: /admin/
Disallow: /install/
Disallow: /var/
Disallow: /config.inc.php
Disallow: /install.php
Disallow: /.js
Disallow: /.css
Disallow: /feed
Sitmap: 你的域名/sitemap.xml
```

可借助 你的域名/robots.txt 查看是否设置成功。之后在百度收录平台完成 robots.txt 的更新
<p></p></div></div></div>

## 美化

### 网站主题各种颜色修改

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-b522195fd9afefa9470655d6f73d0da16" aria-expanded="true"><div class="accordion-toggle"><span style="">网站主题各种颜色修改</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-b522195fd9afefa9470655d6f73d0da16" class="collapse collapse-content"><p></p>
位置：主题后台设置-全局设置-自定义CSS：

```css
body {
    --theme: #000000;
    --background: #ffffff;
    --main: #303133;
    --routine: #606266;
    --minor: #909399;
    --seat: #c0c4cc;
    --classA: #dcdfe6;
    --classB: #e4e7ed;
    --classC: #ebeef5;
    --classD: #f2f6fc;
    --radius-wrap: 10px;
    --radius-inner: 15px;
    --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    --box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
}
```

说明：
--theme
主题颜色，用于修改整个网站的主题色彩，冒号后面的是颜色的色彩值，这个色彩值可以用常见的颜色格式。
--background
主体卡片背景颜色，调整透明度的话，可以填写 rgba 值，例如半透明：rgba(255,255,255,0.5)
--main
文字的颜色，颜色最深的
--routine
文字的颜色，颜色稍微次于上面那个
--minor
文字的颜色，颜色稍微次于上面那个
--seat
文字的颜色，颜色稍微次于上面那个
--classA
横线、分割线用的颜色，颜色最深的
--classB
横线、分割线用的颜色，颜色稍微次于上面那个
--classC
横线、分割线用的颜色，颜色稍微次于上面那个
--classD
横线、分割线用的颜色，颜色稍微次于上面那个
--radius-wrap
外层包裹的圆角度数，如果不需要圆角，可以写0px
--radius-inner
里层包裹的圆角度数，如果不需要圆角，可以写0px
--text-shadow
文章标题的字体阴影，只在文章详情页用到，区别不大
--box-shadow
主体卡片阴影
<p></p></div></div></div>

### 右上角搜索框文字修改

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c629a652d08d096f59c280afc656390342" aria-expanded="true"><div class="accordion-toggle"><span style="">右上角搜索框文字修改</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-c629a652d08d096f59c280afc656390342" class="collapse collapse-content"><p></p>
修改文件，在主题目录Joe/public/header.php中，大概139行：
可将Search修改为任意字，比如“搜索”
大概138行：可修改默认显示字体，即可将搜索框中“请输入关键字...”修改为任意字。
<p></p></div></div></div>

### 头像呼吸灯

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1964da3a1d902081beb0982737cbc5be36" aria-expanded="true"><div class="accordion-toggle"><span style="">头像呼吸灯</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-1964da3a1d902081beb0982737cbc5be36" class="collapse collapse-content"><p></p>
在主题后台设置-全局设置-自定义CSS里添加：

```java
/*头像呼吸光环和鼠标悬停旋转放大*/
.avatar {
 border-radius: 50%;
 animation: light 4s ease-in-out infinite;
 transition: 0.5s;
}
.avatar:hover {
transform: scale(1.15) rotate(720deg);
}
@keyframes light {
 0%{box-shadow: 0 0 4px #f00;}
 25%{box-shadow: 0 0 16px #0f0;} 
 50%{box-shadow: 0 0 4px #00f;}
 75%{box-shadow: 0 0 16px #0f0;} 
 100%{box-shadow: 0 0 4px #f00;}
}
```

### 文章目录树

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ae939200617d62a204411b88f70587fc91" aria-expanded="true"><div class="accordion-toggle"><span style="">文章目录树</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ae939200617d62a204411b88f70587fc91" class="collapse collapse-content"><p></p>
目前目录树的结构有很多，比如添加在页面左侧隐藏式的，或者是添加在文章左侧的。
这里采用的是添加在右侧栏当中的，随文章置顶的：
效果图：
![](https://tc.demius.tech/i/2024/10/07/6703f0cdce74e.webp)

首先，在public/aside.php文件中，添加如下内容，可以在作者卡片之后添加，不过具体想摆放的位置看自己的设计，当前设计是放在作者卡片之后。

```php

      <?php if ($this->is('post')) : ?>
          <section class="joe_aside__item catalogue">
              <div class="joe_aside__item-title">
                  <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                       p-id="2084"
                       width="18" height="18">
                      <path d="M640 192H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h416c17.7 0 32 14.3 32 32s-14.3 32-32 32zM960 544H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h736c17.7 0 32 14.3 32 32s-14.3 32-32 32zM640 896H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h416c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 192H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 544H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 896H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32z"
                            p-id="2085"></path>
                  </svg>
                  <span class="text">目录</span>
                  <span class="line"></span>
              </div>
              <div class="joe_aside__item-contain">
                  <ul class="catalogue-items">
                  </ul>
              </div>
          </section>
      <?php endif; ?>
```

</div><div role="tabpanel" id='tabs-80da0ee3796e86e3c3025b6c646818b3821' class="tab-pane fade  ">

在主题后台设置-全局设置-自定义JS中：添加如下内容，或者你也可以加在assets/js/joe.global.js文件中，记得将joe.global.min.js也同步更新下，如果你使用的是joe.global.js那就不用管了

```java
function get_catalogs(article_content) {
        const titleTag = ["H1", "H2", "H3"];
        let titles = [];
        article_content.childNodes.forEach((e, index) => {
            const id = "header-" + index;
            if (titleTag.includes(e.nodeName)) {
                titles.push({
                    id: id,
                    text: e.textContent,
                    level: Number(e.nodeName.substring(1, 2))
                });
                e.setAttribute("id", id);
            }
        });
        return titles;
    }

// 找到目录容器
    article_content = document.querySelector('.joe_detail__article');
    if (article_content) {
        var catalog = get_catalogs(article_content);
        if (catalog.length == 0) {
            // 无目录，隐藏
            $('.catalogue').hide();
        } else {
            let catalogue = '';
            for (let i = 0; i < catalog.length; i++) {
                let node = '<li class="catalogue-item"><a href="javascript:;" id="to-' + catalog[i].id + '" to="' + catalog[i].id + '" title="' + catalog[i].text + '">' + catalog[i].text + '</a>';
                if (i == catalog.length - 1) {
                    catalogue += node + '</li>'
                } else {
                    if (catalog[i + 1].level == catalog[i].level) {
                        catalogue += node + '</li>';
                    } else if (catalog[i + 1].level > catalog[i].level) {
                        catalogue += (catalog[i + 1].level > 1) ? node + '<ul class="level-' + catalog[i + 1].level + '">' : node + '</li>';
                    } else {
                        if (catalog[i + 1].level - catalog[i].level == -2) {
                            catalogue += i > 1 ? node + '</li></ul></li></ul></li>' : node + '</li></ul></li>';
                        } else {
                            catalogue += i > 1 ? node + '</li></ul></li>' : node + '</li>';
                        }

}
                }
            }
            document.querySelector('.catalogue-items').innerHTML = catalogue;
            $('.catalogue-item > a').on('mouseenter', function () {
                $(this).parent().addClass('_active');
            });
            $('.catalogue-item > a').on('mouseleave', function () {
                $(this).parent().removeClass('_active');
            });
            // 根据目录定位到标题
            $('.catalogue-item > a').on('click', function () {
                document.removeEventListener("scroll", autoActive);
                $('.catalogue-item').removeClass('active');
                $(this).parent().addClass('active');
                let aim = document.querySelector('#' + $(this).attr('to'));
                let aim_top = aim.offsetTop;
                let aim_h = aim.clientHeight;
                let above_h = document.querySelector('.joe_header__above').clientHeight;
                let below_h = document.querySelector('.joe_header__below').clientHeight;
                let offset = 0;
                let case1 = !document.querySelector('.joe_header__above').className.includes('active');
                let case2 = document.getElementsByTagName("html")[0].scrollTop + above_h > aim_top;
                if (case1 && case2) {
                    offset = above_h;
                }
                window.scrollTo({
                    top: aim_top - offset - below_h - 10,
                    behavior: 'smooth'
                });
                setTimeout(() => {
                    document.addEventListener("scroll", autoActive);
                }, 500);
            });
            if (catalog.length)
                $('.catalogue-item').eq(0).addClass('active');
            // 目录侧标题自动定位
            let autoActive = function () {
                let html_top = document.getElementsByTagName("html")[0].scrollTop; //获得父级卷去的高度
                for (let i = 0; i < catalog.length; i++) {
                    let offset = 0;
                    let h_id = '#' + catalog[i].id;
                    let h_offset = document.querySelector(h_id).offsetTop;
                    let above_h = document.querySelector('.joe_header__above').clientHeight;
                    let below_h = document.querySelector('.joe_header__below').clientHeight;

if (!document.querySelector('.joe_header').className.includes('active'))
                        offset = above_h;
                    if (h_offset + below_h + offset + 10 >= html_top) {
                        $('.catalogue-item').removeClass('active');
                        if (i > 0 && i < catalog.length - 1 && document.querySelector('#' + catalog[i].id).offsetTop > html_top + window.innerHeight * 0.2) {
                            //还没到下一个标题
                            i--;
                        }
                        $('#to-' + catalog[i].id).parent().addClass('active');
                        break;
                    }
                }
            };
            document.addEventListener("scroll", autoActive);
        }
    } else {
        // 不是文章，隐藏目录
        $('.catalogue').hide();
    }
```

</div><div role="tabpanel" id='tabs-e5f52d2d5076720089282c0b1cb8cf51492' class="tab-pane fade  ">
            
在主题后台设置-全局设置-自定义css中：加入如下样式：

```java
.joe_aside__item.catalogue {
    z-index: 999;
    position: sticky;
    top: 60px;
    margin-bottom: 15px;
    transition: top 0.35s;
    background: var(--background)
}

.joe_aside__item.catalogue .joe_aside__item-contain {
    padding: 0;
    margin: 0 0 0 10px;
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items {
    border-left: 1px solid var(--classC);
    border-bottom: 1px solid var(--background);
    padding: 15px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item {
    margin: 0;
    padding: 0;
    line-height: 26px;
    font-size: 16px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item a {
    position: relative;
    display: block;
    line-height: 26px;
    color: var(--main);
    transition: color 0.5s
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item a:hover {
    color: var(--theme)
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item._active > a, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item.active > a {
    color: var(--theme)
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item.active > a::before {
    content: "";
    position: absolute;
    left: -17px;
    top: 0;
    width: 2px;
    height: 26px;
    background-color: var(--theme);
    transition: height 0.35s
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2.catalogue-item, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item {
    font-size: 14px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item.active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item.active > a::before {
    left: -34px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item {
    font-size: 12px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item.active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item.active > a::before {
    left: -51px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item {
    font-size: 12px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item ul {
    padding-left: 17px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items ul {
    display: block;
    list-style-type: disc
}
```

</div><div role="tabpanel" id='tabs-4c007971da0852a0233cd9e7efd83792443' class="tab-pane fade  ">
            
其实上述三步已经可以实现文章目录了，此时刷新页面，在右侧博主头像吓应该可以看到目录了。
但是上述直接添加可能会导致文章在滑动的时候，目录下面的其他内容卡片没有固定。
即在public/aside.php文件中将作者卡片下面的其他卡片用section标签包裹起来，修改如下：

```java
<section class="sticky_layout">
除作者卡片之外的卡片内容都包裹在这个标签当中
</section>
```

然后再修改刚刚第三步的CSS：

```java
section.sticky_layout {
    position: sticky;
}

.joe_aside__item.catalogue {
    z-index: 999;
    margin-bottom: 15px;
    transition: top 0.35s;
    background: var(--background)
}

.joe_aside__item.catalogue .joe_aside__item-contain {
    padding: 0;
    margin: 0 0 0 10px;
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items {
    border-left: 1px solid var(--classC);
    border-bottom: 1px solid var(--background);
    padding: 15px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item {
    margin: 0;
    padding: 0;
    line-height: 26px;
    font-size: 16px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item a:hover {
    color: var(--theme)
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item {
    font-size: 12px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item ul {
    padding-left: 17px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items ul {
    display: block;
    list-style-type: disc
}
```

如果开启了舔狗卡片，则需要再修改一下，需要将assets/js/joe.global.js文件中的头部滚动部分的函数进行修改，替换成如下内容：

```java
{
        if (!window.Joe.IS_MOBILE) {
            let flag = true;
            const handleHeader = (diffY) => {
                if (window.pageYOffset >= $(".joe_header").height() && diffY <= 0) {
                    if (flag) return;
                    $(".joe_header").addClass("active");
                    $(".joe_aside .sticky_layout").css("top", $(".joe_header").height() - 60 + 15);
                    flag = true;
                } else {
                    if (!flag) return;
                    $(".joe_header").removeClass("active");
                    $(".joe_aside .sticky_layout").css("top", $(".joe_header").height() + 15);
                    flag = false;
                }
            };
            let Y = window.pageYOffset;
            handleHeader(Y);
            let _last = Date.now();
            document.addEventListener("scroll", () => {
                let _now = Date.now();
                if (_now - _last > 15) {
                    handleHeader(Y - window.pageYOffset);
                    Y = window.pageYOffset;
                }
                _last = _now;
            });
        }
    }
```

这第四步主要修改的内容是将原本的最后一个卡片不滚动，改成除了作者卡片其他不滚动，如果不介意滚动的话则不需要这一步，同时注意开始如果目录放置的地方不在头像卡片下方，则修改包裹在section标签的卡片内容也要一致。
</div>
</div>
</div>

### 底部页面加载耗时

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-05ce8825cc8c6a44ac71703ff409875656" aria-expanded="true"><div class="accordion-toggle"><span style="">底部页面加载耗时</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-05ce8825cc8c6a44ac71703ff409875656" class="collapse collapse-content"><p></p>
页面加载耗时的功能和样式的实现
可以看到本博客底部页面的一些样式和功能，
样式的实现：可以去【 shields.io 】网站去自定义，种类很多，像ICP、版权信息等等。
功能的实现：找到usr/themes/Joe/public目录下的footer.php第47行，加入以下代码：

```java
document.getElementById('pagetimes').innerHTML = '<img src="https://img.shields.io/badge/页面加载耗时：-<?php _endCountTime(); ?>-green">';
```

_endCountTime()是获取页面耗时的函数；
pagetimes是前台标签的ID值，放到前台你想显示的位置即可。

```java
<a href="javascript:(0)" id="pagetimes"></a>
```

### 给你的网站博客侧边栏添加一个联系我/关注我/个人信息

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f5dfcd3457261ba6e07c0d927b7d3fa523" aria-expanded="true"><div class="accordion-toggle"><span style="">给你的网站博客侧边栏添加一个联系我/关注我/个人信息</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f5dfcd3457261ba6e07c0d927b7d3fa523" class="collapse collapse-content"><p></p>

* 方法一：

这个效果图标可以渐变色。

</div><div role="tabpanel" id='tabs-14877706be277e3de7b90c2d5bc14150601' class="tab-pane fade  ">

下面的代码放到主题后台，侧边栏，自定义即可，相应信息改成你自己的哦。

```html
<div style="background: var(--background);">
    <ul style="list-style: none; padding: 0; margin: 0;">
      <li style="font-size: 12px; margin-bottom: 10px; background: #fff; color: #525252; line-height: 40px; border: 1px solid #DDD; border-radius: 2px; position: relative; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
        <img src="https://tc.demius.tech/i/2024/10/04/66ffda4aa0a58.webp" style="width: 20px; height: 20px; vertical-align: middle;">
        <span style="float: right; text-align: center; width: 40%; -moz-transition: all.5s ease; -webkit-transition: all.5s ease; -ms-transition: all.5s ease; -o-transition: all.5s ease; transition: all.5s ease; transition: all 0.5s; animation: change 10s infinite;">QQ 号</span>228209506
      </li>
      <li style="font-size: 12px; margin-bottom: 10px; background: #fff; color: #525252; line-height: 40px; border: 1px solid #DDD; border-radius: 2px; position: relative; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
        <img src="https://tc.demius.tech/i/2024/10/04/66ffda4b029f0.webp" style="width: 20px; height: 20px; vertical-align: middle;">
        <span style="float: right; text-align: center; width: 40%; -moz-transition: all.5s ease; -webkit-transition: all.5s ease; -ms-transition: all.5s ease; -o-transition: all.5s ease; transition: all.5s ease; transition: all 0.5s; animation: change 10s infinite;">邮箱帐号</span>demius@foxmail.com
      </li>
    </ul>
  </div>

li span {
      display: block;
      width: 100%;
      line-height: 40px;
    }
  </style>
```

</div>
</div>
</div>

* 方法二

<div class="tab-container post_tab box-shadow-wrap-lg">
<ul class="nav no-padder b-b scroll-hide" role="tablist">
<li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-9efab742fca257f446e5151106f99cc9620' role="tab" data-target='#tabs-9efab742fca257f446e5151106f99cc9620'>效果图</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-9f83ff1abb1115045d7466c9c65f19f6411' role="tab" data-target='#tabs-9f83ff1abb1115045d7466c9c65f19f6411'>html代码</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-db2c9f9baa178ca45efb0eb5cdca877f322' role="tab" data-target='#tabs-db2c9f9baa178ca45efb0eb5cdca877f322'>CSS代码</a></li>
</ul>
<div class="tab-content no-border">
<div role="tabpanel" id='tabs-9efab742fca257f446e5151106f99cc9620' class="tab-pane fade  ">
            
![](https://tc.demius.tech/i/2024/10/07/6703bee206c1e.webp)

</div><div role="tabpanel" id='tabs-9f83ff1abb1115045d7466c9c65f19f6411' class="tab-pane fade  ">

位置：主题后台设置-侧栏设置-自定义侧栏模块

```html
<div class="guanzhu">
      <ul>
        <li class="sina"><a href="https://weibo.com/ftianxiang" target="_blank" rel="external nofollow"><span>新浪微博</span>哒哒哒哒</a></li>
        <li class="qq"><a href="http://wpa.qq.com/msgrd?v=3&uin=1322360062&site=qq&menu=yes" target="_blank" rel="external nofollow"><span>QQ号</span>228209506</a></li>
        <li class="email"><a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=keX48P-p_PD-9r-39P-20eDgv-L_-A" target="_blank" rel="external nofollow"><span>邮箱帐号</span>demius@foxmail.com</a></li>
        <li class="wxgzh"><a href="https://www.xtboke.com/about.html" target="_blank" ><span>微信号</span>XXXXXXXX</a></li>
      </ul>
    </div>
```

</div><div role="tabpanel" id='tabs-db2c9f9baa178ca45efb0eb5cdca877f322' class="tab-pane fade  ">
            
位置：主题后台设置-全局设置-自定义CSS

```css
/*关注*/
.guanzhu{background: var(--background);}
.guanzhu ul li { font-size: 12px; margin-bottom: 10px; background: #fff; color: #525252; line-height: 40px; padding: 0 0 0 34px; border: 1px solid #DDD; border-radius: 2px; position: relative; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.guanzhu .sina { border: #ec3d51 1px solid; background: url(https://tc.demius.tech/i/2024/10/07/6703a2023c51e.webp) no-repeat 0 10px #fff }
.guanzhu .qq { border: #2ab39a 1px solid; background: url(https://tc.demius.tech/i/2024/10/07/6703a2023c51e.webp) no-repeat 0 -98px  #fff}
.guanzhu .email { border: #12aae8 1px solid; background: url(https://tc.demius.tech/i/2024/10/07/6703a2023c51e.webp) no-repeat 0 -150px  #fff}
.guanzhu .wxgzh { border: #199872 1px solid; background: url(https://tc.demius.tech/i/2024/10/07/6703a2023c51e.webp) no-repeat 0 -200px  #fff}
.guanzhu ul li span { float: right; text-align: center; width: 100px; -moz-transition: all .5s ease; -webkit-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; transition: all 0.5s; }
.guanzhu .sina span { background: #ec3d51; }
.guanzhu .qq span { background: #2ab39a; }
.guanzhu .email span { background: #12aae8; }
.guanzhu .wxgzh span { background: #199872; }
.guanzhu a span { color: #FFF }
.guanzhu ul li:hover span { width: 120px; }
```

</div>
</div>
</div>

### 侧边栏添加百度搜索框

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a1e7a61a29551d6cacf512319b06d90314" aria-expanded="true"><div class="accordion-toggle"><span style="">侧边栏添加百度搜索框</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-a1e7a61a29551d6cacf512319b06d90314" class="collapse collapse-content"><p></p>

<div class="tab-container post_tab box-shadow-wrap-lg">
<ul class="nav no-padder b-b scroll-hide" role="tablist">
<li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" 
aria-controls='tabs-c24eb30b17bd5d6c4ce4e741d8513bbd740' role="tab" data-target='#tabs-c24eb30b17bd5d6c4ce4e741d8513bbd740'>效果图</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-20d5cd5916817edc854895c08b4fbf29111' role="tab" data-target='#tabs-20d5cd5916817edc854895c08b4fbf29111'>html代码</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-71af6068a9d449dc9007ccfec9f740b5502' role="tab" data-target='#tabs-71af6068a9d449dc9007ccfec9f740b5502'>CSS代码</a></li>
</ul>
<div class="tab-content no-border">
<div role="tabpanel" id='tabs-c24eb30b17bd5d6c4ce4e741d8513bbd740' class="tab-pane fade active in">

![](https://tc.demius.tech/i/2024/10/07/6703bee88bd15.webp)

</div><div role="tabpanel" id='tabs-20d5cd5916817edc854895c08b4fbf29111' class="tab-pane fade  ">

位置：主题后台设置-侧栏设置-自定义侧栏模块

```html
<section class="joe_aside__item qrcode">
    <div class="joe_aside__item-contain" style="padding-bottom: 10px;">
       <div class="baidu-dwo">
          <form class="baidu-dwo_form" action="https://www.baidu.com/s"
              method="GET" target="_blank">
              <input class="baidu-dwo_input" type="text" name="wd"
                  validatetarget="q"
                  validatetype="must"
                  placeholder="关键词：深秋" value="沈丘博客">
              <input class="baidu-dwo_submit" type="submit" value="搜索">
          </form>
       </div>  
    </div>
</section>
```

</div><div role="tabpanel" id='tabs-71af6068a9d449dc9007ccfec9f740b5502' class="tab-pane fade  ">

位置：主题后台设置-全局设置-自定义CSS

```css
.baidu-dwo{
                width: 100%;
                padding-bottom: 6px;
            }
            .baidu-dwo_form{
                position: relative;
                box-sizing: border-box;
                border: 1px solid var(--theme);
                border-radius: 4px; 
                margin-bottom:5px;
                overflow: hidden;
            }
            .baidu-dwo_input{ 
                border: none;
                font-size: 16px!important;
                font-weight: 100!important;
                color: var(--main);
                outline: none;
                border-radius: 0; 
                padding: 9px 8px;
                margin-bottom: -2px;
                background-color: transparent!important;
            }
            .baidu-dwo_input:focus{
                outline: none;
            }
            .baidu-dwo_submit{
                position: absolute;
                right:2px ;
                top: 50%;
                transform: translateY(-50%);
                box-sizing: border-box;
                border: none;
                border-radius: 4px;
                background-color: var(--theme);
                color: #ffffff;
                padding: 6px 8px;
                cursor: pointer;
            }
            .baidu-dwo_tip{
                font-size: 13px;
                color: var(--minor);
            }
```

</div>
</div>
</div>

### 侧边栏增加广告位

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c2ec22d83b7a4048029ca0cf2e599ce12" aria-expanded="true"><div class="accordion-toggle"><span style="">侧边栏增加广告位</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-c2ec22d83b7a4048029ca0cf2e599ce12" class="collapse collapse-content"><p></p>

* 第一步：

主题文件：public/aside.php下，如图箭头所指位置下方添加代码

![](https://tc.demius.tech/i/2024/10/08/6705543ae6f5f.webp)

</div><div role="tabpanel" id='tabs-6c5972480b02343732ad5a85ddd33c3a961' class="tab-pane fade  ">

```java

  <?php if ($this->options->JADContent) : ?>
    <a class="joe_aside__item advert" target="_blank" rel="noopener noreferrer nofollow" href="<?php echo explode("||", $this->options->JADContent)[1]; ?>" title="深秋的广告栏">
        <img class="lazyload" width="100%" src="<?php _getLazyload() ?>" data-src="<?php echo explode("||", $this->options->JADContent)[0]; ?>" alt="深秋的广告栏" />
        <span class="icon">深秋的广告栏</span>
    </a>
<?php endif; ?>

<?php if ($this->options->JADContent2) : ?>
    <a class="joe_aside__item advert" target="_blank" rel="noopener noreferrer nofollow" href="<?php echo explode("||", $this->options->JADContent2)[1]; ?>" title="深秋的广告栏2">
        <img class="lazyload" width="100%" src="<?php _getLazyload() ?>" data-src="<?php echo explode("||", $this->options->JADContent2)[0]; ?>" alt="深秋的广告栏2" />
        <span class="icon">深秋的广告栏2</span>
    </a>
<?php endif; ?>

<?php if ($this->options->JADContent3) : ?>
    <a class="joe_aside__item advert" target="_blank" rel="noopener noreferrer nofollow" href="<?php echo explode("||", $this->options->JADContent3)[1]; ?>" title="深秋的广告栏3">
        <img class="lazyload" width="100%" src="<?php _getLazyload() ?>" data-src="<?php echo explode("||", $this->options->JADContent3)[0]; ?>" alt="深秋的广告栏3" />
        <span class="icon">深秋的广告栏3</span>
    </a>
<?php endif; ?>
```

</div>
</div>
</div>

* 第二步

在主题文件：Joe/functions.php下

![](https://tc.demius.tech/i/2024/10/08/670555a5afbad.webp)

</div><div role="tabpanel" id='tabs-e58e7667980f34f0375c8b96eb0ac68b691' class="tab-pane fade  ">

```java
// 现有的广告选项
$JADContent = new Typecho_Widget_Helper_Form_Element_Textarea(
    'JADContent',
    NULL,
    NULL,
    '深秋-广告栏（侧） - PC',
    '介绍：用于设置深秋-广告栏（侧） <br />
         格式：广告图片 || 跳转链接 (中间使用两个竖杠分隔)<br />
         注意：如果您只想显示图片不想跳转，可填写：广告图片 || javascript:void(0)
         PS：可填作者的，可填写：https://tc.demius.tech/i/2024/10/08/67055279a699c.webp || https://sq.demius.tech'
         );
$JADContent->setAttribute('class', 'joe_content joe_aside');
$form->addInput($JADContent);

// 新增的广告选项
$JADContent2 = new Typecho_Widget_Helper_Form_Element_Textarea(
    'JADContent2',
    NULL,
    NULL,
    '深秋-广告栏（侧）2 - PC',
    '介绍：用于设置深秋-广告栏（侧）2 <br />
         格式：广告图片 || 跳转链接 (中间使用两个竖杠分隔)<br />
         注意：如果您只想显示图片不想跳转，可填写：广告图片 || javascript:void(0)
         PS：可填作者的，可填写：https://tc.demius.tech/i/2024/10/08/67055279a699c.webp || https://sq.demius.tech'
);
$JADContent2->setAttribute('class', 'joe_content joe_aside');
$form->addInput($JADContent2);

$JADContent3 = new Typecho_Widget_Helper_Form_Element_Textarea(
    'JADContent3',
    NULL,
    NULL,
    '深秋-广告栏（侧）3 - PC',
    '介绍：用于设置深秋-广告栏（侧）3 <br />
         格式：广告图片 || 跳转链接 (中间使用两个竖杠分隔)<br />
         注意：如果您只想显示图片不想跳转，可填写：广告图片 || javascript:void(0)
         PS：可填作者的，可填写：https://tc.demius.tech/i/2024/10/08/67055279a699c.webp || https://sq.demius.tech'
);
$JADContent3->setAttribute('class', 'joe_content joe_aside');
$form->addInput($JADContent3);
```

</div>
</div>
</div>
注意：如果不想要更多的广告位，删除相应的代码片段就行，原主题已经自带了一个广告位，这里再次增加了三个，总共就是四个了哦。

### 给评论加一个一键打卡功能

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d940381e622e23e89f5ee5696c032bf262" aria-expanded="true"><div class="accordion-toggle"><span style="">给评论加一个一键打卡功能</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d940381e622e23e89f5ee5696c032bf262" class="collapse collapse-content"><p></p>

先看效果图：

![请输入图片描述](https://tc.demius.tech/i/2024/10/07/6703f06e49406.webp)

找到 themes/Joe/public/comment.php 的57行
`<div class="owo joe_owo__contain"></div>`
在其下面一行添加：
`<div class="comment-clockIn" onclick="javascript:clockIn()">打卡</div>`

</div><div role="tabpanel" id='tabs-d1d0b07be4b714f2c911ad7a4aae550c221' class="tab-pane fade  ">

在主题后台设置-全局设置-自定义CSS里添加：

```java
/*评论打卡*/
.joe_comment__respond-form .foot {
    justify-content: flex-start!important
}
.comment-clockIn {
    text-align: center;
    color: #606266;
    height: 26px;
    line-height: 26px;
    background: rgba(255,255,255,0.7);
    opacity: .85;
    border-radius: 13px;
    width: 70px;
    margin-left: 5px;
    cursor: pointer
}
```

</div><div role="tabpanel" id='tabs-ce9d97837d879e05e3b52039f225606e02' class="tab-pane fade  ">

后台主题设置-全局设置-自定义JS中添加：

```java
/*评论打卡*/
function clockIn() {
    let time = (new Date).toLocaleTimeString();
    let clockInCon = '滴！贵宾卡！打卡时间：' + time + '，请上车的乘客系好安全带~';
    $(".joe_owo__target").val(clockInCon);
}
```

</div>
</div>
</div>

### LOGO扫光效果

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0138f8652744f23f51cd7f2bf968544092" aria-expanded="true"><div class="accordion-toggle"><span style="">LOGO扫光效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-0138f8652744f23f51cd7f2bf968544092" class="collapse collapse-content"><p></p>

下载的文件上传到主题assets里css文件夹里：

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

</div><div role="tabpanel" id='tabs-6b0928166e6108e90fe8509c8b3374c8891' class="tab-pane fade  ">

后台外观设置-全局设置-自定义css添加代码：

```

<link rel="stylesheet" href="你的域名网址/usr/themes/这里也是按自己的填（joe|Joe-master）/assets/css/heylie.css">

```

</div>
</div>
</div>

### 实现Joe主题首页大图及文章大图设置

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-18d880baf79074d349e003ae896b656296" aria-expanded="true"><div class="accordion-toggle"><span style="">实现Joe主题首页大图及文章大图设置</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-18d880baf79074d349e003ae896b656296" class="collapse collapse-content"><p></p>

* 第一步：引入CSS

首先上传下载的css文件至网站目录（就是创建完网站的域名主目录）

<button class=" btn m-b-xs btn-success btn-rounded " onclick="window.open('https://wwwc.lanzoue.com/iXYZ32c2sgxe','_blank')">Joe首页大图</button>

然后在后台设置-全局设置-自定义<head></head>里放入

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

* 第二步：首页大图

修改 index.php 文件
文件目录 Joe主题文件/index.php
大概第25行代码下方，即：
`<?php $this->need('public/header.php'); ?>` 这行代码下方放入

</div><div role="tabpanel" id='tabs-cb7baf8b2e31355706c0e37c67bec3a4111' class="tab-pane fade  ">

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

</div>
</div>
</div>

* 第三步：文章顶部大图

Joe/post.php
大概21行
`<?php $this->need('public/header.php'); ?>` 下方放入代码

</div><div role="tabpanel" id='tabs-d9294dcf8d3043d66babc627f6b7e932251' class="tab-pane fade  ">

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

```

</div>
</div>
</div>

### 给Jeo博客主题的友链界面新增一个同意勾选

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3fb6bdb738dfda3ef6ace25bccad96c386" aria-expanded="true"><div class="accordion-toggle"><span style="">给Jeo博客主题的友链界面新增一个同意勾选</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-3fb6bdb738dfda3ef6ace25bccad96c386" class="collapse collapse-content"><p></p>

找到主题文件夹下friends.php
从 开始位置选中到 <?php $this->need('public/article.php'); ?>
然后复制下面的代码覆盖：

```
<div id="Joe">
    <?php $this->need('public/header.php'); ?>
    <div class="joe_container">
      <div class="joe_main">
        <div class="joe_detail" data-cid="<?php echo $this->cid ?>">
          <?php $this->need('public/batten.php'); ?>
          <div class="form-container">
  <form id="conditionsForm">
       <h2 class="center-text">请勾选你符合的条件：</h2>
    <label>
      <input type="checkbox" name="condition[]" value="added_friend_link">
      <span>我已添加 沈丘 博客的友情链接</span>
    </label>

<label>
      <input type="checkbox" name="condition[]" value="personal_blog"> 
      <span>我的链接主体为 个人，网站类型为博客</span>
    </label>

<label>
      <input type="checkbox" name="condition[]" value="accessible_in_cn"> 
      <span>我的网站现在可以在中国大陆区域正常访问</span>
    </label>
  
    <label>
      <input type="checkbox" name="condition[]" value="accessible_fl"> 
      <span>我接受并同意本站相关规则及政策</span>
    </label>

<label>
      <input type="checkbox" name="condition[]" value="compliant_laws">
      <span>网站内容符合中国大陆法律法规</span>
    </label>
    <p id="instructions" class="hidden">勾选后展示评论区发送申请</p>
  </form>
</div>
          <?php $this->need('public/article.php'); ?>

```

</div><div role="tabpanel" id='tabs-a471ad5a3303d980dec07e8f2e1a39e8751' class="tab-pane fade  ">

```
<style>
                        /* BLOG.HEYLIE.CN基础样式 */
                        body {
                            position: relative;
                            min-height: 100%;
                            background: var(--heo-background);
                            color: var(--heo-fontcolor);
                            font-size: 16px;
                            font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
                            line-height: 2;
                            -webkit-tap-highlight-color: transparent;
                            margin: 0
                        }

.form-container {
                            max-width: 800px;
                            margin: auto;
                        }

.center-text {
                            text-align: center;
                        }

#conditionsForm {
                            margin-bottom: 20px;
                            font-size: 16px;
                            border: 1px solid #ccc;
                            padding: 15px;
                            background-color: #f9f9f9;
                            border-radius: 5px;
                        }

#conditionsForm label {
                            display: block;
                            margin-top: 10px;
                            cursor: pointer;
                        }

#conditionsForm input[type="checkbox"] {
                            margin-right: 8px;
                            vertical-align: middle;
                        }

#conditionsForm input[type="checkbox"]:checked+span {
                            color: green;
                            font-weight: bold;
                        }

#conditionsForm label:hover {
                            background-color: #e0e0e0;
                            padding-left: 5px;
                        }

#instructions {
                            text-align: center;
                            opacity: 0.5;
                            /* 默认透明度为0.5 */
                            transition: opacity 0.3s ease-in-out;
                        }

.hidden {
                            opacity: 0;
                            pointer-events: none;
                            /* 阻止鼠标事件 */
                        }
                    </style>

```

</div><div role="tabpanel" id='tabs-1d670a352de57ad3d4f0fcd9fcc28774922' class="tab-pane fade  ">

```
<script>
                        // 监听所有复选框的变化
                        document.querySelectorAll('#conditionsForm input[type="checkbox"]').forEach(function (checkbox) {
                            checkbox.addEventListener('change', checkConditions);
                        });

function checkConditions() {
                            // 获取所有的条件复选框
                            var conditions = document.getElementsByName('condition[]');
                            var allChecked = true;

// 检查是否有未选中的复选框
                            for (var i = 0; i < conditions.length; i++) {
                                if (!conditions[i].checked) {
                                    allChecked = false;
                                    break;
                                }
                            }

// 根据复选框的状态显示或隐藏评论区
                            var commentsSection = document.getElementById('comments');
                            commentsSection.style.display = allChecked ? 'block' : 'none';
                        }
                    </script>

```

</div>
</div>
</div>

End

文章标签：主题美化，typecho，typehco主题，Joe

本文标题：实用指南：Typecho 系统的 Joe 主题美化技巧持续更新

本文链接： https://blog.demius.tech/archives/491.html

除非注明，均默认采用 CC BY-NC-SA 4.0许可协议。

声明：转载请注明文章来源。

最后修改：2024 年 10 月 22 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

打卡

语录

私密评论

名称 *

🎲

邮箱 *

地址

实用指南：Typecho 系统的 Joe 主题美化技巧持续更新

demius • 2024 年 10 月 09 日