add toc for posts

fwqaaq · fwqaaq · commit 28a3f2a4b112 · 2025-02-21T16:45:49.000-08:00
diff --git a/deno.jsonc b/deno.jsonc
@@ -22,7 +22,8 @@
   "imports": {
     "fs": "https://deno.land/std@0.194.0/fs/mod.ts",
     "type-mdast": "https://cdn.jsdelivr.net/npm/@types/mdast@4.0.3/index.d.ts",
-    "unified": "https://esm.sh/unified@11.0.4",
+    "unified": "https://esm.sh/unified@11.0.5",
+    "unified/index.d.ts": "https://esm.sh/unified@11.0.5/index.d.ts",
     "unist-util-visit": "https://esm.sh/unist-util-visit@5.0.0",
     "remark-parse": "https://esm.sh/remark-parse@10.0.2",
     "remark-rehype": "https://esm.sh/remark-rehype@10.1.0",
diff --git a/public/css/markdown.css b/public/css/markdown.css
@@ -153,4 +153,21 @@ p>img:only-child {
     font-weight: 800;
     font-size: 1.2rem;
   }
+}
+
+.remark-toc-details {
+  padding-block: 1rem;
+}
+
+.remark-toc-name {
+  font-weight: 800;
+  font-size: 1.2rem;
+}
+
+.remark-toc :where(ul, li) {
+  list-style: inside;
+}
+
+.remark-toc p {
+  margin-block: 0.4rem;
 }
diff --git a/src/posts/Candlestick_chart.md b/src/posts/Candlestick_chart.md
@@ -8,6 +8,8 @@ tags:
 summary: 蜡烛图中反转形态的分析
 ---
 
+[TOC]
+
 ## 为什么要写这篇文章？
 
 > 首先感谢一位炒美股的朋友 Jenny，是她带我认识了一点经济学的知识，让我对经济学有了些许兴趣。
diff --git a/src/posts/Candlestick_chart_two.md b/src/posts/Candlestick_chart_two.md
@@ -8,6 +8,8 @@ tags:
 summary: 蜡烛图中持续形态以及十字线分析
 ---
 
+[TOC]
+
 ## 持续形态
 
 绝大多数蜡烛线形态都属于趋势反转信号，但是还有一群蜡烛图构成了持续性的技术指标。所谓持续性形态，意味着形态完成后，市场仍回复先前的趋势。举例：如果在上涨行情之后出现了持续形态，那么我们预期上涨的行情仍然发挥作用。
diff --git a/src/posts/Docker.md b/src/posts/Docker.md
@@ -8,6 +8,8 @@ tags:
 summary: Docker 的简单应用
 ---
 
+[TOC]
+
 ## Docker 的基本组成
 
 1. 镜像时一种轻量级，可执行的独立软件包，用来打包软件运行环境和基于运行环境开发的软件，它包含运行某个软件所需的所有内容，包括代码，环境运行时，库，环境变量等
diff --git a/src/posts/ESLint.md b/src/posts/ESLint.md
@@ -9,6 +9,8 @@ tags:
 summary: 使用 ESlint 规范项目
 ---
 
+[TOC]
+
 > 以下以 `nuxt3` 集成 ESlint 举例
 
 - `npx nuxi init nuxt-app`：首先得初始化一个 nuxt3 的项目
diff --git a/src/posts/Functal.md b/src/posts/Functal.md
@@ -8,6 +8,8 @@ tags:
 summary: JavaScript 中的函数柯里化、偏函数以及惰性函数
 ---
 
+[TOC]
+
 ## 柯里化
 
 > [!NOTE]
diff --git a/src/posts/Git_branch.md b/src/posts/Git_branch.md
@@ -7,6 +7,8 @@ tags:
 summary: Git 分支原理
 ---
 
+[TOC]
+
 ## 分支
 
 > [!NOTE]
diff --git a/src/posts/Git_issues_collection.md b/src/posts/Git_issues_collection.md
@@ -7,6 +7,8 @@ tags:
 summary: 收集一些关于开发中遇到的 Git 问题
 ---
 
+[TOC]
+
 ## Git 问题收集
 
 > [!NOTE]
diff --git a/src/posts/Git_object.md b/src/posts/Git_object.md
@@ -7,6 +7,8 @@ tags:
 summary: Git 对象原理剖析
 ---
 
+[TOC]
+
 ## 初始化 git
 
 - git init：初始化本地 git 仓库
