内置社交插件¶
¥Built-in social plugin¶
社交插件会自动智能地为您项目的每个页面生成不同布局的精美且高度可定制的社交卡,当您或其他人在社交媒体上分享您的项目链接时,它会呈现为预览图像。
¥The social plugin automatically and intelligently generates beautiful and highly customizable social cards in different layouts for each page of your project, rendering as preview images whenever you or somebody else share a link to your project on social media.
客观的¶
¥Objective¶
工作原理¶
¥How it works¶
该插件会自动为您的项目的每个页面生成一个可定制的社交卡,当在社交媒体上分享您的项目链接时,该卡会作为预览图像出现,无需使用外部服务,只需一行配置即可。
¥The plugin automatically generates a customizable social card for each page of your project, which appears as a preview image when sharing a link to your project on social media, without the use of external services and just a single line of configuration.
该插件使用高效的图像处理库,允许自定义社交卡片的布局,并可根据项目的风格和品牌进行调整。虽然从技术上讲,使用网页浏览器和Puppeteer 1之类的自动化框架生成社交卡片要简单得多,但它会给你的工具链增加更多负担,有可能使构建流程更加复杂、耗费更多资源,并且速度显著降低。
¥With the use of an efficient image processing library, the plugin allows to define custom layouts for social cards, which can be adapted to match your project's style and branding. While it would technically be much simpler to generate social cards by using a web browser and an automation framework like Puppeteer1, it would add further liabilities to your toolchain, with the potential to make build pipelines more complex, much more resource intense, and significantly slower.
生成的社交卡片会被缓存并存储在站点目录中,因此是自托管的,确保您的项目不依赖于外部服务。为了生成社交卡片图片,您的系统上需要提供一些依赖项。
¥The generated social cards are cached and stored in the site directory, and thus self-hosted, ensuring that your project doesn't depend on external services. In order to generate social cards images, a few dependencies need to be available on your system.
何时使用¶
¥When to use it¶
有一种特殊情况我们不建议使用该插件:当您构建离线文档以供下载时。否则,启用该插件总是有意义的,因为在社交媒体上分享的文档链接会更具吸引力。
¥There's one particular case when we don't recommend to use the plugin: when you build offline-capable documentation to offer it as a download. Otherwise, it always makes sense to enable the plugin, as links to your documentation shared on social media will appear much more appealing.
更有趣的是,该插件可以与 Material for MkDocs 提供的其他内置插件结合使用,以创建适合您项目的复杂构建管道:
¥Even more interestingly, the plugin can be combined with other built-in plugins that Material for MkDocs offers, in order to create sophisticated build pipelines tailored to your project:
内置博客插件社交插件会自动为每篇文章和页面生成精美且可自定义的社交卡片,并在社交媒体上显示预览。在社交媒体上分享您的博客链接时,会呈现精美的社交卡片。
内置元插件元插件可用于更改社交卡片的布局,或更改部分页面的特定布局选项,例如背景或颜色。您的文档的每个部分可以使用完全不同的社交卡片。
配置¶
¥Configuration¶
8.5.0社交 – 内置
为了开始使用社交插件,只需将以下几行添加到mkdocs.yml ,并观察 Material for MkDocs 如何为您生成漂亮的社交卡片:
¥The social plugin automatically generates beautiful and customizable social cards for each post and page, showing as previews on social media.
社交插件内置于 Material for MkDocs 中,无需安装。
¥Links to your blog render beautiful social cards when shared on social media
但是,为了生成社交卡片图片,如果您的系统上尚未安装图片处理依赖项,则需要安装它们。链接的指南包含针对多种操作系统的说明,并提到了一些替代环境。
一般的¶
¥General¶
可用的设置如下:
¥The meta plugin can be used to change the layout for social cards or change specific layout options like background or color for a subset of pages.
enabled¶
¥enabled¶
8.5.0真实
¥Your documentation can use completely different social cards per section
使用此设置在构建项目时启用或禁用插件。如果要禁用该插件(例如,对于本地构建),可以在mkdocs.yml中使用环境变量:
此配置仅在持续集成(CI)期间启用插件。
¥In order to get started with the social plugin, just add the following lines to mkdocs.yml, and observe how Material for MkDocs generates beautiful social cards for you:
concurrency¶
¥concurrency¶
insiders-4.33.0可用 CPU - 1
¥The social plugin is built into Material for MkDocs and doesn't need to be installed.
有了更多可用的 CPU,插件就可以并行处理更多工作,从而更快地完成社交卡片的生成。如果您想完全禁用并发处理,请使用:
¥However, in order to generate social card images, it's necessary to install the dependencies for image processing, if they're not already available on your system. The linked guide includes instructions for several operating systems and mentions some alternative environments.
默认情况下,该插件使用所有可用的 CPU - 1,最少 1 个。
¥The following settings are available:
缓存¶
¥Caching¶
该插件实现了智能缓存机制,确保社交卡片仅在其内容发生变化或尚未包含在缓存中时才会重新生成。如果布局中使用的任何变量发生变化,插件都会检测到并重新生成社交卡片。
¥8.5.0 true
以下设置可用于缓存:
¥Use this setting to enable or disable the plugin when building your project. If you want to disable the plugin, e.g., for local builds, you can use an environment variable in mkdocs.yml:
cache¶
¥cache¶
insiders-4.33.0真实
¥This configuration enables the plugin only during continuous integration (CI).
使用此设置可指示插件绕过缓存,以便为所有页面重新生成社交卡片,即使缓存可能尚未过期。通常无需指定此设置,除非调试插件本身。可以使用以下命令禁用缓存:
¥ insiders-4.33.0 available CPUs - 1
cache_dir¶
¥cache_dir¶
8.5.0 .缓存/插件/社交
¥With more CPUs available, the plugin can do more work in parallel, and thus complete social card generation faster. If you want to disable concurrent processing completely, use:
通常无需指定此设置,除非您想更改根目录中缓存社交卡片图片的路径。如果您需要更改,请使用:
¥By default, the plugin uses all available CPUs - 1 with a minimum of 1.
如果您使用插件的多个实例,最好为两个实例设置不同的缓存目录,这样它们就不会互相干扰。
¥The plugin implements an intelligent caching mechanism, ensuring that social cards are only regenerated when their contents change or they're not already contained in the cache. If any of the variables used in a layout changes, the plugin detects it and regenerates the social card.
日志记录¶
¥Logging¶
以下设置可用于日志记录:
¥The following settings are available for caching:
log¶
¥log¶
insiders-4.40.2真实
¥ insiders-4.33.0 true
使用此设置可控制插件是否仅在生成社交卡片时记录错误,而不终止构建,例如,无效的图标引用。要终止构建,请使用:
¥Use this setting to instruct the plugin to bypass the cache, in order to re-generate social cards for all pages, even though the cache may not be stale. It's normally not necessary to specify this setting, except for when debugging the plugin itself. Caching can be disabled with:
log_level¶
¥log_level¶
insiders-4.40.2警告
¥8.5.0 .cache/plugin/social
使用此设置可控制插件在遇到错误时应使用的日志级别,这需要启用日志设置。可用的日志级别如下:
¥It is normally not necessary to specify this setting, except for when you want to change the path within your root directory where social card images are cached. If you want to change it, use:
错误以警告形式报告,以严格模式终止构建。
¥If you're using multiple instances of the plugin, it can be a good idea to set different cache directories for both instances, so that they don't interfere with each other.
社交卡¶
¥Social cards¶
社交卡生成有以下设置:
¥Use this setting to control whether the plugin should only log errors when generating social cards without terminating the build, e.g., invalid references to icons. To terminate the build, use:
cards¶
¥cards¶
8.5.0真实
¥ insiders-4.40.2 warn
使用此设置可启用或禁用社交卡片生成。目前,该插件的唯一用途是生成社交卡片,因此它相当于启用的设置,但未来可能会添加其他功能。如果您想禁用社交卡片生成,请使用:
¥Use this setting to control the log level that the plugin should employ when encountering errors, which requires that the log setting is enabled. The following log levels are available:
cards_dir¶
¥cards_dir¶
8.5.0资产/图片/社交
¥Errors are reported as warnings, terminating the build in strict mode.
通常无需指定此设置,除非您想更改网站目录中存储社交卡片的路径。如果您需要更改,请使用:
¥Errors are only reported as informational messages.
此配置将生成的图像存储在站点目录的my/custom/dir中。
¥Errors are only reported when using the --verbose flag.
cards_layout_dir¶
¥cards_layout_dir¶
insiders-4.33.0布局
¥The following settings are available for social card generation:
如果您想要构建自定义社交卡片布局,请使用此设置更改存储自定义布局的文件夹,默认文件夹是根目录中名为layouts的文件夹:
¥8.5.0 true
提供的路径是从根目录解析的。
¥Use this setting to enable or disable social card generation. Currently, the plugin's sole purpose is to generate social cards, so it's equivalent to the enabled setting, but in the future, other features might be added. If you want to disable social card generation, use:
自定义布局的存储位置
¥8.5.0 assets/images/social
我们的建议是将文件夹放在docs 目录之外,以确保在构建项目时不会将自定义布局复制到站点目录,例如,遵循以下目录布局:
¥It is normally not necessary to specify this setting, except for when you want to change the path within the site directory where social cards are stored. If you want to change it, use:
cards_layout¶
¥cards_layout¶
insiders-4.33.0默认
¥This configuration stores the generated images at my/custom/dir in the site directory.
该插件提供了一系列不断增加的社交卡片默认布局。如果您创建了自定义社交卡片布局,则可以指示插件将其完全用作其中一种内置布局:
¥ insiders-4.33.0 layouts
提供的路径是从布局目录解析的。
¥If you want to build a custom social card layout, use this setting to change the folder where you store your custom layouts, the default being a folder called layouts in your root directory:
如何解析自定义布局
¥The provided path is resolved from the root directory.
默认情况下,插件会从根目录中名为layouts的文件夹加载你的自定义布局。如果你的布局名为my-custom-layout ,则目录布局必须遵循以下规则:
¥Where to store custom layouts
cards_layout_options¶
¥cards_layout_options¶
9.1.10
¥Our recommendation is to locate the folder outside of the docs directory, to make sure that your custom layouts are not copied to the site directory when building your project, e.g., by adhering to the following directory layout:
使用此设置来设置通过cards_layout指定的布局的选项(如果布局支持的话),这样可以轻松且完全地配置布局:
¥ insiders-4.33.0 default
创建自定义布局时,您可以完全自由地定义布局的哪些部分可以参数化。插件附带的默认布局支持以下选项:
¥The plugin ships a growing list of default layouts for social cards. If you've created a custom social card layout, you can instruct the plugin to use it exactly as one of the included layouts:
cards_include¶
¥cards_include¶
insiders-4.35.0
¥The provided path is resolved from the layouts directory.
使用此设置为项目的子部分启用社交卡生成,例如,当使用插件的多个实例为不同的子部分生成不同的社交卡时:
¥How custom layouts are resolved
此配置可为blog文件夹及其文档目录内的子文件夹中包含的所有页面生成社交卡。
¥By default, the plugin will load your custom layouts from a folder named layouts in your root directory. If your layout is called my-custom-layout, the directory layout must adhere to:
cards_exclude¶
¥cards_exclude¶
insiders-4.35.0
使用此设置可以禁用项目子部分的社交卡生成,例如,当使用插件的多个实例为不同的子部分生成不同的社交卡时:
¥Use this setting to set options for the layout specified via cards_layout (if the layout supports it), which allows for making layouts easily and entirely configurable:
此配置禁用docs 目录内的changelog文件夹及其子文件夹中包含的所有页面的社交卡生成。
¥When creating a custom layout, you are completely free in defining which parts of your layout can be parametrized. The default layouts included with the plugin support the following options:
调试¶
¥Debugging¶
该插件包含一个用于调试布局的特殊模式,这在创建自定义布局时非常有用,因为它允许更快地迭代并更好地理解构图。
以下设置可用于调试:
¥Use this setting to enable social card generation for subsections of your project, e.g., when using multiple instances of the plugin to generate different social cards for different subsections:
debug¶
¥debug¶
insiders-4.33.0 false
¥This configuration enables social card generation for all pages that are contained in the blog folder and its subfolders inside the docs directory.
使用此设置可以启用一种特殊模式来调试布局,该模式使用彩色轮廓及其x和y偏移量呈现每个图层,并覆盖点网格进行对齐,因此更容易理解布局的不同图层是如何组合在一起的:
debug_on_build¶
¥debug_on_build¶
insiders-4.34.1 false
¥Use this setting to disable social card generation for subsections of your project, e.g., when using multiple instances of the plugin to generate different social cards for different subsections:
默认情况下,该插件会在构建项目时自动禁用调试模式,因此您可以确保调试覆盖层永远不会部署到生产环境中。如果您想更改此设置,请使用:
¥This configuration disables social card generation for all pages that are contained in the changelog folder and its subfolders inside the docs directory.
通常不需要更改此设置,因为它只是作为一种安全网。
¥The plugin includes a special mode for debugging layouts, which is very useful when creating custom layouts, as it allows for quicker iteration and better understanding of composition.
debug_grid¶
¥debug_grid¶
insiders-4.33.0真实
¥The following settings are available for debugging:
启用调试模式后,此设置指定是否在所有图层顶部渲染点网格,以便更好地对齐。如果要关闭网格,请使用:
¥ insiders-4.33.0 false
debug_grid_step¶
¥debug_grid_step¶
insiders-4.33.0 32
¥Use this setting to enable a special mode for debugging your layout, which renders each layer with a colored outline and its x and y offsets, and overlays a dot grid for alignment, so it's easier to understand how the distinct layers of your layout are composed together:
使用此设置指定点网格的步长(以像素为单位)(如果启用),这有助于创建完美对齐的图层以实现理想的构图。如果您想更改它,请使用:
¥ insiders-4.34.1 false
debug_color¶
¥debug_color¶
insiders-4.33.0灰色
¥By default, the plugin automatically disables debug mode when building your project, so you can be sure that debug overlays are never deployed to production. If you want to change that, use:
使用此设置指定添加到每个图层的轮廓颜色以及在所有图层顶部渲染的点网格。如果需要更改,请使用:
¥It's normally not necessary to change this setting, as it's just intended to be a safety net.
在极少数情况下,如果点网格或轮廓难以区分,则可能需要更改此设置,因为如果未明确设置,插件将自动调整颜色。
¥ insiders-4.33.0 true
用法¶
¥Usage¶
元数据¶
¥Metadata¶
该插件允许通过元数据(前言)覆盖设置子集,以自定义社交卡生成,例如,通过利用元插件为单个页面的包含默认布局设置选项,甚至为项目的整个子部分设置选项。
¥When debug mode is enabled, this setting specifies whether a dot grid is rendered on top of all layers, to allow for better alignment. If you want to switch the grid off, use:
可用的属性如下:
¥ insiders-4.33.0 32
cards¶
¥cards¶
insiders-4.37.0
¥Use this setting to specify the step size of the dot grid in pixels, if enabled, which can be useful to create perfectly aligned layers for ideal composition. It you want to change it, use:
使用此属性覆盖给定页面的卡片设置:
¥ insiders-4.33.0 grey
cards_layout¶
¥cards_layout¶
insiders-4.37.0
¥Use this setting to specify the color of the outlines that are added to each layer and the dot grid that is rendered on top of all layers. If you need to change it, use:
使用此属性覆盖给定页面的cards_layout设置:
¥In rare cases, it might be necessary to change this setting if the dot grid or the outlines are hard to distinguish, as the plugin will automatically adjust the color if not explicitly set.
cards_layout_options¶
¥cards_layout_options¶
insiders-4.37.0
¥The plugin allows to override a subset of settings through metadata (front matter) in order to customize social card generation, e.g., to set options for the included default layouts for a single page, or even for an entire subsection of your project by leveraging the meta plugin.
使用此属性覆盖给定页面的cards_layout_options设置:
¥The following properties are available:
---
social:
cards_layout_options:
background_color: blue # Change background color
background_image: null # Remove background image
---
# Page title
...
将选项设置为nullnull会重置该选项。
布局¶
¥Layouts¶
insiders-4.33.0
¥Use this property to override the cards setting for the given page:
虽然构建自定义布局既简单又可行,但该插件提供了几个预定义布局,所有布局都以default为前缀。包含以下布局:

