mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
64 lines
1.7 KiB
Markdown
64 lines
1.7 KiB
Markdown
|
---
|
|||
|
|
template: overrides/main.html
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# Setting up social cards
|
|||
|
|
|
|||
|
|
Social cards, also known as social previews, are images that are displayed when
|
|||
|
|
a link to your project documentation is shared on social media. Material for
|
|||
|
|
MkDocs can generate beautiful social cards automatically, using the colors,
|
|||
|
|
fonts and logo defined in `mkdocs.yml`.
|
|||
|
|
|
|||
|
|
## Configuration
|
|||
|
|
|
|||
|
|
### Built-in social cards
|
|||
|
|
|
|||
|
|
[:octicons-file-code-24: Source][1] ·
|
|||
|
|
[:octicons-cpu-24: Plugin][1] ·
|
|||
|
|
:octicons-beaker-24: Experimental ·
|
|||
|
|
[:octicons-heart-fill-24:{ .mdx-heart } Insiders only][1]{ .mdx-insiders }
|
|||
|
|
|
|||
|
|
The [built-in social cards plugin][1] generates a social card image for every
|
|||
|
|
page and adds the necessary meta tags, so it's displayed on social media when
|
|||
|
|
shared. Enable it via `mkdocs.yml`:
|
|||
|
|
|
|||
|
|
``` yaml
|
|||
|
|
plugins:
|
|||
|
|
- social
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
For example, the page on [setting up site analytics][2] renders as:
|
|||
|
|
|
|||
|
|
<figure markdown="1">
|
|||
|
|
|
|||
|
|
[![Social Cards][3]][3]
|
|||
|
|
|
|||
|
|
<figcaption markdown="1">
|
|||
|
|
|
|||
|
|
Want to try it out? Copy the current URL and enter it into [Twitter's Card
|
|||
|
|
validator][4] to see how social cards look in action.
|
|||
|
|
|
|||
|
|
</figcaption>
|
|||
|
|
</figure>
|
|||
|
|
|
|||
|
|
This is a built-in plugin, which means that no third-party plugin needs to be
|
|||
|
|
installed, as Material for MkDocs already bundles it. The following options
|
|||
|
|
are available:
|
|||
|
|
|
|||
|
|
`cards_directory`{ #cards_directory }
|
|||
|
|
|
|||
|
|
: :octicons-milestone-24: Default: `assets/images/social` – This option
|
|||
|
|
specifies where the generated social card images will be written to. It
|
|||
|
|
should normally not be necessary to change this option.
|
|||
|
|
|
|||
|
|
``` yaml
|
|||
|
|
plugins:
|
|||
|
|
- social:
|
|||
|
|
cards_directory: assets/images/social
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
[1]: ../insiders/index.md
|
|||
|
|
[2]: setting-up-site-analytics.md
|
|||
|
|
[3]: ../assets/screenshots/social-cards.png
|
|||
|
|
[4]: https://cards-dev.twitter.com/validator
|