Oh thats great! Thank you so much, now I can get into customizing even more, amazing.

from adocs.

I've found the relevant information on vitepress docs;
pasting it here incase somebody has a similar question.
https://vitepress.dev/reference/default-theme-home-page

Features section

features:

• icon: ⚡️
  title: 3D Renders
  details: Elevate your stores visuals
  link: /renders.md
  linkText: Read More

  it seems we can even add custom link description as well.

from adocs.

Hey, @erbill sure you can. Vitepress is markdown so it also supports HTML code.

In the index.md, at the bottom of the layout, you can add a simple markup like this.

<div class="read-more">
  <h1>Read More</h1>
  <p>Click the link below to read more</p>
  <button class="btn">Read More</button>
</div>

And style the read-more class from within the docs\.vitepress\theme\custom.css file

Here's a simple example I just did.

.read-more {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  margin-top: 4rem;
}

.read-more h1 {
  font-size: 2.2rem;
  font-weight: 600;
}

.read-more .btn {
  border: 1px solid var(--vp-c-brand-darker);
  color: white;
  border-radius: 10px;
  padding: 0.4rem 1.4rem;
}

And this is the output.

Of course, you have to be careful of your class names to avoid overwriting built-in classes on the vitepress theme. A good example of classes to avoid is the container.

Hope this helps. :)

from adocs.

After fiddling around I've managed to add extra sections with custom HTML as you suggested.

But I think what I'm trying to recreate can be even way easier than doing all with custom HTML, because I think Features section kind of uses some template documentation?

https://developer.stackblitz.com/

on this page, they've managed to turn feature divs into link blocks. That's actually what I'm trying to make as well.

now the features part of index.md is

Features section

features:

• icon: ⚡️
  title: 3D Renders
  details: Elevate your stores visuals

• icon: 🎉
  title: Musics to Play in your store
  details: Inspiring songs and our journey

• icon: 🔥
  title: Amazing Lifestyle photos
  details: Ready for emailings or your online store

• icon: 🎀
  title: Gift personalization ideas
  details: Great list of personalization ideas

  what kind of re formating turns this into link blocks? Is there any markdown way of doing it or shall I delete this part and try to re-make the same layout with custom HTML and CSS?

from adocs.

I've just tried adding link: /sample.md to any of the features and it turned into a link block as I wanted.

features:

• icon: ⚡️
  title: 3D Renders
  details: Elevate your stores visuals
  link: /sample.md

  Is there any documentation on where could I've found this, because I might be missing many more features. and couldn't find it on vitepress docs about template details and features.

from adocs.

Just in case you need something more dynamic, you can also use VueJS within vitepress, this is actually how Stackblitz customized their docs home page.

from adocs.