N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Document user custom element hooks (#2815)

Browse source 
* Added documentation for including custom CSS on a site or page

* Removed non-configuration related content from 05-configuration.md and cleaned up some style in new sections of 16-stylesheets.md

* Moved small custom head documentation to a ProTip in _docs/06-overriding-theme-defaults.md

* Cleaned up some documentation, and added some example uses of custom head and footer.

* Replace double space with single

* Replace double spaces with single

Co-authored-by: Tom Manner <tsmanner@us.ibm.com>
Co-authored-by: Michael Rose <mmistakes@users.noreply.github.com>
This commit is contained in:
Tom Manner 2021-04-13 16:10:08 -04:00 committed by GitHub
parent 99cd379c61
commit de6870743d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 66 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
docs/_docs/02-structure.md
View file

@ -7,7 +7,7 @@ last_modified_at: 2018-03-20T15:19:22-04:00
Nothing clever here :wink:. Layouts, data files, and includes are all placed in their default locations. Stylesheets and scripts in `assets`, and a few development related files in the project's root directory.
**Please note:** If you installed Minimal Mistakes via the Ruby Gem method, theme files like `_layouts`, `_includes`, `_sass`, and `/assets/` will be missing. This is normal as they are bundled with the [`minimal-mistakes-jekyll`](https://rubygems.org/gems/minimal-mistakes-jekyll) Ruby gem.
**Please note:** If you installed Minimal Mistakes via the Ruby Gem method, theme files like `_layouts`, `_includes`, `_sass`, and `/assets/` will be missing. This is normal as they are bundled with the [`minimal-mistakes-jekyll`](https://rubygems.org/gems/minimal-mistakes-jekyll) Ruby gem. If you would like to make changes, create the files and Jekyll will prefer your local copy.
{: .notice--info}
```bash
@ -18,8 +18,10 @@ minimal-mistakes
├── _includes
| ├── analytics-providers # snippets for analytics (Google and custom)
| ├── comments-providers # snippets for comments
| ├── footer # custom snippets to add to site footer
| ├── head # custom snippets to add to site head
| ├── footer
| | └── custom.html # custom snippets to add to site footer
| ├── head
| | └── custom.html # custom snippets to add to site head
| ├── feature_row # feature row helper
| ├── gallery # image gallery helper
| ├── group-by-array # group by array helper for archives

46
docs/_docs/10-layouts.md
View file

@ -798,3 +798,49 @@ Add the new `.btn--reddit` class to the `<a>` element from earlier, [compile `ma
```
![Reddit social share link button]({{ "/assets/images/mm-social-share-links-reddit-color.png" | relative_url }})
---
## Custom head and footer
The `default` layout includes a number of custom templates, which provide ways for you to directly add content to all your pages.
### Head
`_includes/head/custom.html` is included at the end of the `<head>` tag. An example use of this include is to add custom CSS per page:
Add some Liquid tags for the new configuration to `_includes/head/custom.html`.
{% raw %}```html
{% if page.page_css %}
{% for stylesheet in page.page_css %}
<link rel="stylesheet" href="{{ stylesheet | relative_url }}">
{% endfor %}
{% endif %}
```{% endraw %}
Next, add `page_css` to any page's YAML Front Matter to have your CSS loaded for that page.
```yaml
page_css:
- /path/to/your/custom.css
```
### Footer
`_includes/footer/custom.html` is included at the beginning of the `<footer>` tag. An example use of this include is to add custom JavaScript per page:
Add some Liquid tags for the new configuration to `_includes/footer/custom.html`.
{% raw %}```html
{% if page.page_js %}
{% for script in page.page_js %}
<script src="{{ script | relative_url }}"></script>
{% endfor %}
{% endif %}
```{% endraw %}
Next, add `page_js` to any page's YAML Front Matter to have your CSS loaded for that page.
```yaml
page_js:
- /path/to/your/custom.css
```
---