Skip to content

配置社交卡片

Material for MkDocs 可以自动生成漂亮的社交卡片,这些卡片在社交媒体平台上作为链接预览显示。您可以选择多种[预设计布局][默认布局]或创建自定义布局以匹配您独特的风格和品牌。


如何构建自定义社交卡片 by @james-willett – 学习如何自动为每个页面创建完全自定义的社交卡片,完美地与您的品牌匹配!

配置

内置社交插件

插件 | 实验性

内置的社交插件会为每个页面自动生成自定义预览图像。安装所有图像处理的依赖项1并将以下行添加到mkdocs.yml中:

Info

出于这个原因,Material for MkDocs 再次遵循了其使其尽可能简单和强大的核心原则,提供了一个易于使用的框架,使用 Python 图像处理库来构建自定义布局

plugins:
  - social

请注意,Insiders包含了社交插件的从头开始的重写,可以以并行方式更高效地生成图像,并允许完全自定义布局

可以使用以下配置选项:

enabled

默认值:true – 此选项指定在构建项目时是否启用插件。如果要加快本地构建速度,可以使用环境变量

``` yaml
plugins:
  - social:
      enabled: !ENV [CI, false]
```

concurrency

默认值:CPU 数量 – 插件在生成社交卡片时允许使用的 CPU 数量。使用更多的 CPU,插件可以在相同的时间内完成更多的工作,从而更快地完成生成。可以使用以下方式禁用并行处理:

``` yaml
plugins:
  - social:
      concurrency: 1
```

社交卡片

可以为卡片生成配置选项:

cards

默认值:true – 此选项指定是否生成社交卡片图像。如果要关闭插件,例如在本地构建中,可以使用环境变量

``` yaml
plugins:
  - social:
      cards: !ENV [CI, false]
```

cards_dir

默认值:assets/images/social – 此选项指定生成的社交卡片的存储位置。通常情况下,不需要更改此选项,可以使用以下方式更改:

``` yaml
plugins:
  - social:
      cards_dir: assets/images/social
```

cards_color

已弃用,使用[cards_layout_options][布局选项]

默认值:theme.palette.primary – 此选项指定生成社交卡片时的背景fill和前景text的颜色:

``` yaml
plugins:
  - social:
      cards_color:
        fill: "#0FF1CE"
        text: "#FFFFFF"
```

cards_font

已弃用,使用[cards_layout_options][布局选项]

默认值:theme.font.text – 此选项指定渲染社交卡片时要使用的字体,可以是Google Fonts上托管的任何字体:

``` yaml
plugins:
  - social:
      cards_font: Ubuntu
```

cards_layout_dir

默认值: – 此选项指定社交插件应从中解析自定义布局,优先于已包含的布局:

``` yaml
plugins:
  - social:
      cards_layout_dir: layouts
```

cards_layout

已于 2023 年 5 月 8 日添加

默认值:default – 指定社交卡片应使用的布局规范。插件包含以下布局,这些布局使用了颜色调色板字体

default

plugins:
  - social:
      cards_layout: default

此布局使用配置的主色作为背景:

default/variant

plugins:
  - social:
      cards_layout: default/variant

此布局包括[页面图标]作为水印(如果已定义):

default/accent

plugins:
  - social:
      cards_layout: default/accent

此布局使用配置的[强调色]作为背景:

default/invert

plugins:
  - social:
      cards_layout: default/invert

此布局反转背景和前景颜色:

default/only/image

plugins:
  - social:
      cards_layout: default/only/image
      cards_layout_options:
        background_image: layouts/background.png

此布局仅显示给定的背景图像并按比例缩放:

所有[default][默认布局]布局都使用以下[模板变量]:

  • config.site_name
  • page.meta.titlepage.title
  • page.meta.descriptionconfig.site_description
  • theme.logotheme.icon.logo

cards_layout_options

默认值: – 此选项允许设置布局规范提供的[参数]。对于自定义布局,可以使用此键提供特定于布局的选项,使布局完全可配置。

所有[default][默认布局]布局都公开以下参数:

background_color

设置背景颜色,可以是[CSS 颜色关键字],也可以是 3、4、6 或 8 位 HEX 颜色代码。支持透明度通道:

plugins:
  - social:
      cards_layout_options:
      background_color: "#0FF1CE"

background_image

设置背景图像。如果设置了background_color,例如[default][默认布局]布局,图像将使用颜色进行着色(覆盖)。因此,图像的背景颜色必须(部分)透明,以使图像可见:

plugins:
  - social:
      cards_layout_options:
        background_color: "#00000000"
        background_image: layouts/background.png

图像的路径必须相对于项目根目录定义。

color

设置前景颜色,可以是[CSS 颜色关键字],也可以是 3、4、6 或 8 位 HEX 颜色代码。颜色主要用于着色文本和图标:

