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

Author:

火喵酱

©

Wordage:

共计 2046 字

needs:

约 2 分钟

Popular:

1304 ℃

Created:

:本文最后更新于2022年11月15日,已经过了76天没有更新,若内容或图片失效,请留言反馈
目 录

前排提示!!此方法为之前用的方法,实际效果和现在的不同。

本文火喵原创,禁止转载

样式效果

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

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

下载插件

各位可以去插件作者地址去下载: 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,也不能跟随文章页滚动,有大佬会修改请告诉我,感谢
感谢!

如果觉得文章很不错,欢迎点一点下面的广告,来表达对喵喵的支持qaq

- - - The END - - -
文章二维码
火喵自用typecho-joe主题文章目录插件及样式修改
共计 20 条评论,点此发表评论
  1. 头像
    白白
    新人

    访客

    试试看吧

    · Win 1x · Chrome · 北京
  2. 头像
    qaq
    新人

    访客

    学习了

    · Win 1x · Chrome · 湖北
  3. 头像
    kingkare
    Lv.2

    访客

    学习了

    · Win 7 · Chrome · 山西
  4. 头像
    公爵的披风
    Lv.1

    访客

    感谢大佬,学习了

    · Win 1x · Chrome · 福建
  5. 头像
    edl
    新人

    访客

    学习了

    · Win 1x · Chrome · 广东
  6. 头像
    咪咪
    新人

    访客

    大佬

    · Win 1x · Chrome · 河北
  7. 头像
    Falling_低熵体
    新人

    访客

    :@(长草)大佬(

    · Win 1x · Chrome · 台湾
  8. 头像
    一直小物块
    新人

    访客

    谢谢!!!

    · Win 1x · Chrome · 重庆
  9. 头像
    Lemon
    新人

    访客

    好好看

    · Win 1x · Chrome · 浙江
  10. 头像
    小N同学
    新人

    访客

    好看~:@(高兴)

    · Win 1x · Chrome · 韩国首尔Oracle云计算数据中心
  11. 头像
    知识分子没文化
    新人

    访客

    请教一下,博主的文章目录是怎样实现在手机端隐藏的呢:@(想一想)

    · Win 1x · Chrome · 山西
    1. 头像
      知识分子没文化 知识分子没文化
      新人

      访客

      看到样式文件我明白了怎么实现的了:@(无奈)

      · Win 1x · Chrome · 山西
      1. 头像

        噗,你这邮箱没头像呀,强迫症的我换成qq的头像了:@(献花)

        · Win 1x · Chrome · 辽宁
  12. 头像
    墨希
    新人

    访客

    :@(cat30)

    · MacOS · 火狐浏览器 · 江西
    1. 头像
      火喵酱 墨希

      博主

      你的文章目录也好不错诶

      · Win 1x · Chrome · 辽宁
      1. 头像
        墨希 火喵酱
        新人

        访客

        啊是嘛谢啦~

        · MacOS · 火狐浏览器 · 江西
博客主页 火喵博客・日记本 经为流逝的日月,纬为人们的生业 51统计 百度统计 🌸
萌ICP备20210005号 辽ICP备2021005644号-1 辽公网安备 21021102000984号 十年之约 2 年 326 天 11 小时 28 分 🌸 本站由 Typecho 建站,并搭配自制 MyDiary 主题 Copyright © 2009 ~ 2023. 火喵酱 All rights reserved.
历史足迹
分类目录
  • 日常
  • 晒物
  • 🦙 代码
  • 🏗️ 建站
  • 📷 生活
  • 打赏图
    打赏博主
    欢迎
    欢迎
    欢迎访问火喵博客・日记本
    欢迎来看望喵喵!