|
1 | 1 | # Setup
|
2 | 2 |
|
3 |
| -Material for MkDocs offers a wide range of options for customizing and adjusting |
4 |
| -your documentation. In this section, we will explain how to make the most use of |
5 |
| -Material for MkDocs to change the look of your documentation, add more content, |
6 |
| -improve its functionality, and work with extensions. |
| 3 | +Material for MkDocs offers a wide range of options for customizing your |
| 4 | +documentation. In this section, we will explain how you can create a meaningful |
| 5 | +structure for your site, change the look and feel, add a blog and comment system |
| 6 | +and build a highly optimized site. |
7 | 7 |
|
8 |
| -## Customizing the look |
| 8 | +## Site structure |
9 | 9 |
|
10 |
| -Make your documentation reflect your brand by changing its colors, fonts, icons, |
11 |
| -logo, and more with just a few lines of configuration. Material for MkDocs makes |
12 |
| -it easy to extend the basic configurations and provides many options to alter |
13 |
| -the appearance. |
| 10 | +Set up and customize the structure of your documentation by configuring the |
| 11 | +header and footer to your taste, choosing among many modes of navigation, |
| 12 | +setting up site search and more. |
14 | 13 |
|
15 | 14 | <div class="grid cards" markdown>
|
16 | 15 |
|
17 |
| -- :material-brush-variant: __[Colors]__ – Change colors with an existing color palette or customize with CSS |
18 |
| -- :fontawesome-regular-file-word: __[Fonts]__ – Change fonts using Google Fonts or load self-hosted fonts |
19 |
| -- :material-google-downasaur: __[Logo & Icons]__ – Change the logo, use any of the +8,000 icons, or add new ones |
| 16 | +- :fontawesome-solid-earth-americas: __[Language]__ – Choose out of the 50+ supported languages or add a new one |
| 17 | +- :material-page-layout-sidebar-left: __[Navigation]__ – Create a clear, concise, and comprehensive navigation structure |
| 18 | +- :material-page-layout-header: __[Header]__ – Customize the behavior of the header, add an announcement bar |
| 19 | +- :material-page-layout-footer: __[Footer]__ – Add links to your social media profiles or websites in the footer |
| 20 | +- :material-tab-search: __[Search]__ – Set up and configure search, running entirely in the user's browser |
| 21 | +- :material-tag-plus-outline: __[Tags]__ – Categorize your pages with tags and group related pages |
20 | 22 |
|
21 | 23 | </div>
|
22 | 24 |
|
23 |
| - [Colors]: https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/ |
24 |
| - [Fonts]: https://squidfunk.github.io/mkdocs-material/setup/changing-the-fonts/ |
25 |
| - [Logo & Icons]: https://squidfunk.github.io/mkdocs-material/setup/changing-the-logo-and-icons/ |
| 25 | + [Language]: changing-the-language.md |
| 26 | + [Navigation]: setting-up-navigation.md |
| 27 | + [Header]: setting-up-the-header.md |
| 28 | + [Footer]: setting-up-the-footer.md |
| 29 | + [Search]: setting-up-site-search.md |
| 30 | + [Tags]: setting-up-tags.md |
26 | 31 |
|
27 |
| -## Adding additional content |
28 | 32 |
|
29 |
| -Easily extend the content of your documentation. Adjusting headers, including a |
30 |
| -footer, creating a blog, implementing comment systems, and automatically creating |
31 |
| -social media previews. |
| 33 | +## Appearance |
| 34 | + |
| 35 | +Match your brand's colors, fonts, icons, logo, and more with a few lines of |
| 36 | +configuration – Material for MkDocs makes it easy to extend the basic |
| 37 | +configuration or alter the appearance. |
32 | 38 |
|
33 | 39 | <div class="grid cards" markdown>
|
34 | 40 |
|
35 |
| -- :material-format-header-1: __[Header]__ – Customize the header using different configurations |
36 |
| -- :material-format-font-size-decrease: __[Footer]__ – Add links to social media or other websites in the footer |
37 |
| -- :material-cards-variant: __[Social Cards]__ – Create automated Social Media previews when sharing links |
38 |
| -- :material-book-open-outline: __[Blog]__ – Build a standalone blog or expand your documentation with one |
39 |
| -- :material-comment-text-outline: __[Comment System]__ – Add a third-party comment system on any page or footer |
| 41 | +- :material-brush-variant: __[Colors]__ Change colors with an existing color palette or customize with CSS |
| 42 | +- :material-format-font: __[Fonts]__ – Choose among 1,000 Google Fonts or load self-hosted fonts |
| 43 | +- :material-google-downasaur: __[Logo & Icons]__ – Change the logo, use any of the 8,000+ icons, or add new ones |
| 44 | +- :material-cards-variant: __[Social Cards]__ – Automatically create social media previews when sharing links |
40 | 45 |
|
41 | 46 | </div>
|
42 | 47 |
|
43 |
| - [Header]: https://squidfunk.github.io/mkdocs-material/setup/setting-up-the-header/ |
44 |
| - [Footer]: https://squidfunk.github.io/mkdocs-material/setup/setting-up-the-footer/ |
45 |
| - [Social Cards]: https://squidfunk.github.io/mkdocs-material/setup/setting-up-social-cards/ |
46 |
| - [Blog]: https://squidfunk.github.io/mkdocs-material/setup/setting-up-a-blog/ |
47 |
| - [Comment System]: https://squidfunk.github.io/mkdocs-material/setup/adding-a-comment-system/ |
| 48 | + [Colors]: changing-the-colors.md |
| 49 | + [Fonts]: changing-the-fonts.md |
| 50 | + [Logo & Icons]: changing-the-logo-and-icons.md |
| 51 | + [Social Cards]: setting-up-social-cards.md |
48 | 52 |
|
49 |
| -## Enhancing functionality |
| 53 | +## Content |
50 | 54 |
|
51 |
| -Improve the functionality of your documentation by integrating navigation and |
52 |
| -site search, categorizing pages using tags, changing the language, or adding |
53 |
| -multiple languages, and deploying multiple versions. |
| 55 | +Create a blog, integrate a comment system, connect a git repository and set up |
| 56 | +versioned documentation that matches your project's versioning metholodogy. |
54 | 57 |
|
55 | 58 | <div class="grid cards" markdown>
|
56 | 59 |
|
57 |
| -- :material-navigation-variant-outline: __[Navigation]__ – Create a clear, concise, and comprehensive navigation structure |
58 |
| -- :material-tab-search: __[Site Search]__ – Set up an excellent client-side search implementation |
59 |
| -- :fontawesome-solid-earth-americas: __[Language]__ – Change the language using one of the +50 existing translations |
60 |
| -- :octicons-tag-16: __[Tags]__ – Categorize your pages with tags and group related pages |
| 60 | +- :material-book-open-outline: __[Blog]__ – Set up a standalone blog or host it alongside your documentation |
| 61 | +- :material-comment-text-outline: __[Comment System]__ – Add a third-party comment system on any page or footer |
61 | 62 | - :octicons-versions-16: __[Versioning]__ – Deploy multiple versions by integrating with external utilities
|
| 63 | +- :octicons-repo-16: __[Repository]__ – Connect your documentation to your git repository |
62 | 64 |
|
63 | 65 | </div>
|
64 | 66 |
|
65 |
| - [Navigation]: https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/ |
66 |
| - [Site Search]: https://squidfunk.github.io/mkdocs-material/setup/setting-up-site-search/ |
67 |
| - [Language]: https://squidfunk.github.io/mkdocs-material/setup/changing-the-language/ |
68 |
| - [Tags]: https://squidfunk.github.io/mkdocs-material/setup/setting-up-tags/ |
69 |
| - [Versioning]: https://squidfunk.github.io/mkdocs-material/setup/setting-up-versioning/ |
| 67 | + [Blog]: setting-up-a-blog.md |
| 68 | + [Comment System]: adding-a-comment-system.md |
| 69 | + [Versioning]: setting-up-versioning.md |
| 70 | + [Repository]: adding-a-git-repository.md |
70 | 71 |
|
71 |
| -## Optimizing your site |
| 72 | +## Optimization |
72 | 73 |
|
73 |
| -Optimize your site by displaying information from your Git repository, getting a |
74 |
| -higher ranking on search engines, ensuring compliance with data privacy |
75 |
| -regulations, and unlocking offline usage. |
| 74 | +Add site analytics and build an optimized site by adding automatic image |
| 75 | +compression, complying with GDPR data privacy regulations and make it |
| 76 | +offline-capable. |
76 | 77 |
|
77 | 78 | <div class="grid cards" markdown>
|
78 | 79 |
|
79 |
| -- :fontawesome-brands-git: __[Git Repository]__ – Display information to your project's repository on your static site |
80 |
| -- :material-screwdriver: __[Optimized site]__ – Create optimized sites that rank great on search engines, i.a. |
| 80 | +- :material-google-analytics: __[Site analytics]__ – Learn how your users experience your documentation |
| 81 | +- :material-screwdriver: __[Optimized site]__ – Create optimized sites that rank great on search engines |
81 | 82 | - :octicons-lock-16: __[Data Privacy]__ – Ensure compliance with data privacy regulations
|
82 | 83 | - :octicons-cloud-offline-16: __[Offline usage]__ – Build an online and offline-capable documentation
|
83 | 84 |
|
84 | 85 | </div>
|
85 | 86 |
|
86 |
| - [Git Repository]: https://squidfunk.github.io/mkdocs-material/setup/adding-a-git-repository/ |
87 |
| - [Optimized site]: https://squidfunk.github.io/mkdocs-material/setup/building-an-optimized-site/ |
88 |
| - [Data Privacy]: https://squidfunk.github.io/mkdocs-material/setup/ensuring-data-privacy/ |
89 |
| - [Offline usage]: https://squidfunk.github.io/mkdocs-material/setup/building-for-offline-usage/ |
90 |
| - |
91 |
| -## Working with extensions |
92 |
| - |
93 |
| -Extend the range of available features and enhance your technical writing by |
94 |
| -working with extensions in your documentation. |
95 |
| - |
96 |
| -<div class="grid cards" markdown> |
97 |
| - |
98 |
| -- :material-language-python: __[Python Markdown]__ – Unlock a large range of features that require Python Markdown |
99 |
| -- :material-plus-box: __[Python Markdown Extension]__ – Advance your technical writing with a collection of extensions |
100 |
| - |
101 |
| -</div> |
102 |
| - |
103 |
| - [Python Markdown]: https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/ |
104 |
| - [Python Markdown Extension]: https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/ |
105 |
| - |
106 |
| -## Dependencies |
107 |
| - |
108 |
| -Install external libraries to allow for image processing as part of the build |
109 |
| -pipeline to make use of social cards and image optimization features. |
110 |
| - |
111 |
| -<div class="grid cards" markdown> |
112 |
| - |
113 |
| -- :fontawesome-regular-image: __[Image processing]__ – Install external libraries for image processing during the build pipeline |
114 |
| - |
115 |
| -</div> |
116 |
| - |
117 |
| - [Image processing]: https://squidfunk.github.io/mkdocs-material/setup/dependencies/image-processing/ |
| 87 | + [Site analytics]: site-analytics.md |
| 88 | + [Optimized site]: building-an-optimized-site.md |
| 89 | + [Data Privacy]: ensuring-data-privacy.md |
| 90 | + [Offline usage]: building-for-offline-usage.md |
0 commit comments