{"id":4966,"date":"2024-10-24T13:46:15","date_gmt":"2024-10-24T13:46:15","guid":{"rendered":"https:\/\/howtogeek.blog\/ko\/?p=4966"},"modified":"2024-10-24T13:46:15","modified_gmt":"2024-10-24T13:46:15","slug":"adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/ko\/adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide\/","title":{"rendered":"Ghost \ud14c\ub9c8\uc5d0 \ubaa9\ucc28(TOC) \ucd94\uac00: \ub2e8\uacc4\ubcc4 \uac00\uc774\ub4dc"},"content":{"rendered":"<p>Ghost \ube14\ub85c\uadf8\uc5d0 \ubaa9\ucc28(TOC)\ub97c \ud1b5\ud569\ud558\uba74 \uae34 \uae30\uc0ac\ub97c \uc6d0\ud65c\ud558\uac8c \ud0d0\uc0c9\ud560 \uc218 \uc788\uc5b4 \ub3c5\uc790\uc758 \uacbd\ud5d8\uc774 \ud06c\uac8c \ud5a5\uc0c1\ub429\ub2c8\ub2e4. \uc774 \ud29c\ud1a0\ub9ac\uc5bc\uc740 \uac8c\uc2dc\ubb3c\uc5d0 \uc788\ub294 \uc81c\ubaa9\uc5d0\uc11c TOC\ub97c \uc790\ub3d9\uc73c\ub85c \uc0dd\uc131\ud558\ub294 JavaScript \ud50c\ub7ec\uadf8\uc778\uc778 TOCBOT\uc744 \uc0ac\uc6a9\ud558\uc5ec \ubaa8\ub4e0 Ghost \ud14c\ub9c8\uc5d0 TOC\ub97c \ucd94\uac00\ud558\ub294 \uacfc\uc815\uc744 \uc548\ub0b4\ud569\ub2c8\ub2e4.<\/p>\n<h2 id=\"setting-up-tocbot-in-ghost\">Ghost\uc5d0 TOCBOT \ud1b5\ud569<\/h2>\n<p>TOCBOT\uc740 \uac8c\uc2dc\ubb3c \uc81c\ubaa9\uc5d0\uc11c TOC\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uad6c\uc131\ud569\ub2c8\ub2e4. \uc124\uce58\ub97c \uc704\ud574 \ub2e4\uc74c \uac04\ub2e8\ud55c \ub2e8\uacc4\ub97c \ub530\ub974\uc138\uc694.<\/p>\n<ul>\n<li>Ghost \uad00\ub9ac\uc790 \ub300\uc2dc\ubcf4\ub4dc\uc5d0 \ub85c\uadf8\uc778\ud558\uace0 \uc774\ub3d9\ud558\uc138\uc694 <code>Settings &gt; Code injection<\/code>.<\/li>\n<li>\ud574\ub2f9 \uc601\uc5ed\uc5d0 <code>Site Header<\/code>\ud544\uc694\ud55c TOCBOT \uc2a4\ud06c\ub9bd\ud2b8\uc640 \uc2a4\ud0c0\uc77c\uc2dc\ud2b8\ub97c \uc0bd\uc785\ud569\ub2c8\ub2e4.<\/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>\ub2e4\uc74c\uc73c\ub85c, \uc139\uc158\uc5d0\uc11c <code>Site Footer<\/code>\ub2e4\uc74c \uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec TOCBOT\uc744 \ucd08\uae30\ud654\ud569\ub2c8\ub2e4.<\/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><code>contentSelector<\/code>\uac8c\uc2dc\ubb3c \ucf58\ud150\uce20\uc5d0 \uc9c0\uc815\ub41c \ud074\ub798\uc2a4\uc640 \uc77c\uce58\ud558\ub294\uc9c0 \ud655\uc778\ud558\uc138\uc694 . \uc77c\ubc18\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294 \ud074\ub798\uc2a4\uc5d0\ub294 <code>.post-content<\/code>, <code>.gh-content<\/code>, \ub610\ub294 \uac00 \uc788\uc2b5\ub2c8\ub2e4 <code>.c-content<\/code>.<\/p>\n<ul>\n<li>\ub9c8\uc9c0\ub9c9\uc73c\ub85c <code>Code injection<\/code>\uc124\uc815\uc758 \ubcc0\uacbd \uc0ac\ud56d\uc744 \uc800\uc7a5\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n<h2 id=\"adding-the-toc-placeholder-to-posts\">\uac8c\uc2dc\ubb3c\uc5d0 TOC \ud50c\ub808\uc774\uc2a4\ud640\ub354 \uc0bd\uc785<\/h2>\n<p>\uae30\uc0ac \ub0b4\uc5d0\uc11c TOC\ub97c \ubcf4\uc5ec\uc8fc\ub824\uba74 \uc6d0\ud558\ub294 \uc704\uce58\uc5d0 \ud50c\ub808\uc774\uc2a4\ud640\ub354\ub97c \ub123\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<ul>\n<li>TOC\ub97c \ud3ec\ud568\ud558\ub824\ub294 \uac8c\uc2dc\ubb3c\uc744 \ud3b8\uc9d1\ud558\uc138\uc694.<\/li>\n<li><code>\/html<\/code>\ud3b8\uc9d1\uae30\uc5d0 \uc785\ub825\ud558\uc5ec \uc6d0\ud558\ub294 \uc704\uce58\uc5d0 HTML \uce74\ub4dc\ub97c \ucd94\uac00\ud558\uc138\uc694 .<\/li>\n<li>HTML \uce74\ub4dc\uc5d0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \ud3ec\ud568\ud558\uc138\uc694.<\/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>\uc774 \ucf54\ub4dc \uc870\uac01\uc740 TOC\ub97c \uc704\ud55c \uacf5\uac04\uc744 \uc124\uc815\ud569\ub2c8\ub2e4. \uac8c\uc2dc\ubb3c\uc5d0 \uc561\uc138\uc2a4\ud558\uba74 TOCBOT\uc774 \ucf58\ud150\uce20 \uc81c\ubaa9\uc5d0\uc11c \ud30c\uc0dd\ub41c \ub3d9\uc801\uc73c\ub85c \uc0dd\uc131\ub41c TOC\ub85c \uc774 \uacf5\uac04\uc744 \ucc44\uc6c1\ub2c8\ub2e4.<\/p>\n<h2 id=\"styling-the-toc\">TOC \ubaa8\uc591 \uc0ac\uc6a9\uc790 \uc9c0\uc815<\/h2>\n<p>TOC\uc758 \ubaa8\uc591\uc744 \uac1c\uc778\ud654\ud558\uc5ec \ud14c\ub9c8 \ub514\uc790\uc778\uacfc \ub354 \uc798 \uc77c\uce58\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<ul>\n<li><code>Site Header<\/code>\uc544\ub798 \uc5d0\uc11c \ud0dc\uadf8 <code>Settings &gt; Code injection<\/code>\ub85c \ubb36\uc778 \uc0ac\uc6a9\uc790 \uc815\uc758 CSS \uc2a4\ud0c0\uc77c\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4 <code>&lt;style&gt;<\/code>.<\/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>\uadc0\ud558\uc758 \uc120\ud638\ub3c4\uc5d0 \ub9de\uac8c \uc774\ub7ec\ud55c \uc2a4\ud0c0\uc77c\uc744 \uc790\uc720\ub86d\uac8c \uc870\uc815\ud558\uc138\uc694.<\/p>\n<h2 id=\"adjusting-for-different-themes\">\ub2e4\uc591\ud55c \ud14c\ub9c8\uc5d0 \ub9de\uac8c \uc218\uc815<\/h2>\n<p>\ud14c\ub9c8\uac00 \ucf58\ud150\uce20 \uc139\uc158\uc5d0 \ub300\ud574 \ub2e4\ub978 \ud074\ub798\uc2a4 \uc774\ub984\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc73c\ubbc0\ub85c <code>contentSelector<\/code>TOCBOT \uc124\uc815\uc758 \ud074\ub798\uc2a4 \uc774\ub984\uc774 \ud14c\ub9c8\uc758 \ucf58\ud150\uce20 \ud074\ub798\uc2a4\uc640 \uc77c\uce58\ud558\ub294\uc9c0 \ud655\uc778\ud558\uc138\uc694.<\/p>\n<ul>\n<li>\uc5f4\ub824 \uc788\ub294 \uac8c\uc2dc\ubb3c\uc744 \uba3c\uc800 \uc0b4\ud3b4\ubcf4\uace0 \ud14c\ub9c8\ub97c \uac80\uc0ac\ud558\uc138\uc694.<\/li>\n<li>\uac8c\uc2dc\ubb3c \ub0b4\uc6a9\uc744 \ub9c8\uc6b0\uc2a4 \uc624\ub978\ucabd \ubc84\ud2bc\uc73c\ub85c \ud074\ub9ad\ud558\uace0 <code>Inspect<\/code>\ube0c\ub77c\uc6b0\uc800\uc758 \uac1c\ubc1c\uc790 \ub3c4\uad6c\ub97c \uc120\ud0dd\ud558\uc138\uc694.<\/li>\n<li>\uac8c\uc2dc\ubb3c \ub0b4\uc6a9\uc774 \ud3ec\ud568\ub41c \uc694\uc18c\uc640 \uc5f0\uad00\ub41c \ud074\ub798\uc2a4 \uc774\ub984(\uc608: )\uc744 \ucc3e\uc73c\uc138\uc694 <code>.post-content<\/code>.<\/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><code>contentSelector<\/code>\ucc3e\uc740 \ub0b4\uc6a9\uc744 \ud1a0\ub300\ub85c TOCBOT \uc2a4\ud06c\ub9bd\ud2b8 \ub97c \uc5c5\ub370\uc774\ud2b8\ud558\uc138\uc694 .<\/li>\n<\/ul>\n<h2 id=\"making-the-toc-sticky\">\uc2a4\ud2f0\ud0a4 TOC \ub9cc\ub4e4\uae30<\/h2>\n<p>\ub3c5\uc790\uac00 \uc2a4\ud06c\ub864\ud558\ub294 \ub3d9\uc548 TOC\uac00 \ubcf4\uc774\ub3c4\ub85d \ud558\ub824\uba74 TOC\ub97c \uace0\uc815\uc73c\ub85c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<ul>\n<li>\uc5d0\uc11c \ud0dc\uadf8 <code>Site Header<\/code>\ub0b4\uc5d0 \uc774 CSS\ub97c \ucd94\uac00\ud558\uc138\uc694 <code>&lt;style&gt;<\/code>:<\/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>\uc774\ub807\uac8c \ud558\uba74 TOC\uac00 \ubdf0\ud3ec\ud2b8\uc640 \uad00\ub828\ud558\uc5ec \ubc30\uce58\ub418\uc5b4 \uc0ac\uc6a9\uc790\uac00 \uac8c\uc2dc\ubb3c\uc744 \uc2a4\ud06c\ub864\ud560 \ub54c\uc5d0\ub3c4 \uacc4\uc18d \ud45c\uc2dc\ub429\ub2c8\ub2e4.<\/p>\n<p>\uc774\ub7ec\ud55c \uc9c0\uce68\uc744 \uad6c\ud604\ud558\uba74 Ghost \ube14\ub85c\uadf8\uc5d0 \uae30\ub2a5\uc801\uc778 \ubaa9\ucc28\ub97c \ucd94\uac00\ud558\uc5ec \uac8c\uc2dc\ubb3c \uc804\uccb4\uc5d0\uc11c \ud0d0\uc0c9 \uae30\ub2a5\uacfc \ub3c5\uc790 \uc0c1\ud638 \uc791\uc6a9\uc744 \ud5a5\uc0c1\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/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\">\uc6d0\ucc9c<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ghost \ube14\ub85c\uadf8\uc5d0 \ubaa9\ucc28(TOC)\ub97c \ud1b5\ud569\ud558\uba74 \uae34 \uae30\uc0ac\ub97c \uc6d0\ud65c\ud558\uac8c \ud0d0\uc0c9\ud560 \uc218 \uc788\uc5b4 \ub3c5\uc790\uc758 \uacbd\ud5d8\uc774 \ud06c\uac8c \ud5a5\uc0c1\ub429\ub2c8\ub2e4. \uc774 \ud29c\ud1a0\ub9ac\uc5bc\uc740 \uac8c\uc2dc\ubb3c\uc5d0 \uc788\ub294 \uc81c\ubaa9\uc5d0\uc11c TOC\ub97c \uc790\ub3d9\uc73c\ub85c \uc0dd\uc131\ud558\ub294 JavaScript \ud50c\ub7ec\uadf8\uc778\uc778 TOCBOT\uc744 \uc0ac\uc6a9\ud558\uc5ec \ubaa8\ub4e0 Ghost \ud14c\ub9c8\uc5d0 TOC\ub97c \ucd94\uac00\ud558\ub294 \uacfc\uc815\uc744 \uc548\ub0b4\ud569\ub2c8\ub2e4. Ghost\uc5d0 TOCBOT \ud1b5\ud569 TOCBOT\uc740 \uac8c\uc2dc\ubb3c \uc81c\ubaa9\uc5d0\uc11c TOC\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uad6c\uc131\ud569\ub2c8\ub2e4. \uc124\uce58\ub97c \uc704\ud574 \ub2e4\uc74c \uac04\ub2e8\ud55c \ub2e8\uacc4\ub97c \ub530\ub974\uc138\uc694. Ghost \uad00\ub9ac\uc790 \ub300\uc2dc\ubcf4\ub4dc\uc5d0 \ub85c\uadf8\uc778\ud558\uace0 \uc774\ub3d9\ud558\uc138\uc694 Settings &gt; [&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":[130],"class_list":["post-4966","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-microsoft"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/posts\/4966","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/comments?post=4966"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/posts\/4966\/revisions"}],"predecessor-version":[{"id":4967,"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/posts\/4966\/revisions\/4967"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/media?parent=4966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/categories?post=4966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/tags?post=4966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}