展示卡片 (dcard)

2026-06-19

Markdown 支持格式有限。dCard 在正文中声明卡片名与参数,由 everkm-publish 结合主题模板渲染为 HTML。站点级卡片放在 __everkm/extend/dcard/

内联写法(推荐)

当卡片无需额外参数时,可在正文中单独占一行写内联代码即可:

`dcard/download`

渲染时等价于插入 download 卡片,无需 YAML/JSON 代码块。卡片名仅允许字母、数字、下划线与连字符(a-zA-Z0-9_-)。

内联写法要求该行仅包含 `dcard/卡片名`,前后不能有其他文字。

代码块写法

Markdown 文件中输入如下:

```yaml dcard/bilibili
vid: video_id
```

上述内容片段声明使用 bilibili 的 dcard, 格式同代码块,但上下文参数格式仅支持 json, yaml, 其内容在渲染dcard模板时,作为模板参数传递。

dcard 模板文件名为 <dcard_name>.dcard.html,manifest 文件名为 <dcard_name>.dcard.yaml。 同一 dcard 资源需要放在同一目录下。 主题自有的 dcard 保存在模板目录下的任意子目录中;站点级 dcard 保存在 __everkm/extend/dcard/ 目录中(v0.17.2 起;旧路径 __dcard 已废弃)。

引用资源文件

通常情况下,dcard 上下文静态内容就可以满足,但在一些特殊场景下,例如,引用当前目录的音频文件时,需要特殊处理。否则被引用的资源不会在发布时打包,因此 everkm-publish 支持在 dcard 上下文中使用常规的模板标记,这样以上下文件就更强大了。

例如,我们需要渲染出一段音频播放。假如模板中已经提供了 audio dcard, 使用时需要通过 media 参数指定音频文件地址。 我们还期望,引用的音频文件在导出发布时一起自动导出,并且转换好发布后的 URL。 这里我们可以使用 media 函数完成, 代码如下,注意引号的使用:

```yaml dcard/audio
media: "{{media(text='002 Home.mp3')}}"
```

因为在 dcard 中引用资源文件属于高频操作,所以 everkm-publish 提供了语法糖,如上面的代码等同于下面代码块:

```yaml dcard/audio
media: "$media:002 Home.mp3"
```

在文件路径前使用 $media: 前缀,处理时会自动解析为对应模板。

文件路径可以使用绝对路径或相对路径。

Manifest 配置

每个 dCard 卡片需要一个 *.dcard.yaml manifest 文件,声明需要注入页面的 JS 和 CSS 资源。

# 需要注入页面的 JavaScript 文件,可选
js:
  - assets/a.js

# 需要注入页面的样式表,可选
css:
  - assets/b.css

卡片名称从 manifest 文件名自动提取,无需在文件内声明。例如 bilibili.dcard.yaml 的卡片名为 bilibili

资源路径必须使用基于 manifest 所在目录的相对路径。manifest 同目录下的 assets/ 子目录在渲染时会自动同步到 dist/assets/dcard-{卡片名}/,无需额外声明。

注入行为

  • css 中的文件 → 生成 <link rel="stylesheet"> 标签,注入 <head>
  • js 中的文件 → 生成 <script src=""> 标签,注入 </body>

示例(bilibili 卡片的完整目录结构):

extend/dcard/bilibili/
  bilibili.dcard.yaml    # manifest
  bilibili.dcard.html    # 卡片 Tera 模板
  assets/
    bilibili.js
    bilibili.css

namejscss 是当前支持的 manifest 字段。旧版的 assets.inject / assets.files 结构已不再使用。