歌曲封面 未知作品
  • 歌曲封面あの日のままのぼくら雨宮天
  • 歌曲封面やさしさに包まれたなら松任谷由実
  • 歌曲封面夜、萤火虫和你AniFace
  • 歌曲封面Rum and Coca ColaThe Andrews Sisters
  • 歌曲封面ShelterPorter Robinson

萌ICP备20210005号

辽ICP备2021005644号

绯色之喵 @2009

网站已运行 4 年 257 天 5 小时 59 分

Powered by Typecho & Sunny

2 online · 35 ms

歌曲封面 未知作品
  • 歌曲封面あの日のままのぼくら雨宮天
  • 歌曲封面やさしさに包まれたなら松任谷由実
  • 歌曲封面夜、萤火虫和你AniFace
  • 歌曲封面Rum and Coca ColaThe Andrews Sisters
  • 歌曲封面ShelterPorter Robinson

萌ICP备20210005号

辽ICP备2021005644号

绯色之喵 @2009

网站已运行 4 年 257 天 5 小时 59 分

Powered by Typecho & Sunny

4 online · 38 ms

Title

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

绯色之喵

·

Typecho

·

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

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

样式效果

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

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

下载插件

各位可以去插件作者地址去下载: 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,也不能跟随文章页滚动,有大佬会修改请告诉我,感谢
现在已有 642 次阅读,30 条评论,1 人点赞

广告

页底广告 页底广告
Comment:共30条
发表
  1. 头像
    @
    请教一下,博主的文章目录是怎样实现在手机端隐藏的呢
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
    1. 头像
      @
      知识分子没文化 @知识分子没文化
      看到样式文件我明白了怎么实现的了
      · Chrome

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
      1. 头像
        @
        噗,你这邮箱没头像呀,强迫症的我换成qq的头像了
        · Chrome

        👍

        💖

        💯

        💦

        😄

        🪙

        👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  2. 头像
    @
    :
    · 火狐浏览器

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
    1. 头像
      @
      你的文章目录也好不错诶
      · Chrome

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
      1. 头像
        @
        墨希 @火喵酱
        啊是嘛谢啦~
        · 火狐浏览器

        👍

        💖

        💯

        💦

        😄

        🪙

        👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  3. 头像
    @
    来学习
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  4. 头像
    @

    好友

    🦄

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

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
    1. 头像
      @
      本来没打算分享这个目录的,有小伙伴要求我才写的,只是凑合能用的状态
      · Chrome

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  5. 头像
    @

    好友

    🦄

    HYTN
    大晚上来学习
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
搜 索 消 息 足 迹
你还不曾留言过..
你还不曾留下足迹..
博主 欢迎访问喵喵的博客,记录每日好心情! 不再显示
博主