airene / vitepress-blog-pure

a vitepress theme for blog, demo ↓
https://ti.bi
MIT License
183 stars 26 forks source link

Use Image in Description #7

Closed richardzone closed 2 years ago

richardzone commented 2 years ago

Is there a way to use image in description to display in index.md? For example:

---
date: 2022-08-10
title: My Awesome Post
description: Awesome Photo here: ![Photo](/public/images/Awesome_photo.png)
---

# {{ $frontmatter.title }}

TODO

Hopefully this can be supported when Vitepress turns 1.0.

airene commented 2 years ago

I think this feature has no relation about vitepress, maybe about grap-matter lib, anyway you can get it by these step. change list

  1. replace the file .vitepress/theme/components/Page.vue
  2. write description like this : description: <img src="/test.jpg" width="100%" /> <br> It's a test

ps:

  1. I did't know if you know html, if you don't, I,ll take a detail desc.
  2. image file path is in the public folder. There is a favicon.ico in it.
  3. <br> It's a test is just for after the image maybe some summary in there

    I'm sorry for my poor English. 😂

richardzone commented 2 years ago

Your English is perfectly fine - thank you for helping out!