{"id":9852,"date":"2024-04-01T12:17:26","date_gmt":"2024-04-01T10:17:26","guid":{"rendered":"https:\/\/via-internet.de\/blog\/?p=9852"},"modified":"2024-04-01T20:01:46","modified_gmt":"2024-04-01T18:01:46","slug":"astro-tutorial-add-table-of-content-to-the-post-layout","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2024\/04\/01\/astro-tutorial-add-table-of-content-to-the-post-layout\/","title":{"rendered":"Astro Tutorial – Add Table of Content (TOC) to the Post Layout"},"content":{"rendered":"\n

TL;DR<\/h2>\n\n\n\n

Code for this tutorial is on Github<\/a><\/p>\n\n\n\n

Starter Project<\/h2>\n\n\n\n

Create Starter<\/h3>\n\n\n\n
\u276f npm create astro@latest\n...\/21.6.2\/pnpm\/store\/v3\/tmp\/dlx-5990    |  +39 ++++\n...\/21.6.2\/pnpm\/store\/v3\/tmp\/dlx-5990    | Progress: resolved 39, reused 39, downloaded 0, added 39, done\n\n astro   Launch sequence initiated.\n\n   dir   Where should we create your new project?\n         .\/Tutorial - Add TOC to PostLayout\n\n  tmpl   How would you like to start your new project?\n         Use blog template\n\n    ts   Do you plan to write TypeScript?\n         Yes\n\n   use   How strict should TypeScript be?\n         Strict\n\n  deps   Install dependencies?\n         Yes\n\n   git   Initialize a new git repository?\n         Yes\n\n      \u2714  Project initialized!\n         \u25a0 Template copied\n         \u25a0 TypeScript customized\n         \u25a0 Dependencies installed\n         \u25a0 Git initialized\n\n  next   Liftoff confirmed. Explore your project!\n\n         Enter your project directory using cd \".\/Tutorial - Add TOC to PostLayout\"\n         Run pnpm dev to start the dev server. CTRL+C to stop.\n         Add frameworks like react or tailwind using astro add.\n\n         Stuck? Join us at https:\/\/astro.build\/chat\n\n\u256d\u2500\u2500\u2500\u2500\u2500\u256e  Houston:\n\u2502 \u25e0 \u25e1 \u25e0  Good luck out there, astronaut! \ud83d\ude80\n\u2570\u2500\u2500\u2500\u2500\u2500\u256f<\/pre>\n\n\n\n
Run Starter<\/h3>\n\n\n\n
\u276f cd Tutorial\\ -\\ Add\\ TOC\\ to\\ PostLayout\/\n\nTutorial - Add TOC to PostLayout on \ue0a0 master [+] is \ud83d\udce6 v0.0.1 via \ue718 v21.6.2 via \ud83d\udc0d v3.12.2 (3.12)\n\u276f npm run dev\n\n> tutorial---add-toc-to-postlayout@0.0.1 dev \/Users\/Shared\/CLOUD\/Programmier-Workshops\/Kurse\/Astro\/Einsteiger\/Tutorial - Add TOC to PostLayout\n> astro dev\n\n\n astro  v4.5.12 ready in 300 ms\n\n\u2503 Local    http:\/\/localhost:4321\/\n\u2503 Network  use --host to expose\n\n12:18:45 watching for file changes...\n<\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Modify Project Structur and add helper code<\/h2>\n\n\n\n
tsconfig.json<\/h4>\n\n\n\n
{\n  \"extends\": \"astro\/tsconfigs\/strict\",\n  \"compilerOptions\": {\n    \"allowJs\": true,\n    \"strictNullChecks\": true,\n    \"baseUrl\": \".\",\n    \"lib\": [\"es2022\", \"dom\", \"dom.iterable\"],\n    \"paths\": {\n      \"@\/*\": [\"src\/*\"]\n    }\n  },\n  \"exclude\": [\"node_modules\", \"**\/node_modules\/*\", \".vscode\", \"dist\"]\n}\n<\/pre>\n\n\n\n
Replace relative path with reference to path alias in every page<\/h4>\n\n\n\n
import Layout from '..\/..\/layouts\/BlogPost.astro';<\/pre>\n\n\n\n
becomes to <\/p>\n\n\n\n
import Layout from '@\/layouts\/BlogPost.astro';<\/pre>\n\n\n\n
import Layout from '..\/styles\/global.css';<\/pre>\n\n\n\n
becomes to <\/p>\n\n\n\n
import Layout from '@\/styles\/global.css';<\/pre>\n\n\n\n
Create separate Layouts for Project and Posts<\/h2>\n\n\n\n
Rename src\/layouts\/BlogPost.astro<\/code> to src\/layouts\/BaseLayout.astro<\/code><\/p>\n\n\n\n
Change every import of BlogPost to <\/p>\n\n\n\n
import Layout from '@\/layouts\/BaseLayout.astro';<\/pre>\n","protected":false},"excerpt":{"rendered":"
TL;DR Code for this tutorial is on Github Starter Project Create Starter Run Starter Modify Project Structur and add helper code tsconfig.json Replace relative path with reference to path alias in every page becomes to becomes to Create separate Layouts for Project and Posts Rename src\/layouts\/BlogPost.astro to src\/layouts\/BaseLayout.astro Change every import of BlogPost to<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-9852","post","type-post","status-publish","format-standard","hentry","category-allgemein"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=9852"}],"version-history":[{"count":9,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9852\/revisions"}],"predecessor-version":[{"id":9865,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9852\/revisions\/9865"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=9852"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=9852"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=9852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}