为WordPress网站提供类似GitBook的侧边目录

2022-05-22 235 阅读1分钟

WordPress是一个很优秀的建站工具, zhaoolee用WordPress建立了自己的博客网站v2fy.com (Way To 方圆) , 对于个人博客而言, GitBook的侧边栏文章目录, 非常适合广大读者阅读, 于是我研究了一下WordPress的开放api接口, 然后写了个工具, 可以使用纯前端的方式, 以WordPress标准Api获取数据, 构建一个类似GitBook的侧边目录

支持手动隐藏显示侧边栏

支持手动隐藏显示侧边栏

支持根据屏幕宽度判断显示/隐藏侧边目录(窗口宽度500px及以上显示侧边栏, 500px以下则隐藏侧边栏)

根据屏幕宽度判断显示/隐藏侧边目录

侧边栏内容, 支持根据当前网址加深颜色, 并滚动到侧边栏顶部

支持根据当前网址加深颜色, 并滚动到侧边栏顶部

支持localStore缓存侧边栏数据, 首次加载后, 侧边栏秒显示, 超过五分钟则自动更新侧边栏数据

缓存侧边栏数据

支持通过油猴(Tampermonkey)插件, 为任意WordPress站生成目录

为任意WordPress站生成目录

油猴脚本

// ==UserScript==
// @name         wordpress-sidebar
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://fangyuanxiaozhan.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=v2fy.com
// @grant        none
// @require       https://v2fy.com/wordpress-sidebar/index.js
// ==/UserScript==

WordPress站长使用方法

在页脚插入js脚本即可

在页脚插入脚本即可

<script src="https://www.v2fy.com/wordpress-sidebar/index.js"></script>

以上 www.v2fy.com/wordpress-s… 不保证稳定, 代码已经在Github开源, 可以从 github.com/zhaoolee/wo… 获得最新的脚本代码