基本社交卡片¶
社交卡片是其他系统（如社交媒体）可以显示的图像，用作链接内容的预览。使用社交插件非常简单，符合MkDocs的Material理念：“电池已包含。”
基础知识¶
在开始之前，您只需安装几个依赖项。这些是插件生成社交卡片所需的图像处理库及其Python绑定。
满足这些前提条件后，您只需激活插件，它将：
- 为您网站的每个页面生成PNG格式的社交卡片；
- 在您网站页面的头部创建元数据，以提供社交媒体系统所需的关键信息，并告诉它们如何找到社交卡片图像。
现在，当您运行 mkdocs build 并查看 site 目录时，您会看到它包含了 assets/images/social 下的子文件夹，这些子文件夹反映了您的Markdown文件的结构。每个页面都有一个对应的PNG文件，包含社交卡片图像。
查看生成的HTML，您会看到在 head 元素中生成的元数据，包括一个指向图像的条目。
背景颜色¶
社交插件具有配置选项，可以更改颜色、图像、字体、徽标、标题甚至描述等方面。您可以在 mkdocs.yml 中为所有社交卡片进行配置，并且可以在单个页面的页面头部覆盖这些设置。
更改背景颜色
要将背景颜色更改为引人注目的热粉色，您可以添加：
徽标¶
默认情况下，插件使用您为整个网站设置的徽标，可以通过 theme.logo 或 theme.icon.logo 设置。两者之间的区别在于，theme.icon.logo 版本会将徽标的SVG代码直接嵌入到HTML中，使其能够继承CSS颜色设置。而使用 theme.logo 时，Material会将徽标作为图像包含。
您还可以为社交卡片设置自己的徽标。使用的路径相对于您的项目根目录，并且需要指向一个SVG文件或像素图像。它应该是矩形的，并具有透明背景。
背景图像¶
除了添加您自己的徽标外，个性化社交卡片的最有效方法是添加背景图像，而不是默认的纯色背景。确保选择与卡片其他元素形成良好对比的图像。
此外，背景颜色会在背景图像 之上 渲染，使您可以使用透明颜色为图像着色。要仅使用图像，请使用颜色值 transparent。
添加背景图像
背景图像的路径是从您的项目根目录解析的，因此您应该在此处创建 layouts 目录并放置背景图像。插件中包含的社交卡片的默认大小为1200x630像素，因此请选择该大小或能够良好缩放到该大小的图像。
额外的布局和样式¶
社交插件提供额外的布局以及为不同（类型的）页面配置不同样式的选项。它附带了一些额外的社交卡片布局。例如，default/variant 布局在卡片上添加了页面图标。您可以使用此功能根据您共享的页面类型在视觉上区分社交卡片。
例如，假设您有一组页面用于宣传活动，您希望在卡片上包含一个日历图标，以作为该卡片宣传活动的视觉指示。接下来，您将为活动页面设置一个目录，并使用元插件为它们分配一个日历图标。
活动页面的社交卡片
首先，在您的 docs 目录中创建一个目录以保存活动页面：
然后，在这个新目录中添加一个文件 .meta.yml，其中包含页面图标的设置和一个在社交媒体上会引人注目的热粉色背景。请注意，您可以通过将背景图像设置为 null 来覆盖它，因为由于不透明的颜色，它在任何情况下都是不可见的。
---
icon: material/calendar-plus
social:
cards_layout_options:
background_image: null
background_color: "#ff1493"
---
现在在 docs/events 目录中添加一个页面。它不需要有任何特殊内容，只需一个顶级标题。
要在 mkdocs.yml 中启用 default/variant 布局，请添加 cards_layout 选项，并同时添加元插件：
运行 mkdocs build 后，您可以看到位于 site/assets/images/social/events/index.png 的社交卡片上有页面图标。
请注意，图标也会出现在页面的导航元素旁边。如果这不是您想要的，那么您需要修改社交卡片模板，以便从其他来源获取图标。您可以在自定义社交卡片教程中了解如何做到这一点。
每页设置¶
您可以通过向页面头部添加设置来定制每个页面的卡片布局。您在之前的练习中已经有效地做到了这一点，但使用元插件影响了一整组页面。
假设除了常规活动外，您还有偶尔的网络研讨会，并且您希望为此设置不同的图标，并将描述设置为指示该事件是网络研讨会系列的一部分。
在页面头部覆盖卡片样式
将以下内容添加到 docs/events 中页面的顶部，或创建一个新页面：
接下来是什么？¶
如果上述引入的配置选项不足以满足您的需求，您还可以定义自定义布局。如果您想了解如何做到这一点，请继续查看自定义社交卡片教程。
社交卡片对于博客文章特别有用。如果您有博客，您只需启用两个插件，即可创建社交卡片以宣传您最新的博客文章。如果您还没有博客，但想要一个，为什么不查看一下博客教程呢？