喵喵博客志 记录喵喵美好生活
歌曲封面 未知作品
  • 歌曲封面ひこうき雲松任谷由実
  • 歌曲封面El Pueblo Unido Jamás Será Vencido (En Vivo)Quilapayun
  • 歌曲封面I wish来栖りん
  • 歌曲封面冬の花宮本浩次
  • 歌曲封面So Cute~Lopu$

萌ICP备20210005号

辽ICP备2021005644号

辽公网安备 21021102000984号

绯色之喵 @2009

十年之约计划 4 年 71 天 11 小时 53 分

Powered by Typecho & Sunny

3 online · 188 ms

Title

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

绯色之喵

·

Article
⚠️ 本文最后更新于2023年02月22日,已经过了452天没有更新,若内容或图片失效,请留言反馈

前排提示!!此方法为之前用的方法,实际效果和现在的不同。本文火喵原创,禁止转载

样式效果

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

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

下载插件

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

此处内容,需回复之后可见

写入样式

可以新建一个postmenu.css,写入
此处内容,需回复之后可见

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

更方便的使用(可选)

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

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

♾️ 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,也不能跟随文章页滚动,有大佬会修改请告诉我,感谢
现在已有 30 条评论,1 人点赞
Comment
发表
  1. 头像
    @
    大大滴有
    6666666666
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 2 💖 2 💯 2 💦 2 😄 2 🪙 1
  2. 头像
    @
    fanwu
    好棒哟
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 2 💖 1 💯 1 💦 1 😄 1 🪙 0
  3. 头像
    @
    小林
    感谢博主
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 2 💖 1 💯 1 💦 1 😄 0 🪙 0
  4. 头像
    @
    秋暮lianxs
    看看隐藏
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 2 💖 1 💯 0 💦 0 😄 0 🪙 0
  5. 头像
    @
    FAN
    好棒!我试试把他引入我的主题 👍
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 2 💖 1 💯 0 💦 0 😄 0 🪙 0
  6. 头像
    @
    球拍
    咋改sticky?
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 2 💖 0 💯 0 💦 0 😄 0 🪙 0
  7. 头像
    @
    哈哈
    主题目录悬浮怎么搞的,钉不住
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 1 💖 0 💯 0 💦 0 😄 0 🪙 0
  8. 头像
    @
    waa
    怎么搞这个文章大纲?
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  9. 头像
    @
    前来学习 (ฅ´ω`ฅ)
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  10. 头像
    @
    阿尔法色色
    前来学习
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  11. 头像
    @
    白白
    试试看吧
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  12. 头像
    @
    qaq
    学习了
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  13. 头像
    @
    kingkare
    学习了
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  14. 头像
    @
    感谢大佬,学习了
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  15. 头像
    @
    edl
    学习了
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  16. 头像
    @
    咪咪
    大佬
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  17. 头像
    @
    大佬(
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  18. 头像
    @
    谢谢!!!
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  19. 头像
    @
    Lemon
    好好看
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  20. 头像
    @
    好看~
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
搜 索 消 息 足 迹
你还不曾留言过..
你还不曾留下足迹..
博主