hexo-auto-toc 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 70v
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,34 @@
+<a>![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)</a> <a href="https://www.npmjs.com/package/hexo-auto-toc">![](https://img.shields.io/npm/v/hexo-auto-toc)</a> [![Required Hexo version](https://img.shields.io/badge/hexo-%3E=7.3.0-steelblue?style=flat-square&logo=hexo)](https://hexo.io) <a href="https://www.npmjs.com/package/hexo-everyday-calendar">![](https://img.shields.io/npm/dt/hexo-auto-toc)</a>
+
+# hexo-auto-toc
+
+Automatically generate a fixed table of contents that is fixed to the side of the article page.
+
+- Getting Started
+
+1. Installation
+
+```bash
+npm install hexo-auto-toc
+```
+
+2. The plugin will automatically parse all content within the `<article>` tag and generate a table of contents.
+   If your article page structure does not wrap the content inside an `<article>` element, you need to add it manually — typically in the `index.html` file under your `blog` folder.
+
+- 使用 
+
+1. 安装
+
+```bash
+npm install hexo-auto-toc
+```
+
+2. 插件会自动对`<article>`包含下的所有内容进行解析，自动生成目录。如果你的文章页面结构中内容没被`<article>`包裹，需要自行添加它（即blog文件夹下的index.html）
+
+- 效果 Example
+
+![Example](https://70v-yoyo.github.io/images/IMG30869.jpg)
+
+# Recommendations
+
+- hexo-everyday-calendar：This is a practical calendar plugin for hexo bloggers, like contribution statistics on GitHub.

package/index.js

@@ -0,0 +1,165 @@
+'use strict';
+
+hexo.extend.filter.register('after_render:html', function (html) {
+  // 用正则找文章内容的容器（这里默认文章内容在class="site-body"的div里）
+  // 如果你的主题不是这个类名，需要调整选择器
+  /*
+  [\s\S]	匹配任何字符（空白或非空白）
+   */
+  const contentMatch = html.match(/<article([\s\S]*?)<\/article>/);
+  console.log('contentMatch',contentMatch.length)
+  if (!contentMatch) return html; // 找不到文章内容就跳过
+
+  // 给文章内容，后面插入一个目录容器div（空的）
+  // 目录的html和js在下面会动态生成
+  const tocDiv = `
+    <div id="fixed-toc-container" style="
+  
+      position: fixed;
+      top: 0vh;
+      left: 0px;
+      width: 13rem;
+      max-height: 100vh;
+      overflow-y: auto;
+      overflow-x: auto;
+      padding: 10px;
+      border-left: 2px solid #ccc;
+      font-size: 14px;
+      line-height: 1.5;
+      background: #fff;
+      opacity:0.8;
+      z-index: 999;
+      box-shadow:
+        0 2px 4px rgba(0, 0, 0, 0.05),  /* 第一层：近处柔和 */
+        0 8px 16px rgba(0, 0, 0, 0.08); /* 第二层：远处扩散 */
+    ">
+      <strong>Contents</strong>
+      <div id="toggle_btn" style="
+      position:absolute;
+      right:1rem;
+      display:inline-block;
+      width:2rem;
+      text-align:center;
+      border:1px solid #ccc;
+      "><</div>
+      <ul id="fixed-toc-list" style="list-style: none; padding-left: 10px;"></ul>
+    </div>
+
+    <script>
+   
+const myDiv = document.getElementById('toggle_btn');
+var tocList=document.getElementById("fixed-toc-list");
+var tocContainer=document.getElementById("fixed-toc-container");
+function handleClickBtn() {
+  console.log('Div 被点击了！');
+  if(myDiv.textContent==='<'){
+    myDiv.textContent ='>'
+    tocList.style.display='none'
+    tocContainer.style.width='8rem'
+  }else{
+    myDiv.textContent ='<'
+    tocList.style.display='block'
+    tocContainer.style.width='13rem'
+  }
+    
+}
+
+
+myDiv.addEventListener('click', handleClickBtn);// 绑定点击事件
+
+
+      (function() {
+      const Patternstr = "\/\\\\\d{4}\/\\\\\d{2}\/\\\\\d{2}\/\.*"; //本身是字符串插入，所以对符号要转义
+      //"^\//*"->"/"
+      //"\/.*"->".*"
+      //JS引擎中"\"转义
+      //正则表达式引擎也是"\"转义
+      const dataPattern = new RegExp(Patternstr);
+      const path = window.location.pathname;
+      console.log(dataPattern.toString(),path,dataPattern.test(path));//控制台在渲染时省略了反斜杠的可视表示。
+      if (!dataPattern.test(path)) {
+        let toc = document.getElementById('fixed-toc-container');
+        if (toc) toc.style.display = 'none';
+        return;
+      }
+        var content = document.querySelector('article');
+        //var tocList = document.getElementById('fixed-toc-list');
+        if (!content || !tocList) {
+          document.getElementById('fixed-toc-container').style.display = 'none';
+          return;
+        }
+        var headings = content.querySelectorAll('h1, h2, h3, h4');
+        if (headings.length === 0) {
+          document.getElementById('fixed-toc-container').style.display = 'none';
+          return;
+        }
+        headings.forEach(function(heading, i) {
+          if (!heading.id) {
+            heading.id = 'heading-' + i;
+          }
+        });
+        headings.forEach(function(heading) {
+          var level = parseInt(heading.tagName.substring(1));
+          var li = document.createElement('li');
+          li.style.marginLeft = (level - 1) * 15 + 'px';
+          var a = document.createElement('a');
+          a.href = '#' + heading.id;
+          a.textContent = heading.textContent;
+          a.style.color = '#555';
+          a.style.textDecoration = 'none';
+          a.onmouseover = function() { a.style.textDecoration = 'underline'; };
+          a.onmouseout = function() { a.style.textDecoration = 'none'; };
+          li.appendChild(a);
+          tocList.appendChild(li);
+        });
+      })();
+    </script>
+  `;
+
+  // 把目录div插入到</body>标签前面
+  html = html.replace(/<\/body>/, tocDiv + '</body>');
+
+  return html;
+});
+
+hexo.extend.injector.register('body_end', () => {//生成静态页面时
+  return `
+    <script>
+      (function() {
+        function moveElementIfSmallScreen() {
+          const toc = document.getElementById('fixed-toc-container');
+          const article = document.querySelector("article");
+          const toggleBtn = document.getElementById('toggle_btn');
+          if (!toc || !article) return;
+          if (window.innerWidth < 1024) {
+            console.log('small screen!!')
+            if (article.firstElementChild !== toc) {
+              article.insertBefore(toc, article.firstChild);//移动节点，而非复制
+            }
+            toggleBtn.style.display='none';
+            // 替换样式：取消 fixed，设置适合正文的样式
+            toc.style.position = 'relative';
+            toc.style.top = '';
+            toc.style.left = '';
+            toc.style.width = '100%';
+            toc.style.maxHeight = 'none';
+            toc.style.overflowY = 'visible';
+            toc.style.overflowX = 'visible';
+            toc.style.padding = '1em';
+            toc.style.borderLeft = 'none';
+            toc.style.borderBottom = '1px solid #ddd';
+            toc.style.background = '#f9f9f9';
+            toc.style.opacity = '1';
+            toc.style.zIndex = '';
+            toc.style.boxShadow = 'none';
+            toc.style.margin = '1rem';
+            toc.style.paddingTop= '2rem';
+
+          }
+        }
+        window.addEventListener("DOMContentLoaded", moveElementIfSmallScreen);
+        window.addEventListener("resize", moveElementIfSmallScreen);
+      })();
+    </script>
+  `;
+}, 'default');

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "hexo-auto-toc",
+  "version": "1.0.0",
+  "description": "A hexo plugin automatically generate a fixed table of contents that is fixed to the side of the article page.",
+  "keywords": [
+    "toc",
+    "md",
+    "hexo",
+    "Blog",
+    "contents",
+    "article"
+  ],
+  "homepage": "https://github.com/70v-Yoyo/hexo-auto-toc#readme",
+  "bugs": {
+    "url": "https://github.com/70v-Yoyo/hexo-auto-toc/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/70v-Yoyo/hexo-auto-toc.git"
+  },
+  "license": "MIT",
+  "author": "wyyyoyo",
+  "type": "commonjs",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}