diff --git a/src/posts/Git_patch.md b/src/posts/Git_patch.md
@@ -7,6 +7,8 @@ tags:
 summary: 使用 Git patch 对代码进行打补丁
 ---
 
+[TOC]
+
 ## 生成补丁
 
 > 在 Git 中，补丁是一种特殊的文件，它包含了两个提交之间的差异。补丁文件可以用来在两个不同的代码库之间传递更改，或者用来在两个不同的分支之间传递更改。
diff --git a/src/posts/Git_revert.md b/src/posts/Git_revert.md
@@ -7,6 +7,8 @@ tags:
 summary: 使用 Git 进行代码的版本控制
 ---
 
+[TOC]
+
 ## 撤销
 
 1. 存在工作目录。代码并没有提交到暂存区（没有进行`git add`操作）。在工作树中修改
diff --git a/src/posts/Git_usage.md b/src/posts/Git_usage.md
@@ -7,6 +7,8 @@ tags:
 summary: 使用 Git 进行代码的版本控制
 ---
 
+[TOC]
+
 ## 初始化
 
 - `git config --global user.name "xxx"`
diff --git a/src/posts/Github_Action.md b/src/posts/Github_Action.md
@@ -8,6 +8,8 @@ tags:
 summary: Github Action 一些重要内容的查询
 ---
 
