diff --git a/docs/assets/screenshots/tags-search.png b/docs/assets/screenshots/tags-search.png index 66c6de4a6..4bea80263 100644 Binary files a/docs/assets/screenshots/tags-search.png and b/docs/assets/screenshots/tags-search.png differ diff --git a/docs/assets/screenshots/tags.png b/docs/assets/screenshots/tags.png index cf6902fca..9e93a9cd5 100644 Binary files a/docs/assets/screenshots/tags.png and b/docs/assets/screenshots/tags.png differ diff --git a/docs/reference/admonitions.md b/docs/reference/admonitions.md index 18d63a446..22c18ce2c 100644 --- a/docs/reference/admonitions.md +++ b/docs/reference/admonitions.md @@ -64,7 +64,7 @@ theme: === ":octicons-mark-github-16: Octicons" - ``` yaml title="Admonition with alternate icon set" + ``` yaml theme: icon: admonition: @@ -91,7 +91,7 @@ theme: === ":fontawesome-brands-font-awesome: FontAwesome" - ``` yaml title="Admonition with alternate icon set" + ``` yaml theme: icon: admonition: @@ -116,7 +116,7 @@ theme: [Insiders]: ../insiders/index.md - [custom icon]: icons-emojis.md#additional-icons + [custom icon]: ../setup/changing-the-logo-and-icons.md#additional-icons [supported types]: #supported-types [icon search]: icons-emojis.md#search [Octicons]: ../assets/screenshots/admonition-octicons.png diff --git a/docs/setup/setting-up-tags.md b/docs/setup/setting-up-tags.md index 31e012280..2dd0ed7d5 100644 --- a/docs/setup/setting-up-tags.md +++ b/docs/setup/setting-up-tags.md @@ -1,14 +1,21 @@ --- template: overrides/main.html +tags: + - HTML5 + - JavaScript + - CSS + - Other --- # Setting up tags Material for MkDocs adds first-class support for categorizing pages with tags, which adds the possibility to group related pages and make them discoverable -via search and a dedicated tags index. If your documentation is large, tags +via search and a dedicated [tags index]. If your documentation is large, tags can help to discover relevant information faster. + [tags index]: #adding-a-tags-index + ## Configuration ### Built-in tags plugin @@ -32,8 +39,9 @@ The following configuration options are available: : :octicons-milestone-24: Default: _none_ – This option specifies which file should be used to render the tags index. See the section on [adding a tags - index] for more information. If this option is specified, tags will - become clickable, pointing to the corresponding section in the tags index: + index][tags index] for more information. If this option is specified, tags + will become clickable, pointing to the corresponding section in the tags + index: ``` yaml plugins: @@ -42,12 +50,92 @@ The following configuration options are available: ``` The page holding the tags index can be linked anywhere in the `nav` section - of `mkdocs.yml`. Note, however, that this options is not required. If this - option is not specified, tags are still rendered and searchable, - but without a tags index. + of `mkdocs.yml`. Note, however, that this options is not required – only use + it if you want a tags index page. [tags support]: https://github.com/squidfunk/mkdocs-material/releases/tag/8.2.0 - [adding a tags index]: #adding-a-tags-index + +### Tag icons + +[:octicons-heart-fill-24:{ .mdx-heart } Insiders][Insiders]{ .mdx-insiders } · +[:octicons-tag-24: insiders-4.13.0][Insiders] · +:octicons-beaker-24: Experimental + +Each tag can be associated with an icon, which is then rendered inside the tag. +Before assigning icons to tags, associate each tag with a unique identifier, +by adding the following to `mkdocs.yml`: + +``` yaml +extra: + tags: + : # (1)! +``` + +1. The identifier can only include alphanumeric characters, as well as dashes + and underscores. For example, if you have a tag `Compatibility`, you can + set `compat` as an identifier: + + ``` yaml + extra: + tags: + Compatibility: compat + ``` + + Identifiers can be reused between tags. Tags which are not explicitly + associated will use the default tag icon which is :material-pound: + +Next, each identifier can be associated with an icon, or even a [custom icon], +by adding the following lines to `mkdocs.yml` under the `theme.icon` +configuration setting: + +=== "Tag icon" + + ``` yaml + theme: + icon: + tag: + : # (1)! + ``` + + 1. Enter a few keywords to find the perfect icon using our [icon search] and + click on the shortcode to copy it to your clipboard: + +
+ +
+
+
    +
    +
    + +=== "Tag default icon" + + ``` yaml + theme: + icon: + tag: + default: + ``` + +??? example "Expand to inspect example" + + ``` yaml + theme: + icon: + tag: + html: fontawesome/brands/html5 + js: fontawesome/brands/js + css: fontawesome/brands/css3 + extra: + tags: + HTML5: html + JavaScript: js + CSS: css + ``` + + [Insiders]: ../insiders/index.md + [custom icon]: changing-the-logo-and-icons.md#additional-icons + [icon search]: ../reference/icons-emojis.md#search ## Usage @@ -60,8 +148,10 @@ lines at the top of a Markdown file: ``` sh --- tags: - - insiders - - brand new + - html + - js + - css + - other --- ...