{"id":4960,"date":"2024-10-24T13:46:52","date_gmt":"2024-10-24T13:46:52","guid":{"rendered":"https:\/\/howtogeek.blog\/zh\/?p=4960"},"modified":"2024-10-24T13:46:52","modified_gmt":"2024-10-24T13:46:52","slug":"adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/zh\/adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide\/","title":{"rendered":"\u70ba Ghost \u4e3b\u984c\u65b0\u589e\u76ee\u9304 (TOC)\uff1a\u9010\u6b65\u6307\u5357"},"content":{"rendered":"<p>\u5728 Ghost \u90e8\u843d\u683c\u4e2d\u52a0\u5165\u76ee\u9304 (TOC) \u53ef\u4fc3\u9032\u8f03\u9577\u6587\u7ae0\u7684\u7121\u7e2b\u5c0e\u822a\uff0c\u5f9e\u800c\u986f\u8457\u6539\u5584\u8b80\u8005\u7684\u9ad4\u9a57\u3002\u672c\u6559\u5b78\u5c07\u5f15\u5c0e\u60a8\u5b8c\u6210\u4f7f\u7528 TOCBOT \u5c07\u76ee\u9304\u65b0\u589e\u81f3\u4efb\u4f55 Ghost \u4e3b\u984c\u7684\u904e\u7a0b\uff0cTOCBOT \u662f\u4e00\u500b JavaScript \u63d2\u4ef6\uff0c\u53ef\u6839\u64da\u8cbc\u6587\u4e2d\u7684\u6a19\u984c\u81ea\u52d5\u7522\u751f\u76ee\u9304\u3002<\/p>\n<h2 id=\"setting-up-tocbot-in-ghost\">\u5728 Ghost \u4e2d\u6574\u5408 TOCBOT<\/h2>\n<p>TOCBOT \u53ef\u6839\u64da\u60a8\u7684\u8cbc\u6587\u6a19\u984c\u6709\u6548\u5730\u5efa\u7acb\u76ee\u9304\u3002\u8acb\u4f9d\u7167\u4ee5\u4e0b\u7c21\u55ae\u6b65\u9a5f\u9032\u884c\u5b89\u88dd\uff1a<\/p>\n<ul>\n<li>\u767b\u5165\u60a8\u7684 Ghost \u7ba1\u7406\u5100\u8868\u677f\u4e26\u524d\u5f80<code>Settings &gt; Code injection<\/code>\u3002<\/li>\n<li>\u5728\u8a72<code>Site Header<\/code>\u5340\u57df\u4e2d\uff0c\u63d2\u5165\u6240\u9700\u7684 TOCBOT \u8173\u672c\u548c\u6a23\u5f0f\u8868\uff1a<\/li>\n<\/ul>\n<p> <code> <code>&lt;script type=\"text\/javascript\"src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/tocbot\/4.21.0\/tocbot.min.js\"&gt;&lt;\/script&gt;<br \/>\n&lt;link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/tocbot\/4.21.0\/tocbot.css\"rel=\"stylesheet\"&gt;<\/code><\/code><\/p>\n<ul>\n<li>\u63a5\u4e0b\u4f86\uff0c\u5728\u672c<code>Site Footer<\/code>\u7bc0\u4e2d\uff0c\u4f7f\u7528\u4ee5\u4e0b\u8173\u672c\u521d\u59cb\u5316 TOCBOT\uff1a<\/li>\n<\/ul>\n<p> <code> <code>&lt;script&gt;<br \/>\n  document.addEventListener('DOMContentLoaded', function() {<br \/>\n    tocbot.init({<br \/>\n      tocSelector: '.toc',<br \/>\n      contentSelector: '.post-content',<br \/>\n      headingSelector: 'h1, h2, h3, h4',<br \/>\n      scrollSmooth: true<br \/>\n    });<br \/>\n  });<br \/>\n&lt;\/script&gt;<\/code><\/code><\/p>\n<p>\u78ba\u4fdd<code>contentSelector<\/code>\u8207\u4e3b\u984c\u4e2d\u6307\u5b9a\u7684\u8cbc\u6587\u5167\u5bb9\u985e\u5225\u4e00\u81f4\u3002\u5e38\u7528\u7684\u985e\u5225\u5305\u62ec<code>.post-content<\/code>\u3001<code>.gh-content<\/code>\u3001 \u6216<code>.c-content<\/code>\u3002<\/p>\n<ul>\n<li>\u6700\u5f8c\uff0c\u5132\u5b58\u8a2d\u5b9a\u4e2d\u7684\u8b8a\u66f4<code>Code injection<\/code>\u3002<\/li>\n<\/ul>\n<h2 id=\"adding-the-toc-placeholder-to-posts\">\u5c07\u76ee\u9304\u4f54\u4f4d\u7b26\u63d2\u5165\u8cbc\u6587\u4e2d<\/h2>\n<p>\u8981\u5728\u6587\u7ae0\u4e2d\u5c55\u793a\u76ee\u9304\uff0c\u60a8\u9700\u8981\u5728\u6240\u9700\u4f4d\u7f6e\u653e\u7f6e\u4e00\u500b\u4f54\u4f4d\u7b26\uff1a<\/p>\n<ul>\n<li>\u7de8\u8f2f\u60a8\u5e0c\u671b\u5305\u542b\u76ee\u9304\u7684\u5e16\u5b50\u3002<\/li>\n<li><code>\/html<\/code>\u900f\u904e\u5728\u7de8\u8f2f\u5668\u4e2d\u9375\u5165\u5167\u5bb9\uff0c\u5728\u60a8\u559c\u6b61\u7684\u4f4d\u7f6e\u65b0\u589e HTML \u5361\u3002<\/li>\n<li>\u5c07\u4ee5\u4e0b\u7a0b\u5f0f\u78bc\u5305\u542b\u5230 HTML \u5361\u4e2d\uff1a<\/li>\n<\/ul>\n<p> <code> <code>&lt;div class=\"toc\"&gt;&lt;\/div&gt;<\/code><\/code><\/p>\n<figure class=\"wp-block-image\"><img alt=\"\" class=\"wp-image\" decoding=\"async\" height=\"479\" loading=\"lazy\" src=\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2024\/10\/image-507.webp\" title=\"\" width=\"1135\"\/><\/figure>\n<p>\u9019\u6bb5\u7a0b\u5f0f\u78bc\u70ba\u76ee\u9304\u5efa\u7acb\u4e86\u4e00\u500b\u7a7a\u9593\u3002\u8a2a\u554f\u5e16\u5b50\u5f8c\uff0cTOCBOT \u5c07\u4f7f\u7528\u5f9e\u5167\u5bb9\u6a19\u984c\u6d3e\u751f\u7684\u52d5\u614b\u751f\u6210\u7684\u76ee\u9304\u4f86\u586b\u5145\u6b64\u7a7a\u9593\u3002<\/p>\n<h2 id=\"styling-the-toc\">\u81ea\u8a02\u76ee\u9304\u5916\u89c0<\/h2>\n<p>\u60a8\u53ef\u4ee5\u500b\u6027\u5316\u76ee\u9304\u7684\u5916\u89c0\uff0c\u4ee5\u66f4\u597d\u5730\u7b26\u5408\u60a8\u7684\u4e3b\u984c\u8a2d\u8a08\uff1a<\/p>\n<ul>\n<li>\u5728<code>Site Header<\/code>\u4e0b\u9762<code>Settings &gt; Code injection<\/code>\uff0c\u65b0\u589e\u5305\u542b\u5728\u6a19\u7c64\u5167\u7684\u81ea\u8a02 CSS \u6a23\u5f0f<code>&lt;style&gt;<\/code>\uff1a<\/li>\n<\/ul>\n<p> <code> <code>&lt;style&gt;<br \/>\n . toc {<br \/>\n    padding: 20px;<br \/>\n    border: 1px solid #e0e0e0;<br \/>\n    background-color: #f9f9f9;<br \/>\n    border-radius: 5px;<br \/>\n  }<br \/>\n . toc a {<br \/>\n    text-decoration: none;<br \/>\n    color: #333;<br \/>\n  }<br \/>\n . toc a:hover {<br \/>\n    text-decoration: underline;<br \/>\n  }<br \/>\n&lt;\/style&gt;<\/code><\/code><\/p>\n<p>\u60a8\u53ef\u4ee5\u96a8\u610f\u8abf\u6574\u9019\u4e9b\u6a23\u5f0f\u4ee5\u6eff\u8db3\u60a8\u7684\u559c\u597d\u3002<\/p>\n<h2 id=\"adjusting-for-different-themes\">\u4fee\u6539\u5404\u7a2e\u4e3b\u984c<\/h2>\n<p>\u7531\u65bc\u4e3b\u984c\u53ef\u80fd\u5c0d\u5167\u5bb9\u90e8\u5206\u4f7f\u7528\u4e0d\u540c\u7684\u985e\u5225\u540d\u7a31\uff0c\u56e0\u6b64\u8acb\u78ba\u4fdd<code>contentSelector<\/code>TOCBOT \u8a2d\u5b9a\u4e2d\u7684 \u8207\u60a8\u4e3b\u984c\u7684\u5167\u5bb9\u985e\u5225\u76f8\u7b26\uff1a<\/p>\n<ul>\n<li>\u5f9e\u4efb\u4f55\u958b\u653e\u7684\u5e16\u5b50\u958b\u59cb\u6aa2\u67e5\u60a8\u7684\u4e3b\u984c\u3002<\/li>\n<li>\u53f3\u9375\u55ae\u64ca\u8cbc\u6587\u5167\u5bb9\u4e26\u9078\u64c7<code>Inspect<\/code>\u5b58\u53d6\u700f\u89bd\u5668\u7684\u958b\u767c\u4eba\u54e1\u5de5\u5177\u3002<\/li>\n<li>\u5c0b\u627e\u8207\u5305\u542b\u60a8\u7684\u8cbc\u6587\u5167\u5bb9\u7684\u5143\u7d20\u95dc\u806f\u7684\u985e\u5225\u540d\u7a31\uff0c\u4f8b\u5982<code>.post-content<\/code>\u3002<\/li>\n<\/ul>\n<figure class=\"wp-block-image\"><img alt=\"\" class=\"wp-image\" decoding=\"async\" height=\"420\" loading=\"lazy\" src=\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2024\/10\/image-506.webp\" title=\"\" width=\"942\"\/><\/figure>\n<ul>\n<li>\u8acb\u78ba\u4fdd<code>contentSelector<\/code>\u6839\u64da\u60a8\u767c\u73fe\u7684\u5167\u5bb9\u66f4\u65b0 TOCBOT \u8173\u672c\u4e2d\u7684 \u3002<\/li>\n<\/ul>\n<h2 id=\"making-the-toc-sticky\">\u5efa\u7acb\u9ecf\u6027\u76ee\u9304<\/h2>\n<p>\u8981\u5728\u8b80\u8005\u6efe\u52d5\u6642\u4fdd\u6301\u76ee\u9304\u53ef\u898b\uff0c\u60a8\u53ef\u4ee5\u5c07\u5176\u8a2d\u5b9a\u70ba\u9ecf\u6027\uff1a<\/p>\n<ul>\n<li>\u5728 \u4e2d<code>Site Header<\/code>\uff0c\u5728\u6a19\u8a18\u5167\u52a0\u5165\u6b64 CSS <code>&lt;style&gt;<\/code>\uff1a<\/li>\n<\/ul>\n<p> <code> <code>&lt;style&gt;<br \/>\n . toc {<br \/>\n    position: sticky; top: 20px;<br \/>\n  }<br \/>\n&lt;\/style&gt;<\/code><\/code><\/p>\n<p>\u9019\u5c07\u5b9a\u4f4d\u76ee\u9304\u76f8\u5c0d\u65bc\u8996\u53e3\u7684\u4f4d\u7f6e\uff0c\u78ba\u4fdd\u7576\u7528\u6236\u6efe\u52d5\u700f\u89bd\u8cbc\u6587\u6642\u5b83\u4ecd\u7136\u5728\u8996\u91ce\u4e2d\u3002<\/p>\n<p>\u900f\u904e\u5be6\u4f5c\u9019\u4e9b\u8aaa\u660e\uff0c\u60a8\u53ef\u4ee5\u900f\u904e\u529f\u80fd\u6027\u76ee\u9304\u8c50\u5bcc\u60a8\u7684 Ghost \u535a\u5ba2\uff0c\u5f9e\u800c\u589e\u5f37\u6574\u500b\u8cbc\u6587\u7684\u5c0e\u822a\u548c\u8b80\u8005\u4e92\u52d5\u3002<\/p>\n<p><a class=\"xiaomi\" href=\"https:\/\/allthings.how\/how-to-add-table-of-contents-toc-to-any-ghost-theme\/\" rel=\"noopener noreferrer nofollow\" target=\"_blank\">\u4f86\u6e90<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5728 Ghost \u90e8\u843d\u683c\u4e2d\u52a0\u5165\u76ee\u9304 (TOC) \u53ef\u4fc3\u9032\u8f03\u9577\u6587\u7ae0\u7684\u7121\u7e2b\u5c0e\u822a\uff0c\u5f9e\u800c\u986f\u8457\u6539\u5584\u8b80\u8005\u7684\u9ad4\u9a57\u3002\u672c\u6559\u5b78\u5c07\u5f15\u5c0e\u60a8\u5b8c\u6210\u4f7f\u7528 TOCBOT \u5c07\u76ee\u9304\u65b0\u589e\u81f3\u4efb\u4f55 Ghost \u4e3b\u984c\u7684\u904e\u7a0b\uff0cTOCBOT \u662f\u4e00\u500b JavaScript \u63d2\u4ef6\uff0c\u53ef\u6839\u64da\u8cbc\u6587\u4e2d\u7684\u6a19\u984c\u81ea\u52d5\u7522\u751f\u76ee\u9304\u3002 \u5728 Ghost \u4e2d\u6574\u5408 TOCBOT TOCBOT \u53ef\u6839\u64da\u60a8\u7684\u8cbc\u6587\u6a19\u984c\u6709\u6548\u5730\u5efa\u7acb\u76ee\u9304\u3002\u8acb\u4f9d\u7167\u4ee5\u4e0b\u7c21\u55ae\u6b65\u9a5f\u9032\u884c\u5b89\u88dd\uff1a \u767b\u5165\u60a8\u7684 Ghost \u7ba1\u7406\u5100\u8868\u677f\u4e26\u524d\u5f80Settings &gt; Code injection\u3002 \u5728\u8a72Site Header\u5340\u57df\u4e2d\uff0c\u63d2\u5165\u6240\u9700\u7684 TOCBOT \u8173\u672c\u548c\u6a23\u5f0f\u8868\uff1a &lt;script type=&#8221;text\/javascript&#8221;src=&#8221;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/tocbot\/4.21.0\/tocbot.min.js&#8221;&gt;&lt;\/script&gt; &lt;link href=&#8221;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/tocbot\/4.21.0\/tocbot.css&#8221;rel=&#8221;stylesheet&#8221;&gt; \u63a5\u4e0b\u4f86\uff0c\u5728\u672cSite Footer\u7bc0\u4e2d\uff0c\u4f7f\u7528\u4ee5\u4e0b\u8173\u672c\u521d\u59cb\u5316 TOCBOT\uff1a &lt;script&gt; document.addEventListener(&#8216;DOMContentLoaded&#8217;, function() { tocbot.init({ tocSelector: &#8216;.toc&#8217;, contentSelector: &#8216;.post-content&#8217;, headingSelector: &#8216;h1, h2, h3, h4&#8217;, scrollSmooth: true }); }); &lt;\/script&gt; \u78ba\u4fddcontentSelector\u8207\u4e3b\u984c\u4e2d\u6307\u5b9a\u7684\u8cbc\u6587\u5167\u5bb9\u985e\u5225\u4e00\u81f4\u3002\u5e38\u7528\u7684\u985e\u5225\u5305\u62ec.post-content\u3001.gh-content\u3001 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[129],"class_list":["post-4960","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-microsoft"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/zh\/wp-json\/wp\/v2\/posts\/4960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/zh\/wp-json\/wp\/v2\/comments?post=4960"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/zh\/wp-json\/wp\/v2\/posts\/4960\/revisions"}],"predecessor-version":[{"id":4961,"href":"https:\/\/howtogeek.blog\/zh\/wp-json\/wp\/v2\/posts\/4960\/revisions\/4961"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/zh\/wp-json\/wp\/v2\/media?parent=4960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/zh\/wp-json\/wp\/v2\/categories?post=4960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/zh\/wp-json\/wp\/v2\/tags?post=4960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}