plugins:
  - social:
      cards_layout_options:
        color: "#0FF1CE"

font_family

设置字体系列。这将覆盖作为主题配置的字体内置社交插件将自动从Google Fonts下载字体文件:

plugins:
  - social:
      cards_layout_options:
        font_family: Ubuntu

cards_include

默认值: – 此选项允许仅为文档的某些子部分生成社交卡片,例如为多个插件实例的不同子文件夹生成不同的卡片:

plugins:
  - social:
      cards_include:
        - blog/*

cards_exclude

默认值: – 此选项允许从生成社交卡片中排除某些文档的子部分:

plugins:
  - social:
      cards_exclude:
        - changelog/*.md

调试

以下调试配置选项可用:

debug

默认值:false – 此选项启用特殊的调试模式,该模式使用轮廓和xy偏移量来渲染每个图层,以便了解布局的组成方式,并可选择呈现网格以更轻松地对齐:

plugins:
  - social:
      debug: true

启用调试模式

启用调试模式

禁用

禁用调试模式

debug_on_build

默认值:false – 构建站点时是否自动禁用调试模式。可以使用以下方式更改:

plugins:
  - social:
      debug_on_build: true

此设置仅用于作为安全措施,以确保在构建站点时社交卡片绝对不会意外包含点网格或图层轮廓。

debug_grid

默认值:true – 此选项在启用debug模式时启用点网格的渲染(参见上面的屏幕截图)。可以使用以下方式关闭网格:

plugins:
  - social:
      debug_grid: false

debug_grid_step

默认值:32 – 此选项指定网格的步长(以像素为单位),如果启用,可以用于对齐元素。可以使用以下方式更改:

plugins:
  - social:
      debug_grid_step: 64

debug_color

默认值:grey – 此选项设置在启用debug模式时渲染的图层轮廓和网格的颜色。可以使用以下方式更改:

plugins:
  - social:
      debug_color: yellow

缓存

内置社交插件实现了智能缓存机制,确保只有在缓存中不存在社交卡片或其内容发生更改时才重新生成社交卡片。以下是缓存的配置选项:

cache

默认值:true – 插件在开始生成作业之前是否查询其缓存以查找现有的生成结果。通常情况下,不需要更改此设置,除非调试插件本身。可以使用以下方式禁用缓存:

plugins:
  - social:
      cache: false

cache_dir

默认值:.cache/plugins/social – 此选项指定插件缓存的文件系统位置。通常情况下,不需要更改此设置,除非调试插件本身。可以使用以下方式更改缓存目录:

plugins:
  - social:
      cache_dir: .cache/plugins/social

默认情况下,所有实现缓存的内置插件都会在与mkdocs.yml相同的文件夹中创建一个.cache文件夹,并创建子文件夹以避免相互干扰。如果使用多个插件实例,则可能需要更改此设置。

[发布指南]: ../publishing-your-site.md#使用 GitHub Actions 发布

用法

如果要调整标题或为社交卡片设置自定义描述,可以设置前置属性titledescription,这些属性优先于默认值。

选择字体

某些字体不包含 CJK 字符,比如默认字体Roboto。如果您的site_namesite_description或页面标题包含 CJK 字符,请从Google Fonts中选择一个包含 CJK 字符的字体,例如Noto Sans字体系列之一:

简体中文

plugins:
  - social:
      cards_layout_options:
        font_family: Noto Sans SC

繁体中文

plugins:
  - social:
      cards_layout_options:
        font_family: Noto Sans TC

日语

plugins:
  - social:
      cards_layout_options:
        font_family: Noto Sans JP

韩语

plugins:
  - social:
      cards_layout_options:
        font_family: Noto Sans KR

更改布局

实验性

如果要为单个页面(例如您的首页)使用不同样的社交卡片布局,您可以在mkdocs.yml中使用以下配置选项来更改布局:

plugins:
  - social:
      cards_layout: custom
      cards_layout_options:
        template: layouts/custom.html

上述配置将使用名为custom.html的自定义布局模板。您可以创建一个名为layouts的文件夹,并在其中放置您的自定义布局模板文件。然后,您可以根据自己的需求编辑该模板文件,以实现完全自定义的社交卡片布局。

请注意,自定义布局需要一些 HTML 和 CSS 编程知识。您可以参考自定义社交卡片布局文档以获取更多详细信息和示例。


  1. 社交卡片的精彩之处在于它们是在构建时生成的,并直接与您的文档一起分发,不涉及外部服务。虽然使用 Web 浏览器和Puppeteer之类的自动化框架在构建时间生成社交卡片在技术上更简单,但它会给工具链增加进一步的责任,并可能使构建流程变得更加复杂和资源密集。