火喵自用typecho-joe主题文章目录插件及样式修改
 文章目录

原创

火喵自用typecho-joe主题文章目录插件及样式修改

火喵酱
typechojoe主题插件
2021年8月5日 16 评论 359 阅读 正在检测是否收录...

样式效果

之前小站做了个文章目录,但是问题很多就没有写什么使用方法,但是今天有小伙伴来问我要小站的目录,于是只好写一篇这样的教程,本来是很简单的,用插件就可以实现了,但是有一些美中不足之处,这样写出来也方便和小伙伴们交流。(才不是为了水一篇博文的!绝对是呢!!→_→)

Test

最终的效果是这样的,小伙伴也能在小站浏览的时候发现它

2021-8-5-10-54-12.png

下载插件

各位可以去插件作者地址去下载: https://github.com/wuruowuxin74/MenuTree
也可以在我这下现成的

写入样式

可以新建一个postmenu.css,写入

别忘了在include.php引用
美化样式是火喵自用,不满意的地方可以自行修改,更多可修改的部分参见插件php内的说明。
插件启动后,在想要插入目录的文章,页面的任意位置写 <!-- index-menu -->

更方便的使用(可选)

小伙伴们会发现在使用文字目录时,打字 <!-- index-menu -->很麻烦,现在有两个解决办法,一个是写入到joe编辑器的工具栏,二是放在编辑框的右侧,如图,用的时候直接复制一下就好了

修改\admin\write-post.php内,想要的位置添加代码

<section class="typecho-post-option">
    <label class="typecho-label"><?php _e('文章目录 &lt;!-- index-menu --&gt;'); ?></label>
</section>

可选择修改write-page.php同理

最后想说

1. 因为使用的插件可以自选当前文章是否需要用文章目录,我之前也修改过另一个文章目录插件,是自动检测文章内容的H2,H3字段,当然有需要的也可以这么改
2. 看css可知我选择的是position: fixed,针对浏览器窗口定位,缺点是在非1080的屏幕上很丑,因此隐藏了宽度小于1900的显示,高分辨率屏幕就显得格格不入了,没办法qaq,也不能跟随文章页滚动,有大佬会修改请告诉我,感谢

- - - The END - - -

- - - 打 赏 - - -
版权属于: 火喵 ©
最后更新: 2022 年 02 月 13 日 11 时
解压密码: ✽✽✽✽✽✽
阅读时间: 本文共 550 个字数,平均阅读时长 ≈ 2分钟

共计 16 条评论,点此发表评论

人机验证

  1. 头像
    @
    广东
    edl
    水手

    海员

    学习了

  2. 头像
    @
    河北
    咪咪
    水手

    海员

    大佬

  3. 头像
    @
    台湾
    Falling_低熵体
    水手

    海员

    表情大佬(

  4. 头像
    @
    重庆
    一直小物块
    水手

    海员

    谢谢!!!

  5. 头像
    @
    浙江
    Lemon
    水手

    海员

    好好看

  6. 头像
    @
    山西
    知识分子没文化
    水手

    海员

    请教一下,博主的文章目录是怎样实现在手机端隐藏的呢表情

    1. 头像
      @
      山西
      知识分子没文化
      @ 知识分子没文化
      水手

      海员

      看到样式文件我明白了怎么实现的了表情

      1. 头像
        @
        喵星
        火喵酱
        @ 知识分子没文化

        提督

        噗,你这邮箱没头像呀,强迫症的我换成qq的头像了表情

  7. 头像
    @
    江西
    墨希
    水手

    海员

    :@(cat30)

    1. 头像
      @
      喵星
      火喵酱
      @ 墨希

      提督

      你的文章目录也好不错诶

      1. 头像
        @
        江西
        墨希
        @ 火喵酱
        水手

        海员

        啊是嘛谢啦~

  8. 头像
    @
    黑龙江
    Andy
    水手

    海员

    来学习

  9. 头像
    @
    四川
    HYTN
    士官

    舰长

    学完了,有一个问题,,,目录是有了,但是定位的偏移量没法设置了,你康康你现在的,定位不适合阅读

    1. 头像
      @
      喵星
      火喵酱
      @ HYTN

      提督

      本来没打算分享这个目录的,有小伙伴要求我才写的,只是凑合能用的状态

  10. 头像
    @
    四川
    HYTN
    士官

    舰长

    大晚上来学习