Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-30 18:24:35 +01:00
Code Issues Releases Wiki Activity

Fixed #79: Modularized social links integration

Browse Source
This commit is contained in:
squidfunk 2017-01-04 20:16:12 +01:00
parent 0198e5e98e
commit 01054414c8
13 changed files with 63 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/customization.md
View File

@ -102,6 +102,7 @@ The directory layout of the Material theme is as follows:
│ ├─ nav-item.html # Main navigation item
│ ├─ nav.html # Main navigation
│ ├─ search.html # Search box
│ ├─ social.html # Social links
│ ├─ source.html # Repository information
│ ├─ svgs.html # Inline SVG definitions
│ ├─ toc-item.html # Table of contents item
@ -151,6 +152,7 @@ The Material theme provides the following template blocks:
| `site_meta` | Wraps the meta tags in the document head |
| `site_name` | Wraps the site name in the header bar |
| `site_nav` | Wraps the site navigation and table of contents |
| `social` | Wraps the social links in the footer |
| `styles` | Wraps the stylesheets (also extra sources) |
For more on this topic refer to the [MkDocs documentation][4]

12
docs/getting-started.md
View File

@ -239,9 +239,9 @@ extra:
If you want to link your social accounts, the Material theme provides an easy
way for doing this in the footer of the documentation using the automatically
included [Socicon][8] webfont. The syntax is simple - the `type` denotes the
name of the social service, e.g. `github`, `twitter` or `linkedin` and the
`link`, well, resembles the link:
included [FontAwesome][8] webfont. The syntax is simple – the `type` denotes
the name of the social service, e.g. `github`, `twitter` or `linkedin` and
the `link`, well, resembles the link:
``` yaml
extra:
@ -254,9 +254,11 @@ extra:
link: 'https://de.linkedin.com/in/martin-donath-20a95039'
```
The links are generated in order.
The links are generated in order and the type of the link must match the name
of the FontAwesome glyph. The `fa` is automatically added, so `github` will
result in `fa fa-github`.
[8]: http://www.socicon.com/chart.php
[8]: http://fontawesome.io/icons/
### Google Analytics integration

1
material/assets/stylesheets/application-7822ba8d37.css Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-b85bf442e8.css
View File

File diff suppressed because one or more lines are too long

2
material/base.html
View File

@ -36,7 +36,7 @@
{% include "partials/fonts.html" %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-b85bf442e8.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-7822ba8d37.css">
{% if config.extra.palette %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-0352baa348.palette.css">
{% endif %}

3
material/partials/fonts.html
View File

@ -6,6 +6,3 @@
<style>body,input{font-family:"{{ text }}","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"{{ code }}","Courier New",Courier,monospace}</style>
{% endif %}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
{% if config.extra.social %}
<link rel="stylesheet" href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css">
{% endif %}

10
material/partials/footer.html
View File

@ -49,13 +49,9 @@
<a href="http://squidfunk.github.io/mkdocs-material/">
Material for MkDocs</a>
</div>
{% if config.extra.social %}
<div class="md-footer-social">
{% for social in config.extra.social %}
<a href="{{ social.link }}" class="md-footer-social__link socicon-{{ social.type }}"></a>
{% endfor %}
</div>
{% endif %}
{% block social %}
{% include "partials/social.html" %}
{% endblock %}
</div>
</div>
</footer>

9
material/partials/social.html Normal file
View File

@ -0,0 +1,9 @@
{% if config.extra.social %}
<div class="md-footer-social">
{% set path = "ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/{{ path }}">
{% for social in config.extra.social %}
<a href="{{ social.link }}" class="md-footer-social__link fa fa-{{ social.type }}"></a>
{% endfor %}
</div>
{% endif %}

2
mkdocs.yml
View File

@ -43,7 +43,7 @@ extra:
text: Roboto
mono: Roboto Mono
social:
- type: github
- type: github-alt
link: https://github.com/squidfunk
- type: twitter
link: https://twitter.com/squidfunk

2
src/assets/stylesheets/layout/_footer.scss
View File

@ -169,7 +169,7 @@
// Adjust line-height to match height for correct alignment
&::before {
line-height: 2;
line-height: 1.9;
}
}
}

6
src/partials/fonts.html
View File

@ -40,9 +40,3 @@
<!-- Material icons as a default iconset -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<!-- Social icon webfont, if necessary -->
{% if config.extra.social %}
<link rel="stylesheet" type="text/css"
href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css">
{% endif %}

13
src/partials/footer.html
View File

@ -89,15 +89,10 @@
Material for MkDocs</a>
</div>
<!-- Link to social media accounts, if any -->
{% if config.extra.social %}
<div class="md-footer-social">
{% for social in config.extra.social %}
<a href="{{ social.link }}" class="md-footer-social__link
socicon-{{ social.type }}"></a>
{% endfor %}
</div>
{% endif %}
<!-- Social links -->
{% block social %}
{% include "partials/social.html" %}
{% endblock %}
</div>
</div>
</footer>

34
src/partials/social.html Normal file
View File

@ -0,0 +1,34 @@
<!--
Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
-->
<!-- Social links in footer -->
{% if config.extra.social %}
<div class="md-footer-social">
{% set path = "ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" %}
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/{{ path }}">
{% for social in config.extra.social %}
<a href="{{ social.link }}" class="md-footer-social__link
fa fa-{{ social.type }}"></a>
{% endfor %}
</div>
{% endif %}