+[TOC]
+
 ## [Github Action 上下文](https://docs.github.com/zh/actions/learn-github-actions/contexts#about-contexts)
 
 * [secrets](https://docs.github.com/zh/actions/learn-github-actions/contexts#secrets-context) 上下文中的 `secrets.GITHUB_TOKEN` 用于身份验证
diff --git a/src/posts/Html5_tags.md b/src/posts/Html5_tags.md
@@ -8,6 +8,8 @@ tags:
 summary: HTML5 的规范
 ---
 
+[TOC]
+
 ## 获取标签属性
 
 - `console.dir`:打印标签的属性
diff --git a/src/posts/Iterator.md b/src/posts/Iterator.md
@@ -9,6 +9,8 @@ tags:
 summary: 迭代器、生成器以及协程之间的关系
 ---
 
+[TOC]
+
 ## JavaScript
 
 关于 JavaScript 中的[**可迭代协议**（Iterable protocol）](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol)，在 MDN 文档中是说明实现了 `[Symbol.iterator]` 的对象，其可以被 `for...of` 循环遍历。
diff --git a/src/posts/Observer.md b/src/posts/Observer.md
@@ -9,6 +9,8 @@ tags:
 summary: 浏览器的监听事件
 ---
 
+[TOC]
+
 ## Observer
 
 > [!IMPORTANT]
diff --git a/src/posts/PGP.md b/src/posts/PGP.md
@@ -7,6 +7,8 @@ tags:
 summary: PGP 来加密邮件服务
 ---
 
+[TOC]
+
 ## MAC 上配置 PGP 密钥
 
 请参考：<https://gist.github.com/Peredery/38d0538dd34381bbd9d13414269a1f27>
diff --git a/src/posts/Postgresql.md b/src/posts/Postgresql.md
@@ -8,6 +8,8 @@ tags:
 summary: Postgresql 基础知识
 ---
 
+[TOC]
+
 ## Postgres
 
 > 安装请参见：<https://gist.github.com/fwqaaq/d2a4b7c63a062cdc739c592921867625>
diff --git a/src/posts/Reflect.md b/src/posts/Reflect.md
@@ -8,6 +8,8 @@ tags:
 summary: reflect 反射
 ---
 
+[TOC]
+
 ## Reflect
 
 1. Reflect 并非一个构造函数，不能通过 new 运算符对其进行调用，或者将 Reflect 对象作为一个函数来调用 (将原本 Object 命令式改为函数行为)
diff --git a/src/posts/Remote_connect.md b/src/posts/Remote_connect.md
@@ -7,6 +7,8 @@ tags:
 summary: 远程连接
 ---
 
+[TOC]
+
 ## ssh 连接
 
 1. `windows` 客户端在应用可选项中下载 `Openssh` 的客户端 (客户端一般是自带的) 和服务端，使用 `ssh -V` 查看有没有下载成功
diff --git a/src/posts/Stream.md b/src/posts/Stream.md
@@ -12,6 +12,8 @@ tags:
 summary: 理解 I/O 流以及缓冲区
 ---
 
+[TOC]
+
 ## 为什么要写这篇文章？
 
 原因是在为 grammy 提 [PR](https://github.com/grammyjs/grammY/pull/560#discussion_r1571818711) 的时候，Deno 1.42.0 在使用 `using` 去释放文件描述符时有 bug（1.42.4 修复了）：
diff --git a/src/posts/TextWrap.md b/src/posts/TextWrap.md
@@ -7,6 +7,8 @@ tags:
 summary: 文本换行
 ---
 
+[TOC]
+
 > 今天发现 blog 的文章文字溢出，其实这种情况也不是一次两次了，所以就准备总结一下文本的换行问题。
 
 ## 文字换行
diff --git a/src/posts/TyepScript_tricky.md b/src/posts/TyepScript_tricky.md
@@ -8,6 +8,8 @@ tags:
 summary: tsconfig.json 配置技巧
 ---
 
+[TOC]
+
 ## [Project Reference](https://zhuanlan.zhihu.com/p/550953856)
 
 > 在一个项目 `src` 目录下有两个相对独立的模块，分别是 `src1` 和
diff --git a/src/posts/Vue3_component.md b/src/posts/Vue3_component.md
@@ -9,6 +9,8 @@ tags:
 summary: 关于 vue3 组件化的使用，兼容的 vue2
 ---
 
+[TOC]
+
 ## 理解插槽
 
 - 使组件具备更强的通用性，组件中的内容不再限制为固定的 div、span 等等这些元素
@@ -227,7 +229,7 @@ import("./utils/math").then(
   - `fail`:函数，指加载程序结束退出
   - `attempts`:记录尝试的次数
 
-### 异步组件与 Suspense(<span style="color:red">还在实验中，API 随时可能修改</span>)
+### 异步组件与 Suspense
 
 - `Suspense`是一个内置的全局组件，该组件有两个插槽：
   - `default`：如果 default 可以显示，那么显示 default 的内容
diff --git a/src/posts/bom.md b/src/posts/bom.md
@@ -7,6 +7,8 @@ tags:
 summary: 浏览器自带的 bom 属性
 ---
 
+[TOC]
+
 ## Viewport
 
 > [!TIP]
diff --git a/src/posts/css_animation.md b/src/posts/css_animation.md
@@ -7,6 +7,8 @@ tags:
 summary: 用于收集一些常见的 CSS 动画效果
 ---
 
+[TOC]
+
 ## height 动画效果
 
 众所周知，在之前的 CSS 中，例如 height 属性是不能直接进行动画效果的，需要使用 max-height 配合 transition 或者 animation 来实现该效果。
diff --git a/src/posts/debounce_throttle.md b/src/posts/debounce_throttle.md
@@ -7,6 +7,8 @@ tags:
 summary: 防抖和节流
 ---
 
+[TOC]
+
 ## 场景
 
 ```html
diff --git a/src/posts/gitLFS.md b/src/posts/gitLFS.md
@@ -7,6 +7,8 @@ tags:
 summary: 使用 GIT LFS 进行大文件的版本控制
 ---
 
+[TOC]
+
 ## [GIT LEF](https://git-lfs.com)
 
 > Git LFS 是对例如音频、视频、图形等大文件的一种扩展，它可以将大文件存储在 Git 仓库之外，从而加快 Git 的速度，同时也可以避免 Git 仓库过大。
diff --git a/src/posts/gitattributes.md b/src/posts/gitattributes.md
@@ -7,12 +7,13 @@ tags:
 summary: 如何编写 .gitattributes 文件
 ---
 
+[TOC]
+
 ## [.gitattributes](https://git-scm.com/docs/gitattributes)
 
 > `.gitattributes` 用于你指定 `git commit` 等时，需要执行的 git 属性
 
-- `text`: 此属性启用并控制行末规范化。当文本文件正常化时，其行尾在存储库中转换为
-LF（默认行为）。
+- `text`: 此属性启用并控制行末规范化。当文本文件正常化时，其行尾在存储库中转换为 LF（默认行为）。
 
 ### eol
 
diff --git a/src/posts/iptables.md b/src/posts/iptables.md
@@ -8,6 +8,8 @@ tags:
 summary: iptables 的简单应用
 ---
 
+[TOC]
+
 ## 表
 
 > [!NOTE]
diff --git a/src/posts/linux.md b/src/posts/linux.md
@@ -8,6 +8,8 @@ tags:
 summary: linux 的简单应用
 ---
 
+[TOC]
+
 ## linux 目录
 
 | 目录            | 解释                                                                                                         |
diff --git a/src/posts/npm_publish.md b/src/posts/npm_publish.md
@@ -8,6 +8,8 @@ tags:
 summary: 发布一个属于自己的 npm
 ---
 
+[TOC]
+
 ## 字段
 
 1. 首先需要登录自己的 npm 账号 `npm login`
diff --git a/src/posts/proxy.md b/src/posts/proxy.md
@@ -7,6 +7,8 @@ tags:
 summary: Proxy 代理
 ---
 
+[TOC]
+
 ## Proxy
 
 > - Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义 (如属性查找，赋值，枚举，函数调用等)
diff --git a/src/posts/puppeteer.md b/src/posts/puppeteer.md
@@ -8,6 +8,8 @@ tags:
 summary: 使用 puppeteer 做一个爬虫
 ---
 
+[TOC]
+
 ## 爬取页面或者接口数据
 
 > 页面得是 ssr（服务器渲染）`post`,`get` 等请求都可以
diff --git a/src/posts/vueRouter-4.md b/src/posts/vueRouter-4.md
@@ -9,6 +9,8 @@ tags:
 summary:  vueRouter 创建单页应用程序的方式
 ---
 
+[TOC]
+
 ## 动态路由
 
 - 将给定匹配模式的路由映射到同一个组件
diff --git a/src/util/remark/markdown.js b/src/util/remark/markdown.js
@@ -11,13 +11,15 @@ import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import remarkGfm from 'remark-gfm'
 import remarkGithubAlerts from './remark-github-alert.js'
 import remarkList from './remark-list.js'
+import remarkToc from './remark-toc.js'
 
 export const markdown = async (file) =>
   await unified()
     .use(remarkParse, { commonmark: true })
     .use(remarkGfm)
     .use(remarkGithubAlerts)
     .use(remarkList)
+    .use(remarkToc)
     .use(remarkRehype, { allowDangerousHtml: true })
     .use(rehypeShiki, {
       theme: 'andromeeda',
diff --git a/src/util/remark/remark-github-alert.js b/src/util/remark/remark-github-alert.js
@@ -26,11 +26,10 @@ const DEFAULT_GITHUB_ICONS = {
 /**
  * @typedef {import("type-mdast").Root} Root
  * @typedef {import("type-mdast").PhrasingContent} PhrasingContent
- * @typedef {import("unified").Plugin<[RemarkGitHubAlertsOptions], Root>} Plugin
  * @typedef {import("unified").Transformer<Root, Root>} Transformer
  */
 
-/** @type {Plugin}*/
+/** @type {import("unified/index.d.ts").Plugin<[RemarkGitHubAlertsOptions] | [], Root>}*/
 const remarkGithubAlerts = (options = {}) => {
   const {
     markers = ['TIP', 'NOTE', 'IMPORTANT', 'WARNING', 'CAUTION'],
diff --git a/src/util/remark/remark-list.js b/src/util/remark/remark-list.js
@@ -1,11 +1,8 @@
 import { visit } from 'unist-util-visit'
 
-/**
- *  @returns  {import("unified").Plugin<[],import("type-mdast").Root>}
- */
+/** @return {import('unified/index.d.ts').Plugin<[], import('type-mdast').Root>}*/
 const remarkList = () => {
-  /**@param  {import('type-mdast').Root}  */
-  return (tree) => {
+  return (/**@type {import('type-mdast').Root}*/tree) => {
     visit(
       tree,
       'list',
diff --git a/src/util/remark/remark-toc.js b/src/util/remark/remark-toc.js
diff --git a/src/util/utils.js b/src/util/utils.js

-Original file line number
+Diff line change
   "imports": {
     "fs": "https://deno.land/[email protected]/fs/mod.ts",
     "type-mdast": "https://cdn.jsdelivr.net/npm/@types/[email protected]/index.d.ts",
 -    "unified": "https://esm.sh/[email protected]",
 +    "unified": "https://esm.sh/[email protected]",
 +    "unified/index.d.ts": "https://esm.sh/[email protected]/index.d.ts",
     "unist-util-visit": "https://esm.sh/[email protected]",
     "remark-parse": "https://esm.sh/[email protected]",
     "remark-rehype": "https://esm.sh/[email protected]",