valaxy/docs/pages/guide/post.md

4.7 KiB
Raw Blame History

title title_zh-CN categories end
Post 文章
guide
false

Post VS Page

FrontMatter

::: tip

更多配置项可参见:

:::

::: zh-CN 文章post)继承自页面page),因此页面中的 Front Matter 通用被文章支持。

单篇文章支持的配置项。

譬如: :::

::: en post is a descendant of page, so the front matter in pages are supported by posts.

For example: :::

---
title: Title
hide: true
---

::: zh-CN

  • title: 文章标题
  • hide: 你可以在文章头部添加 hide 属性,来临时隐藏某篇文章。(该文章仍然会被渲染)
    • true / all: 当设置为 trueall 时,该文章仍然会被渲染,你可以直接访问链接进行查看。但不会被显示在展示的文章卡片与归档中。
    • index: 设置为 index 时,将只在首页隐藏,归档中仍然展示。(譬如放一些没有必要放在首页的笔记,并在归档中方便自己查看。) :::

::: en

  • title: Title of the article.
  • hide: Adding hide in the header allows you to hide the article temporarily. (The article will still be rendered)
    • true / all: When set to true or all, the article will be rendered, and you can view it by visiting the link directly. It will not be displayed in article cards or archives.
    • index: When set to index, it will be hidden only in the front page. It will still be displayed in archives. (You can use this for some notes unnecessary for the front page, but good for the archive for reference sometimes)

:::

摘要

Excerpt

::: zh-CN 你可以通过插入 <!-- more --> 的方式生成摘要excerpt。 可通过设置 excerpt_type 设置摘要渲染类型。

  • excerpt: 自定义摘要(优先级高于 <!-- more -->
  • excerpt_type: 预览列表摘要的渲染类型(与 <!-- more --> 配合使用)
    • md: 展示原始 Markdown
    • html: 以 HTML 形式展示
    • text: 以纯文本形式展示(去除 HTML 标签)

:::

::: en You can insert <!--more--> to generate an excerpt. You can set the excerpt rendering type by setting excerpt_type.

  • excerpt: Custom excerpt (higher priority than <!-- more -->)
  • excerpt_type: The rendering type for the excerpt in the preview list (Used with <!-- more -->)
    • md: Display as original markdown
    • html: Display as HTML
    • text: Display as text (removing HTML tags)

:::

::: code-group

---
title: 'excerpt_type: text'
excerpt_type: text
---

## Header

![yun-bg](https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg)

<!-- more -->

Main Content
---
title: 'excerpt_type: md'
excerpt_type: md
---

## Header

![yun-bg](https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg)

<!-- more -->

Main Content
---
title: 'excerpt_type: html'
excerpt_type: html
---

## Header

![yun-bg](https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg)

<!-- more -->

Main Content
---
title: 'custom excerpt'
excerpt: This is a custom excerpt.
---

## Header

![yun-bg](https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg)

Main Content

:::

You will get excerpt:

::: code-group

HEADER yun-bg
## Header ![yun-bg](https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg)
<!-- Rendered HTML -->
This is a custom excerpt.

:::

插入

组件

  • 如想在文章中插入现有公共组件,请参照 组件
  • 如想在文章中插入自定义组件,请参照 自定义组件

脚本

可直接通过 useScriptTag 使用,封装为组件或直接添加在文章中。

<script lang="ts" setup>
useScriptTag('https://static.codepen.io/assets/embed/ei.js')
</script>

强制规范

由于 Valaxy 支持解析 Vue 组件渲染,因此当您输入 <CustomComponent></CustomComponent> 时,它会解析 components 目录下的 CustomComponent.vue 组件并渲染。

当您不需要其被渲染时,请务必使用反引号包裹,如:

`<CustomComponent></CustomComponent>`