Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add linefeed/linebreak in details of Home layout #1809

Closed
4 tasks done
arcqiufeng opened this issue Jan 18, 2023 · 4 comments
Closed
4 tasks done

How to add linefeed/linebreak in details of Home layout #1809

arcqiufeng opened this issue Jan 18, 2023 · 4 comments
Labels
has-workaround Has workaround, low priority theme Related to the theme

Comments

@arcqiufeng
Copy link

arcqiufeng commented Jan 18, 2023

Is your feature request related to a problem? Please describe.

---
layout: home

features:
  - icon: 🛠️
    title: Simple and minimal, always
    details: Lorem ipsum...
  - icon:
      src: /cool-feature-icon.svg
    title: Another cool feature
    details: Lorem ipsum...
  - icon:
      dark: /dark-feature-icon.svg
      light: /light-feature-icon.svg
    title: Another cool feature
    details: Lorem ipsum...
---

I want to know how to add line break in details.

What I have tried:

---
details: Lorem <br />ipsum...
---

It doesn't work.

Then try:

---
details: Lorem&#13,ipsum...
---

It doesn't work.

Then:

details: |
  Lorem
  ipsum...

It doesn't work, too.

Then I tried JSON. The document says that Json also works.

VitePress also supports JSON frontmatter syntax, starting and ending in curly braces:

{
  "details": "Lorem\nipsum..."
}

It doesn't work, too.

Describe the solution you'd like

I want to know how to achive it.

Describe alternatives you've considered

No response

Additional context

No response

Validations

@brc-dd
Copy link
Member

brc-dd commented Jan 18, 2023

That last one should work (using |), but we don't respect whitespace on .details, so just add something like this to CSS for now, it'll work:

.VPFeature .details {
  white-space: pre;
}

@brc-dd brc-dd added enhancement theme Related to the theme has-workaround Has workaround, low priority labels Jan 18, 2023
@you-hengh
Copy link
Contributor

Maybe... #1913

@arcqiufeng
Copy link
Author

Maybe... #1913

Thank you for your PR.

所以更新到最新版本后,是用加“\n"的方式吗?

@you-hengh
Copy link
Contributor

Maybe... #1913

Thank you for your PR.

所以更新到最新版本后,是用加“\n"的方式吗?

你可以这样使用:

方法一 <br/>

features:
  - icon: 🧑‍🎓
    title: 如果善于提问<br/>你会厉害很多
    details: ''
    linkText: 阅读全文
    link: /article/blog/悟道/如果善于提问,你会厉害很多

方法二 <pre>

features:
  - icon: 🧑‍🎓
    title: "<pre>如果善于提问<\n>你会厉害很多</pre>"
    details: ''
    linkText: 阅读全文
    link: /article/blog/悟道/如果善于提问,你会厉害很多

注意方法二中的 title 需要携带引号(网页中不会展示引号)

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 21, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
has-workaround Has workaround, low priority theme Related to the theme
Projects
None yet
Development

No branches or pull requests

4 participants