前不久我用 cmd markdown 写了篇文章《项目 TO 的自我修养》，文章的目录如下：

当我把它发布到线上后，目录却只展示出了二级标题：

这哪行！我猜这个可能就是加个配置啥的就能修复。于是马上就问 GPT-4 怎么办？

虽然不仅仅是改配置，但看起来很简单，于是我立即照做。

改完之后，打开博客，这回连目录都没有了，而且是一闪而过。接着问吧，GPT-4 也很快给出了新方案：

这回有目录了，但是还是只有 h2 层级。给的答案还是不对，我猜有可能它理解错我的意思了。于是继续追问：

这次，GPT-4 给出了一个修改配置文件的答案。这正合我意：

但是这下目录内容又只有从 h1 层级开始的了：

然后 GPT-4 又给出了一些不靠谱的答案，都不 work。例如：

尝试了下，还是不行。

一来一去我有点烦了。我尝试把配置文件里的 ordered 这一项改成了 true。竟然就看到了希望：

虽然文字都有了，但是样式太难看了：

按照这个来修改 CSS 代码，果然奏效：

.post-toc-content ol {
  padding-left: 20px;
}

根据我有限的前端知识，我认为接下来只需要用 CSS 进行样式美化。

纯改 CSS 就方便了，我把目录页面的 CSS 一股脑丢给 GPT-4，让它来修改：

GPT-4 给了一份修改后的 CSS 代码：

可惜我改完后不生效。继续问它：

我照做了之后还是不行。

接着我做出了关键的一步操作。我右键看了下页面的源代码，并把目录部分的源码挑出来：

GPT-4 果然没有让人失望，它马上发现了问题所在，并给出了新的 CSS 代码：

改完之后，又有问题了。只展示 h1 层级标题了：

GPT-4 马上又给了解决方案：

试了果真有效：

问它原因它也能回答：

之后，就是让 GPT-4 不断尝试修改 CSS 代码，来美化目录页面样式：

我要求给我换个配色：

效果不错：

到这里，目录页面的改造基本完成了。之后就是不断让 GPT-4 美化页面效果。它确实没有让我失望。

最终的效果：

不得不说，最后目录页的呈现效果还是不错的，毕竟我对前端了解甚少。在 GPT-4 之前，我经常会避免自己去修改页面，实在是要改的话，也只能是 google 搜出多篇文章，对着抄代码，还不一定能成功。而拥有 GPT-4 这样趁手的武器，可以让你能做成很多以前不敢想的事情。

在整个过程中，提供的信息越多、越准确，得到的答案也越好。例如在我给出源代码后，GPT-4 马上就看出了问题所在，并给出了正确的答案。

参考资料

1. 我和 GPT-4 的对话记录： https://sharegpt.com/c/OeJvZWu，https://sharegpt.com/c/4gEyavw