mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Updated documentation
This commit is contained in:
parent
e256360619
commit
bb5f98e617
@ -4,11 +4,11 @@
|
|||||||
|
|
||||||
### Installing MkDocs
|
### Installing MkDocs
|
||||||
|
|
||||||
In order to install [MkDocs][], Python and `pip` – the Python package manager –
|
Before installing [MkDocs][], you need to make sure you have Python and `pip`
|
||||||
need to be up and running. Assuming you are a developer and have a basic
|
– the Python package manager – up and running. Assuming you are a developer and
|
||||||
understanding of how things work and what StackOverflow is, we won't provide
|
have a basic understanding of how things work and what StackOverflow is, we
|
||||||
guidelines on setting those up. You can verify if you're already good to go
|
won't provide guidelines on setting those up. You can verify if you're already
|
||||||
with the following commands:
|
good to go with the following commands:
|
||||||
|
|
||||||
``` sh
|
``` sh
|
||||||
python --version
|
python --version
|
||||||
@ -103,6 +103,31 @@ extra:
|
|||||||
logo: 'images/logo.png'
|
logo: 'images/logo.png'
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Changing the color palette
|
||||||
|
|
||||||
|
Material defines a default hue for every primary and accent color on Google's
|
||||||
|
material design [color palette][]. This makes it very easy to change the
|
||||||
|
overall look of the theme. Just set the variables `extra.palette.primary` and
|
||||||
|
`extra.palette.accent` to one of the colors defined in the palette:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
extra:
|
||||||
|
palette:
|
||||||
|
primary: 'indigo'
|
||||||
|
accent: 'light blue'
|
||||||
|
```
|
||||||
|
|
||||||
|
Color names can be written upper- or lowercase but must match the names of the
|
||||||
|
material design [color palette][]. Valid values are: _red_, _pink_, _purple_,
|
||||||
|
_deep purple_, _indigo_, _blue_, _light blue_, _cyan_, _teal_, _green_, _light
|
||||||
|
green_, _lime_, _yellow_, _amber_, _orange_, _deep orange_, _brown_, _grey_ and
|
||||||
|
_blue grey_. The last three colors can only be used as a primary color.
|
||||||
|
|
||||||
|
If the color is set via this configuration, an additional CSS file called
|
||||||
|
`palettes.css` is included that defines the color palettes. If you want to
|
||||||
|
keep things lean, clone the repository and recompile the theme with your
|
||||||
|
custom colors set. See [this article](customization.md) for more information.
|
||||||
|
|
||||||
### Changing the font family
|
### Changing the font family
|
||||||
|
|
||||||
Material uses the [Ubuntu font family][] by default, specifically the regular
|
Material uses the [Ubuntu font family][] by default, specifically the regular
|
||||||
@ -117,15 +142,28 @@ extra:
|
|||||||
code: 'Roboto Mono'
|
code: 'Roboto Mono'
|
||||||
```
|
```
|
||||||
|
|
||||||
The text font will be loaded in font-weights 400 and 700, the monospaced font
|
The text font will be loaded in font-weights 400 and **700**, the monospaced
|
||||||
in regular weight. If you want to load fonts from other destinations or don't
|
font in regular weight. If you want to load fonts from other destinations or
|
||||||
want to use the Google Fonts loading magic, just set `extra.font` to `'none'`:
|
don't want to use the Google Fonts loading magic, just set `extra.font` to
|
||||||
|
`'none'`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
extra:
|
extra:
|
||||||
font: 'none'
|
font: 'none'
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Localization
|
||||||
|
|
||||||
|
The **Previous** and **Next** labels in the footer can easily be changed by
|
||||||
|
defining the variables `extra.i18n.prev` and `extra.i18n.next`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
extra:
|
||||||
|
i18n:
|
||||||
|
prev: 'Previous'
|
||||||
|
next: 'Next'
|
||||||
|
```
|
||||||
|
|
||||||
### Adding a GitHub and Twitter account
|
### Adding a GitHub and Twitter account
|
||||||
|
|
||||||
If you have a GitHub and/or Twitter account, you can add links to your
|
If you have a GitHub and/or Twitter account, you can add links to your
|
||||||
@ -141,9 +179,8 @@ extra:
|
|||||||
|
|
||||||
### More advanced customization
|
### More advanced customization
|
||||||
|
|
||||||
If you want to change the colors or general appearance of the Material theme,
|
If you want to change the general appearance of the Material theme, see
|
||||||
see [this article](customization.md) for more information on advanced
|
[this article](customization.md) for more information on advanced customization.
|
||||||
customization.
|
|
||||||
|
|
||||||
## Extensions
|
## Extensions
|
||||||
|
|
||||||
@ -242,9 +279,15 @@ theme: 'material'
|
|||||||
extra:
|
extra:
|
||||||
version: '0.1.0'
|
version: '0.1.0'
|
||||||
logo: 'images/logo.png'
|
logo: 'images/logo.png'
|
||||||
|
palette:
|
||||||
|
primary: 'indigo'
|
||||||
|
accent: 'light blue'
|
||||||
font:
|
font:
|
||||||
text: 'Roboto'
|
text: 'Roboto'
|
||||||
code: 'Roboto Mono'
|
code: 'Roboto Mono'
|
||||||
|
i18n:
|
||||||
|
prev: 'Previous'
|
||||||
|
next: 'Next'
|
||||||
author:
|
author:
|
||||||
github: 'my-github-handle'
|
github: 'my-github-handle'
|
||||||
twitter: 'my-twitter-handle'
|
twitter: 'my-twitter-handle'
|
||||||
@ -258,6 +301,7 @@ markdown_extensions:
|
|||||||
```
|
```
|
||||||
|
|
||||||
[MkDocs]: http://www.mkdocs.org
|
[MkDocs]: http://www.mkdocs.org
|
||||||
|
[color palette]: http://www.materialui.co/colors
|
||||||
[Ubuntu font family]: http://font.ubuntu.com
|
[Ubuntu font family]: http://font.ubuntu.com
|
||||||
[Google Fonts]: https://www.google.com/fonts
|
[Google Fonts]: https://www.google.com/fonts
|
||||||
[Roboto font]: https://www.google.com/fonts/specimen/Roboto
|
[Roboto font]: https://www.google.com/fonts/specimen/Roboto
|
||||||
|
@ -14,12 +14,26 @@ CSS that weighs less than 30kb (minified, gzipped and excluding Google Fonts
|
|||||||
and Analytics). Yet, it is highly customizable and degrades gracefully in older
|
and Analytics). Yet, it is highly customizable and degrades gracefully in older
|
||||||
browsers.
|
browsers.
|
||||||
|
|
||||||
|
## Quick start
|
||||||
|
|
||||||
|
Install with `pip`:
|
||||||
|
|
||||||
|
``` sh
|
||||||
|
pip install mkdocs-material
|
||||||
|
```
|
||||||
|
|
||||||
|
Add the following line to your `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
theme: 'material'
|
||||||
|
```
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- Beautiful, readable and very user-friendly design based on Google's material
|
- Beautiful, readable and very user-friendly design based on Google's material
|
||||||
design guidelines, packed in a full responsive template with a well-defined
|
design guidelines, packed in a full responsive template with a well-defined
|
||||||
color palette, great typography, as well as a beautiful search interface and
|
and [easily customizable color palette][], great typography, as well as a
|
||||||
footer.
|
beautiful search interface and footer.
|
||||||
|
|
||||||
- Well-tested and optimized Javascript and CSS including a cross-browser
|
- Well-tested and optimized Javascript and CSS including a cross-browser
|
||||||
fixed/sticky header, a drawer that even works without Javascript using
|
fixed/sticky header, a drawer that even works without Javascript using
|
||||||
@ -34,7 +48,7 @@ browsers.
|
|||||||
built on-top of [Gulp][] with `npm` and `bower` and modular and abstracted
|
built on-top of [Gulp][] with `npm` and `bower` and modular and abstracted
|
||||||
style definitions built with [SASS][].
|
style definitions built with [SASS][].
|
||||||
|
|
||||||
- Web application capability on iOS - when the page is saved to the homescreen,
|
- Web application capability on iOS – when the page is saved to the homescreen,
|
||||||
it behaves and looks like a native application.
|
it behaves and looks like a native application.
|
||||||
|
|
||||||
See the [getting started guide](getting-started.md) for instructions how to get
|
See the [getting started guide](getting-started.md) for instructions how to get
|
||||||
@ -44,6 +58,7 @@ it up and running.
|
|||||||
[material design]: https://www.google.com/design/spec/material-design
|
[material design]: https://www.google.com/design/spec/material-design
|
||||||
[checkbox hack]: http://tutorialzine.com/2015/08/quick-tip-css-only-dropdowns-with-the-checkbox-hack/
|
[checkbox hack]: http://tutorialzine.com/2015/08/quick-tip-css-only-dropdowns-with-the-checkbox-hack/
|
||||||
[project logo]: getting-started.md#adding-a-logo
|
[project logo]: getting-started.md#adding-a-logo
|
||||||
|
[easily customizable color palette]: getting-started.md#changing-the-color-palette
|
||||||
[GitHub and Twitter accounts]: getting-started.md#adding-a-github-and-twitter-account
|
[GitHub and Twitter accounts]: getting-started.md#adding-a-github-and-twitter-account
|
||||||
[extendable and customizable]: customization.md
|
[extendable and customizable]: customization.md
|
||||||
[Gulp]: http://gulpjs.com
|
[Gulp]: http://gulpjs.com
|
||||||
|
Loading…
Reference in New Issue
Block a user