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

Author:

火喵酱

©

Wordage:

共计 2302 字

needs:

约 2 分钟

Popular:

663 ℃

Created:

温馨提示:

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

{message type="zm_gll" content="前排提示!!此方法为之前用的方法,实际效果和现在的不同。"/}

{message type="error" content="本文火喵原创,禁止转载"/}

样式效果

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

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同理

{tabs}
{tabs-pane label="效果图"}
2021-8-5-11-21-47.png
{/tabs-pane}
{tabs-pane label="代码位置"}
2021-8-5-11-24-26.png
{/tabs-pane}
{/tabs}

最后想说

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

    访客

    学习了

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

    访客

    感谢大佬,学习了

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

    访客

    学习了

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

    访客

    大佬

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

    访客

    :@(长草)大佬(

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

    访客

    谢谢!!!

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

    访客

    好好看

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

    访客

    好看~:@(高兴)

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

    访客

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

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

      访客

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

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

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

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

    访客

    :@(cat30)

    · MacOS · 火狐浏览器 · 江西
    1. 头像
      @

      你的文章目录也好不错诶

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

        访客

        啊是嘛谢啦~

        · MacOS · 火狐浏览器 · 江西
  11. 头像
    @
    Andy
    新人

    访客

    来学习

    · MacOS · Chrome · 黑龙江
  12. 头像
    @
    HYTN
    Lv.1

    好友

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

    · Win 1x · Chrome · 四川
    1. 头像
      @

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

      · Win 1x · Chrome · 辽宁
萌ICP备20210005号 辽ICP备2021005644号-1 辽公网安备 21021102000984号 本站已运行 2 年 202 天 14 小时 7 分 51统计 百度统计 自豪地使用 Typecho 建站,并搭配 MyDiary 主题 Copyright © 2020 ~ 2022. 火喵博客・日记本 All rights reserved.
历史足迹
分类目录
  • 日常
  • 晒物
  • 🦙 代码
  • 🏗️ 建站
  • 📷 生活