为Typecho Joe主题添加一个侧边栏文章导读!
圆弧派博客 - 专注于网络技术

为Typecho Joe主题添加一个侧边栏文章导读!

青帝
2022-12-18 / 0 评论 / 509 阅读 / 正在检测是否收录...

效果图

PC侧边栏文章导读

一、引用1个JS

<script src="https://cdn.jsdelivr.net/gh/xh8039/static-assets/Joe/assets/js/joe.autoc.min.js?version=1.23"></script>

二、添加一段css

打开文件:/usr/themes/Joe/assets/css/joe.autoc.css
在此文件最下方加入这一行代码即可:

/*外部*/
.outline-outside {
    background: var(--background);
}

/*章节*/
.outline-chapter {
    font-size: 0.95rem;
    line-height: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.outline-subject {
    padding: 0 10px;
}

.outline-chapter-code {
    padding-right: 5px;
}

.outline-link:link,
.outline-link:visited {
    color: var(--routine);
    text-decoration: none;
    transition: 0.15s;
}

.outline-link:hover {
    color: var(--theme);
}

评论 (0)

语录
取消
  1. 头像
    Jonty
    Win 10 / Chrome /
    江苏省

    不知道为什么 没效果。。。

    回复
    1. 头像
      青帝 作者
      Win 10 / Chrome /
      河南省
      Jonty

      清一下缓存试试,可能是CSS被CDN或者浏览器缓存住了表情

      回复
  2. 头像
    222
    Win 10 / Chrome /
    河南省

    用的joe主题 没这个文件夹咋整

    回复
    1. 头像
      青帝
      Win 7 / Chrome /
      河南省
      222

      在其他css里加也可以,只要页面引用了就行

      回复