此布局包括页面图标并设置以下默认值:
¥Setting an option to null resets the option.
背景颜色– theme.palette.primary
font_family – theme.font.text

此布局设置了以下默认值:
¥While it is possible and simple to build custom layouts, the plugin ships several predefined layouts, all of which are prefixed with default. The following layouts are included:
背景颜色– theme.palette.accent
font_family – theme.font.text

此布局设置了以下默认值:
¥This layout sets the following defaults:
颜色– theme.palette.primary
font_family – theme.font.text
默认布局非常灵活且使用舒适,因为它们复制了插件的原始行为,从其他theme设置中获取所有选项的默认值。
¥font_family – theme.font.text
有以下选项可用:
background_color¶
¥background_color¶
9.1.10
¥This layout includes the page icon and sets the following defaults:
使用此选项可更改生成的社交卡片的背景颜色。该值可以设置为用于生成卡片的图像库Pillow 支持的有效颜色值:
¥background_color – theme.palette.primary
如果此选项与background_image一起使用,则颜色将渲染在图像顶部,从而允许对图像进行着色。如果要删除背景颜色,请使用:
¥font_family – theme.font.text
background_image¶
¥background_image¶
insiders-4.33.0
使用此选项定义生成的社交卡片的背景图像。请注意,该图像使用background_color进行着色,该颜色也可以设置为transparent :
¥This layout sets the following defaults:
提供的路径是从根目录解析的。
¥background_color – theme.palette.accent
color¶
¥color¶
9.1.10
¥font_family – theme.font.text
使用此选项可更改生成的社交卡片的前景色。该值可以设置为用于生成卡片的图像库Pillow 支持的有效颜色值:
font_family¶
¥font_family¶
9.1.10
¥This layout sets the following defaults:
使用此选项可更改生成的社交卡片的字体系列。该插件会自动从Google Fonts下载字体,因此该字体必须指向现有的 Google Fonts:
¥color – theme.palette.primary
当您在Google Fonts上找到喜欢的字体时,您只需从字体样本页中复制名称并将其用作此选项的值即可 - 无需进一步配置。
¥font_family – theme.font.text
font_variant¶
¥font_variant¶
insiders-4.53.3
¥This layout only shows the given background image and scales it to cover.
使用此选项可更改用于生成社交卡片的字体变体。如果下载的字体具有诸如Condensed或Expanded类的变体,则可以使用以下方式进行设置:
¥The default layouts are very flexible and comfortable to use, as they replicate the original behavior of the plugin, sourcing default values for all options from other theme settings.
该变体与自定义布局中使用的样式相结合,因此指示插件使用诸如Condensed Regular或Expanded Bold类的组合。
¥The following options are available:
logo¶
¥logo¶
insiders-4.40.0
使用此选项可更改生成的社交卡片中使用的徽标。默认情况下,插件使用mkdocs.yml中的theme.logo或theme.icon.logo设置。您可以使用以下方式更改它:
¥Use this option to change the background color of the generated social card. The value can be set to a valid color value supported by pillow, the imaging library used for card generation:
提供的路径是从根目录解析的。
¥The following notations are supported, whereas each character after the # must be a valid hexadecimal in the range 0-F:
title¶
¥title¶
insiders-4.40.0
¥The following functions are supported, listing the allowed maximum values with the minimum values all being 0 or 0%:
使用此选项可更改生成的社交卡片的标题。这将覆盖 MkDocs 分配的计算页面标题以及title元数据属性:
¥If this options is used together with background_image, the color is rendered on top of the image which allows for tinting images. If you want to remove the background color, use:
description¶
¥description¶
insiders-4.40.0
使用此选项可更改生成的社交卡片的描述。这将覆盖site_description集合(如果已定义)以及description元数据属性:
¥Use this option to define a background image for the generated social card. Note that the image is tinted with the background_color, which can also be set to transparent:
缺少了什么吗?
¥The provided path is resolved from the root directory.
设置社交卡片时,您可能会发现缺少某些功能——我们很乐意考虑将其添加到插件中!您可以发起讨论提问,或在我们的问题跟踪器上创建变更请求,以便我们了解该功能是否适合该插件。
GitHub 在他们的博客中写道,他们使用Puppeteer为存储库、问题、提交、讨论以及基本上所有其他在社交媒体上共享时显示为预览图像的内容生成社交卡片图像。↩
¥
rgb(255, 255, 255)– Red, green and blue
