VuePress Tutorial 17 - IndexPost Layout

We're now ready to begin the development of the IndexPost layout component!!! 🐵

We'll be using the globally scoped $pagination variable provided by the blog plugin Client API to access the pagination data.

In this video we'll be focusing on the post title and preview pagination data. To display the data on the pagination pages we'll be updating the IndexPost layout component's template tag.

📗 VuePress: https://vuepress.vuejs.org/

🦍 IndexPost Layout Post: https://www.codemonkeys.tech/vuepress-tutorial-17/

🐒 Code Monkeys Blog Tutorials Repo: https://github.com/codemonkeysio/code-monkeys-blog-tutorials

🐵 Code Monkeys Blog Repo: https://github.com/codemonkeysio/code-monkeys-blog

-----------------------------------------------------------------------------------------

Timestamps
00:00 - Intro
00:28 - What We're Doing
02:24 - Naming the Component
03:40 - Looping Over Pagination Pages
04:09 - Using the v-for Directive
05:02 - Using the key Attribute
06:34 - Determining a Tag
07:16 - Using a Root Element
07:39 - Adding the Loop
09:36 - Entry Page HTML
11:57 - Page 2 HTML
13:22 - Post Titles
13:40 - Adding Titles to Post Files
15:17 - Adding Titles to $page Variables
16:34 - Displaying Post Titles
19:53 - Entry Page HTML
22:00 - Page 2 HTML
22:56 - Post Previews
23:34 - Adding Previews to Post Files
26:05 - Adding Previews to $page Variables
28:14 - Displaying Post Previews
30:35 - Entry Page HTML
32:52 - Page 2 HTML
33:42 IndexPost Styling
34:05 - Adding theme-default-content
35:00 - theme-default-content Styles
43:48 - IndexPost Heading
43:57 - Displaying the Heading
44:50 - Entry Page HTML
45:55 - Page 2 HTML
46:46 - Recap
49:13 - Outro

-----------------------------------------------------------------------------------------

SOCIAL MEDIA
🐒 Blog: https://www.codemonkeys.tech/
💻 GitHub: https://github.com/codemonkeysio
📨 Telegram: https://t.me/codemonkeystech
🐦 Twitter: https://twitter.com/codemonkeystech
🐸 Let's Gab: https://gab.com/codemonkeys
💡 Speak your mind on Minds: https://www.minds.com/codemonkeys/
👷‍♂️ LinkedIn: https://www.linkedin.com/in/jason-chiarulli-321358143/

-----------------------------------------------------------------------------------------

BUY US A BANANA 🍌
💵 SubscribeStar: https://www.subscribestar.com/code-monkeys
💳 Patreon: https://www.patreon.com/codemonkeys?fan_landing=true
🍌 Sponsor Code Monkeys: https://github.com/sponsors/codemonkeysio
❤️ Sponsor Jay the Code Monkey: https://github.com/sponsors/jchiarulli

🤖 Instead of using the static Bitcoin address below, improve your privacy by using a PayNym: https://paynym.is/

PayNym: https://paynym.is/+blackviolet838

Payment Code: PM8TJf7wdgnWbAdnwbgTMY8ic3UZ2LFvkSJxuFtK4JwXSKFmqys1iL964UX55fGKfqZXfTdVjK1Z3FwbgTPbmEp2ErGPVaXZds8v9YUBxgfqvoQUBF2X

₿ Bitcoin (BTC): bc1q5rsnx4d320jtuvdf0k8kkmgjzfnac95gphyznn

Monero (XMR): 89DRhZtKrfPS5yuMcFoivqBCuXs19qRnChXn5VKGeYDG457WHFcGoWbQXqW92Gah2mZFChLCkV5Cfc6zcwFwmz9zN8GRuDF

-----------------------------------------------------------------------------------------

MUSIC 🎵

Special thanks to Bizonacci II, Trigger Haven, and Chief Bizzo for the song!!! 🐵

AC/BC - You Shook Me All Night Long (PALEOROCK CLASSIC): https://www.youtube.com/watch?v=28--5aEV1Z0

#CodeMonkeys #VuePress #Software

Видео VuePress Tutorial 17 - IndexPost Layout канала Code Monkeys