教程 - 写作

元信息
图片
图标
容器

元信息

build/node/resolvePage.ts 和 src/composables/frontmatter.ts
处理页面元信息

export interface PageFrontmatter {
  /**
   * 必须：用于页面标题
   */
  title: string
  /**
   * 可选：用于页面描述
   * `desc` 是 `description` 别名
   */
  description?: string
  desc?: string
  /**
   * 可选：用于社交页面头图
   */
  headerImage?: string
}
export interface PageFrontmatter {
  /**
   * 必须：用于页面标题
   */
  title: string
  /**
   * 可选：用于页面描述
   * `desc` 是 `description` 别名
   */
  description?: string
  desc?: string
  /**
   * 可选：用于社交页面头图
   */
  headerImage?: string
}

图片

自定义插件扩展 /build/markdown/image.ts

使用:
![image-alt](image-src) <-- <size="..."> <class="..."> <!> <desc="..."> -->
描述: 懒属性. 自定义图片容器大小. 自定义图片容器 class[配合unocss]. 禁止缩放. 底部描述.


使用懒属性. 300x300 大小. 居中. 描述: "Campground by [@Finca Los Vientos](https://reurl.cc/28aQr4) • Aug 2021"
![Image Example](/image/vitesse.webp) <!-- <size="300x300"> <class="m-auto"> <desc="Campground by [@Finca Los Vientos](https://reurl.cc/28aQr4) • Aug 2021"> -->

使用懒属性. 400x400 大小. 禁止缩放
![Image Example](/image/vitesse.webp) <!-- <size="400"> <!> -->

使用懒属性
![Image Example](/image/vitesse.webp) <!-- -->

使用懒属性. 300x300 大小. 居中. 描述: "Campground by [@Finca Los Vientos](https://reurl.cc/28aQr4) • Aug 2021"
![Image Example](/image/vitesse.webp) <!-- <size="300x300"> <class="m-auto"> <desc="Campground by [@Finca Los Vientos](https://reurl.cc/28aQr4) • Aug 2021"> -->

使用懒属性. 400x400 大小. 禁止缩放
![Image Example](/image/vitesse.webp) <!-- <size="400"> <!> -->

使用懒属性
![Image Example](/image/vitesse.webp) <!-- -->

Image Example — Campground by @Finca Los Vientos • Aug 2021

图标

https://icones.netlify.app/

搜索你喜欢的图标
复制名字
并添加 i- 前缀到 class

html

<i class="i-carbon:campsite"/> <i class="i-carbon:idea" />
<i class="i-carbon:campsite"/> <i class="i-carbon:idea" />

容器

默认标题

::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details
This is a details block.
:::
::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details
This is a details block.
:::

INFO

This is an info box.

TIP

This is a tip.

WARNING

This is a warning.

DANGER

This is a dangerous warning.

Details

This is a details block.

自定义标题

::: tip <i class="i-uil:lightbulb-alt" /> 提示: 自定义标题
This is an info message and custom title.
:::
::: tip <i class="i-uil:lightbulb-alt" /> 提示: 自定义标题
This is an info message and custom title.
:::

提示: 自定义标题

This is an info message and custom title.

流程列表

::::ul
:::li 2022-02-15
创建项目
:::

:::li 2022-02-28
发布第一代版本
:::
::::
::::ul
:::li 2022-02-15
创建项目
:::

:::li 2022-02-28
发布第一代版本
:::
::::

2022-02-15

创建项目

2022-02-28

发布第一代版本

::::ol
:::li First

First Step...

:::
:::li Second ...

Second Step...

:::
::::
::::ol
:::li First

First Step...

:::
:::li Second ...

Second Step...

:::
::::

First

First Step…

Second …

Second Step…

教程 - 写作

元信息 #

图片 #

图标 #

容器 #

默认标题 #

自定义标题 #

流程列表 #

元信息

图片

图标

容器

默认标题

自定义标题

流程列表