写一个Typecho目录插件
没有目录，就写一个目录插件....
前端
原本是想参考之前MarkdownPad 2 生成的HTML自动生成目录 这个文章搞的，发现还得jq，还得是CHATGPT，根据文章h1，h2等标签层级生成悬浮目录
代码
/* 浮动目录的样式 */
#toc {
position: fixed;
top: 60px;
right: 20px;
width: 220px;
border: 1px solid #ccc;
padding: 10px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.5s ease, opacity 0.5s ease;
}
/* 启用滚动条，限制最大高度 */
#toc.show {
max-height: 400px;
opacity: 1;
overflow-y: auto;
}
/* 高亮当前章节 */
#toc a.active {
background-color: #007bff;
color: white;
}
#toc ul {
list-style: none;
padding-left: 0;
margin: 0;
}
#toc ul li {
margin-bottom: 2px; /* 缩小间距 */
font-size: 12px;
}
/* 不同层级的文字大小和缩进 */
#toc ul li h1 {
font-size: 14px;
font-weight: bold;
margin-left: 8px;
color: #333;
}
#toc ul li h2 {
font-size: 12px;
margin-left: 16px;
font-weight: 600;
color: #555;
}
#toc ul li h3 {
font-size: 11px;
margin-left: 24px;
font-weight: 500;
color: #777;
}
#toc ul li h4 {
font-size: 10px;
margin-left: 32px;
font-weight: 500;
color: #888;
}
#toc ul li h5 {
font-size: 9px;
margin-left: 40px;
font-weight: 500;
color: #999;
}
#toc ul li h6 {
font-size: 8px;
margin-left: 48px;
font-weight: 500;
color: #aaa;
}
/* 目录链接样式 */
#toc a {
text-decoration: none;
color: inherit;
display: block;
padding: 1px 0; /* 缩小每个目录项的高度 */
border-radius: 4px;
transition: background-color 0.3s;
}
#toc a:hover {
background-color: #e0e0e0;
}
/* 展示/隐藏按钮的样式 */
#toggle-toc {
position: fixed;
top: 20px;
right: 20px;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s;
}
#toggle-toc:hover {
background-color: #0056b3;
} <!-- 展示/隐藏目录的按钮 -->
<button id="toggle-toc">显示目录</button>
<!-- 这里是目录的容器 -->
<div id="toc"></div> const muenMain = document.querySelector('.post-content');
document.addEventListener("DOMContentLoaded", function() {
// 获取所有 h1 到 h6 元素
const headers = muenMain.querySelectorAll("h1, h2, h3, h4, h5, h6");
const toc = document.getElementById("toc");
// 创建目录的容器
const tocList = document.createElement("ul");
const toggleButton = document.getElementById("toggle-toc");
if (headers.length === 0) {
toggleButton.style.display = 'none';
return;
}
// 遍历每个标题元素，构建目录结构
headers.forEach(function(header, index) {
const level = header.tagName.toLowerCase(); // 获取标签名
const listItem = document.createElement("li");
// 根据标题层级调整不同的标签样式
const headerTag = document.createElement(level);
headerTag.textContent = header.textContent;
// 创建锚链接
const link = document.createElement("a");
const anchorId = "toc-item-" + index;
link.href = "#" + anchorId;
// 给每个标题添加 id，作为锚点
header.id = anchorId;
// 将标题放入链接中
link.appendChild(headerTag);
listItem.appendChild(link);
tocList.appendChild(listItem);
});
// 将目录添加到 toc 容器中
toc.appendChild(tocList);
// 为锚链接添加平滑滚动效果
const tocLinks = toc.querySelectorAll("a");
tocLinks.forEach(function(link) {
link.addEventListener("click", function(event) {
event.preventDefault();
const targetId = this.getAttribute("href").substring(1);
const targetElement = document.getElementById(targetId);
// 平滑滚动到目标位置
window.scrollTo({
top: targetElement.offsetTop - 20, // 微调滚动位置
behavior: "smooth"
});
});
});
// 展示/隐藏目录功能
toggleButton.addEventListener("click", function() {
if (toc.classList.contains("show")) {
toc.classList.remove("show");
toggleButton.textContent = "显示目录";
} else {
toc.classList.add("show");
toggleButton.textContent = "隐藏目录";
}
});
// 动态高亮目录项
function highlightCurrentSection(a) {
let currentActive = null;
headers.forEach(function(header, index) {
const rect = header.getBoundingClientRect();
if (rect.top < 25 && rect.bottom > 25) {
currentActive = tocLinks[index];
}
});
if (!currentActive) {
return;
}
tocLinks.forEach(function(link) {
link.classList.remove("active");
});
currentActive.classList.add("active");
}
// 页面加载时初始化高亮
highlightCurrentSection();
// 监听页面滚动事件，动态高亮对应的目录项
document.addEventListener("scroll", highlightCurrentSection);
});
直接使用
其实这里就可以直接用了，把对应的代码粘贴到主题文件对应的位置就行了，没啥好说的。但这样直接就硬写入到主题中了，所以写个插件
插件
插件基于最新版的typecho 1.3.0编写，插件名就叫做SimpleMenuView吧
手动生成插件
在插件目录新建SimpleMenuView目录，然后在里面建一个Plugin.php文件，完整路径plugins/SimpleMenuView/Plugin.php，把下面的代码贴进去，然后后台激活即可
<?php
namespace TypechoPlugin\SimpleMenuView;
use Typecho\Plugin\PluginInterface;
use Typecho\Widget\Helper\Form;
if (!defined('__TYPECHO_ROOT_DIR__')) {
exit;
}
/**
* 一个简单的目录插件。只对默认主题进行了适配。有问题可看链接自定义修改
*
* @package SimpleMenuView
* @author Evlan
* @version 1.0.0
* @link https://evlan.cc/archives/typecho-plugins-menu.html
*/
class Plugin implements PluginInterface
{
/**
* 激活插件方法,如果激活失败,直接抛出异常
*/
public static function activate()
{
\Typecho\Plugin::factory(\Widget\Archive::class)->header = [self::class, 'setHeader'];
\Typecho\Plugin::factory(\Widget\Archive::class)->footer = [self::class, 'setFooter'];
}
public static function setHeader(): void
{
echo <<<'EOL'
<style>
/* 浮动目录的样式 */
#toc {
position: fixed;
top: 60px;
right: 20px;
width: 220px;
border: 1px solid #ccc;
padding: 10px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.5s ease, opacity 0.5s ease;
}
/* 启用滚动条，限制最大高度 */
#toc.show {
max-height: 400px;
opacity: 1;
overflow-y: auto;
}
/* 高亮当前章节 */
#toc a.active {
background-color: #007bff;
color: white;
}
#toc ul {
list-style: none;
padding-left: 0;
margin: 0;
}
#toc ul li {
margin-bottom: 2px; /* 缩小间距 */
font-size: 12px;
}
/* 不同层级的文字大小和缩进 */
#toc ul li h1 {
font-size: 14px;
font-weight: bold;
margin-left: 8px;
color: #333;
}
#toc ul li h2 {
font-size: 12px;
margin-left: 16px;
font-weight: 600;
color: #555;
}
#toc ul li h3 {
font-size: 11px;
margin-left: 24px;
font-weight: 500;
color: #777;
}
#toc ul li h4 {
font-size: 10px;
margin-left: 32px;
font-weight: 500;
color: #888;
}
#toc ul li h5 {
font-size: 9px;
margin-left: 40px;
font-weight: 500;
color: #999;
}
#toc ul li h6 {
font-size: 8px;
margin-left: 48px;
font-weight: 500;
color: #aaa;
}
/* 目录链接样式 */
#toc a {
text-decoration: none;
color: inherit;
display: block;
padding: 1px 0; /* 缩小每个目录项的高度 */
border-radius: 4px;
transition: background-color 0.3s;
}
#toc a:hover {
background-color: #e0e0e0;
}
/* 展示/隐藏按钮的样式 */
#toggle-toc {
position: fixed;
top: 20px;
right: 20px;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s;
}
#toggle-toc:hover {
background-color: #0056b3;
}
</style>
EOL;
}
public static function setFooter(): void
{
echo <<<'EOL'
<!-- 展示/隐藏目录的按钮 -->
<button id="toggle-toc">显示目录</button>
<!-- 这里是目录的容器 -->
<div id="toc"></div>
<script>
const muenMain = document.querySelector('.post-content');
document.addEventListener("DOMContentLoaded", function() {
// 获取所有 h1 到 h6 元素
const headers = muenMain.querySelectorAll("h1, h2, h3, h4, h5, h6");
const toc = document.getElementById("toc");
// 创建目录的容器
const tocList = document.createElement("ul");
const toggleButton = document.getElementById("toggle-toc");
if (headers.length === 0) {
toggleButton.style.display = 'none';
return;
}
// 遍历每个标题元素，构建目录结构
headers.forEach(function(header, index) {
const level = header.tagName.toLowerCase(); // 获取标签名
const listItem = document.createElement("li");
// 根据标题层级调整不同的标签样式
const headerTag = document.createElement(level);
headerTag.textContent = header.textContent;
// 创建锚链接
const link = document.createElement("a");
const anchorId = "toc-item-" + index;
link.href = "#" + anchorId;
// 给每个标题添加 id，作为锚点
header.id = anchorId;
// 将标题放入链接中
link.appendChild(headerTag);
listItem.appendChild(link);
tocList.appendChild(listItem);
});
// 将目录添加到 toc 容器中
toc.appendChild(tocList);
// 为锚链接添加平滑滚动效果
const tocLinks = toc.querySelectorAll("a");
tocLinks.forEach(function(link) {
link.addEventListener("click", function(event) {
event.preventDefault();
const targetId = this.getAttribute("href").substring(1);
const targetElement = document.getElementById(targetId);
// 平滑滚动到目标位置
window.scrollTo({
top: targetElement.offsetTop - 20, // 微调滚动位置
behavior: "smooth"
});
});
});
// 展示/隐藏目录功能
toggleButton.addEventListener("click", function() {
if (toc.classList.contains("show")) {
toc.classList.remove("show");
toggleButton.textContent = "显示目录";
} else {
toc.classList.add("show");
toggleButton.textContent = "隐藏目录";
}
});
// 动态高亮目录项
function highlightCurrentSection(a) {
let currentActive = null;
headers.forEach(function(header, index) {
const rect = header.getBoundingClientRect();
if (rect.top < 25 && rect.bottom > 25) {
currentActive = tocLinks[index];
}
});
if (!currentActive) {
return;
}
tocLinks.forEach(function(link) {
link.classList.remove("active");
});
currentActive.classList.add("active");
}
// 页面加载时初始化高亮
highlightCurrentSection();
// 监听页面滚动事件，动态高亮对应的目录项
document.addEventListener("scroll", highlightCurrentSection);
});
</script>
EOL;
}
/**
* 禁用插件方法,如果禁用失败,直接抛出异常
*/
public static function deactivate()
{
}
/**
* 获取插件配置面板
*
* @param Form $form 配置面板
*/
public static function config(Form $form)
{
}
/**
* 个人用户的配置面板
*
* @param Form $form
*/
public static function personalConfig(Form $form)
{
}
}
安装包
下载之后在插件目录解压即可https://evlan.cc/download/file/TypechoSimpleMenuView.zip