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

Improve author link flexibility

Browse source 
Deprecate social networking links in `_config.yml` in favor or new `author.links` array for any link and in any order. All of Font Awesome's icons are available for use.

```
author:
  links:
    - label: "Your Website"
      icon: "fas fa-fw fa-link"
      url: "https://your-site.com"
    - label: "Twitter"
      icon: "fab fa-fw fa-twitter-square"
      url: "https://twitter.com/username"
    - label: "GitHub"
      icon: "fab fa-fw fa-github"
      url: "https://github.com/username"
    - label: "Instagram"
      icon: "fab fa-fw fa-instagram"
      url: "https://instagram.com/username"
```

Fixes #1581
This commit is contained in:
Michael Rose 2018-09-10 15:05:07 -04:00
parent 68df0b6b63
commit 42de7a56fc
10 changed files with 200 additions and 189 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
_config.yml
View file

@ -105,31 +105,25 @@ author:
bio : "I am an amazing person." bio : "I am an amazing person."
location : "Somewhere" location : "Somewhere"
email : email :
uri : links:
home : # null (default), "absolute or relative url to link to author home" - label: "Email"
bitbucket : icon: "fas fa-fw fa-envelope-square"
codepen : # url: mailto:your.name@email.com
dribbble : - label: "Website"
flickr : icon: "fas fa-fw fa-link"
facebook : # url: "https://your-website.com"
foursquare : - label: "Twitter"
github : icon: "fab fa-fw fa-twitter-square"
gitlab : # url: "https://twitter.com/"
google_plus : - label: "Facebook"
keybase : icon: "fab fa-fw fa-facebook-square"
instagram : # url: "https://facebook.com/"
lastfm : - label: "GitHub"
linkedin : # "john-doe-12345678" (the last part of your profile url, e.g. https://www.linkedin.com/in/john-doe-12345678) icon: "fab fa-fw fa-github"
pinterest : # url: "https://github.com/"
soundcloud : - label: "Instagram"
stackoverflow : # "123456/username" (the last part of your profile url, e.g. https://stackoverflow.com/users/123456/username) icon: "fab fa-fw fa-instagram"
steam : # "steamId" (the last part of your profile url, e.g. https://steamcommunity.com/id/steamId/) # url: "https://instagram.com/"
tumblr :
twitter :
vine :
weibo :
xing :
youtube : # "https://youtube.com/c/MichaelRoseDesign"
# Reading Files # Reading Files

8
_includes/author-profile.html
View file

@ -48,6 +48,14 @@
</li> </li>
{% endif %} {% endif %}
{% if author.links %}
{% for link in author.links %}
{% if link.label and link.url %}
<li><a href="{{ link.url }}"><i class="{{ link.icon | default: 'fas fa-link' }}" aria-hidden="true"></i> {{ link.label }}</a></li>
{% endif %}
{% endfor %}
{% endif %}
{% if author.uri %} {% if author.uri %}
<li> <li>
<a href="{{ author.uri }}" itemprop="url"> <a href="{{ author.uri }}" itemprop="url">

39
docs/_config.yml
View file

@ -103,32 +103,19 @@ author:
avatar : "/assets/images/michael-rose.jpg" avatar : "/assets/images/michael-rose.jpg"
bio : "Just another boring, tattooed, time traveling, designer." bio : "Just another boring, tattooed, time traveling, designer."
location : "Buffalo, NY" location : "Buffalo, NY"
email : links:
uri : "https://mademistakes.com" - label: "Made Mistakes"
home : "https://mademistakes.com" icon: "fas fa-fw fa-link"
bitbucket : url: "https://mademistakes.com"
codepen : - label: "Twitter"
dribbble : icon: "fab fa-fw fa-twitter-square"
flickr : url: "https://twitter.com/mmistakes"
facebook : *facebook - label: "GitHub"
foursquare : icon: "fab fa-fw fa-github"
github : "mmistakes" url: "https://github.com/mmistakes"
gitlab : - label: "Instagram"
google_plus : icon: "fab fa-fw fa-instagram"
keybase : url: "https://instagram.com/mmistakes"
instagram : "mmistakes"
lastfm :
linkedin :
pinterest :
soundcloud :
stackoverflow : # https://stackoverflow.com/users/123456/username
steam :
tumblr :
twitter : *twitter
vine :
weibo :
xing :
youtube :
# Reading Files # Reading Files

35
docs/_docs/05-configuration.md
View file

@ -734,14 +734,39 @@ author:
name : "Your Name" name : "Your Name"
avatar : "/assets/images/bio-photo.jpg" avatar : "/assets/images/bio-photo.jpg"
bio : "My awesome biography constrained to a sentence or two goes here." bio : "My awesome biography constrained to a sentence or two goes here."
email : # optional location : "Somewhere, USA"
uri : "http://your-site.com"
home : # null (default), "absolute or relative url to link to author home"
``` ```
Social media links are all optional, include the ones you want visible. In most cases you just need to add the username. If you're unsure double check `_includes/author-profile.html` to see how the URL is constructed. Author links are all optional, include the ones you want visible under the `author.links` array.
To add social media links not included with the theme or customize the author sidebar further, read the full [layout documentation]({{ "/docs/layouts/#author-profile" | relative_url }}). | Name | Description |
| --- | --- |
| **label** | Link label (e.g. `"Twitter"`) |
| **icon** | [Font Awesome icon](https://fontawesome.com/icons?d=gallery) classes (e.g. `"fab fa-fw fa-twitter-square"`) |
| **url** | Link URL (e.g. `"https://twitter.com/mmistakes"`) |
```yaml
author:
name: "Your Name"
avatar: "/assets/images/bio-photo.jpg"
bio: "I am an amazing person."
location: "Somewhere"
links:
- label: "Made Mistakes"
icon: "fas fa-fw fa-link"
url: "https://mademistakes.com"
- label: "Twitter"
icon: "fab fa-fw fa-twitter-square"
url: "https://twitter.com/mmistakes"
- label: "GitHub"
icon: "fab fa-fw fa-github"
url: "https://github.com/mmistakes"
- label: "Instagram"
icon: "fab fa-fw fa-instagram"
url: "https://instagram.com/mmistakes"
```
To customize the author sidebar, read the full [layout documentation]({{ "/docs/layouts/#author-profile" | relative_url }}).
## Reading Files ## Reading Files

26
docs/_docs/09-authors.md
View file

@ -2,32 +2,44 @@
title: "Authors" title: "Authors"
permalink: /docs/authors/ permalink: /docs/authors/
excerpt: "Instructions and settings for working with multiple site authors." excerpt: "Instructions and settings for working with multiple site authors."
last_modified_at: 2016-11-03T10:55:15-04:00 last_modified_at: 2018-09-10T12:33:24-04:00
--- ---
Sites that may have content authored from various individuals can be accommodated by using [data files](https://jekyllrb.com/docs/datafiles/). Sites that may have content authored from various individuals can be accommodated by using [data files](https://jekyllrb.com/docs/datafiles/).
To assign an author to a post or page that is different from the site author specified in `_config.yml`: To assign an author to a post or page that is different from the site author specified in `_config.yml`:
**Step 1.** Create `_data/authors.yml` and add authors using the following format. Any variables found under `author:` in `_config.yml` can be used (e.g. `name`, `avatar`, `uri`, social media profiles, etc.). **Step 1.** Create `_data/authors.yml` and add authors using the following format. Any variables found under `author:` in `_config.yml` can be used (e.g. `name`, `bio`, `avatar`, author `links`, etc.).
```yaml ```yaml
# /_data/authors.yml # /_data/authors.yml
Billy Rick: Billy Rick:
name : "Billy Rick" name : "Billy Rick"
uri: "http://thewhip.com"
email: "billy@rick.com"
bio : "What do you want, jewels? I am a very extravagant man." bio : "What do you want, jewels? I am a very extravagant man."
avatar : "/assets/images/bio-photo-2.jpg" avatar : "/assets/images/bio-photo-2.jpg"
twitter: "extravagantman" links:
- label: "Email"
icon: "fas fa-fw fa-envelope-square"
url: "mailto:billyrick@rick.com"
- label: "Website"
icon: "fas fa-fw fa-link"
url: "https://thewhip.com"
- label: "Twitter"
icon: "fab fa-fw fa-twitter-square"
url: "https://twitter.com/extravagantman"
Cornelius Fiddlebone: Cornelius Fiddlebone:
name : "Cornelius Fiddlebone" name : "Cornelius Fiddlebone"
email: "cornelius@thewhip.com"
bio : "I ordered what?" bio : "I ordered what?"
avatar : "/assets/images/bio-photo.jpg" avatar : "/assets/images/bio-photo.jpg"
twitter: "rhymeswithsackit" links:
- label: "Email"
icon: "fas fa-fw fa-envelope-square"
url: "mailto:cornelius@thewhip.com"
- label: "Twitter"
icon: "fab fa-fw fa-twitter-square"
url: "https://twitter.com/rhymeswithsackit"
``` ```
**Step 2.** Assign one of the authors in `authors.yml` to a post or page you wish to override the `site.author` with. **Step 2.** Assign one of the authors in `authors.yml` to a post or page you wish to override the `site.author` with.

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

@ -525,68 +525,36 @@ defaults:
**Note:** To disable the author sidebar profile for a specific post or page, add `author_profile: false` to the YAML Front Matter instead. **Note:** To disable the author sidebar profile for a specific post or page, add `author_profile: false` to the YAML Front Matter instead.
{: .notice--warning} {: .notice--warning}
The theme comes pre-built with a selection of links for the most common social media networks. These are all optional and can be [assigned in `_config.yml`]({{ "/docs/configuration/" | relative_url }}). To assign more author links, add to the `author.links` array in [`_config.yml`]({{ "/docs/configuration/" | relative_url }}) link so. Any of [Font Awesome's icons](https://fontawesome.com/icons?d=gallery) are available for use.
To add more links you'll need to crack open [`_includes/author-profile-custom-links.html`](https://github.com/mmistakes/minimal-mistakes/blob/master/_includes/author-profile-custom-links.html) and add the appropriate `<li>` markup shown below. ```yaml
author:
name: "Your Name"
avatar: "/assets/images/bio-photo.jpg"
bio: "I am an amazing person."
location: "Somewhere"
links:
- label: "Made Mistakes"
icon: "fas fa-fw fa-link"
url: "https://mademistakes.com"
- label: "Twitter"
icon: "fab fa-fw fa-twitter-square"
url: "https://twitter.com/mmistakes"
- label: "GitHub"
icon: "fab fa-fw fa-github"
url: "https://github.com/mmistakes"
- label: "Instagram"
icon: "fab fa-fw fa-instagram"
url: "https://instagram.com/mmistakes"
```
**Please note:** Links added here will appear after the ones in [`_includes/author-profile.html`](https://github.com/mmistakes/minimal-mistakes/blob/master/_includes/author-profile.html). If you'd like to change the order of appearance you'll need to edit that file directly. **Note:** Depending on the icon and theme skin used, colors may not be used. Popular social networks like Twitter, Facebook, Instagram, Google+, etc. have the appropriate brand color set in CSS. To change or add missing colors edit [`_utilities.scss`](https://github.com/mmistakes/minimal-mistakes/blob/master/_sass/minimal-mistakes/_utilities.scss) in `<site root>/_sass/minimal-mistakes/`.
{: .notice--info} {: .notice--info}
#### Social network link example For example, to color a Reddit icon, simply add a `color` declaration and the corresponding hex code like so:
```html
<li>
<a href="https://whatever-social-network.com/username">
<i class="fab fa-fw" aria-hidden="true"></i> Awesome Social Network
</a>
</li>
```
To add a new link you'll need three things:
1. Destination URL
2. [Font Awesome icon](https://fontawesome.com/icons?d=gallery) (`fa-` class)
3. Label for the link
It's up to you if you want to wrap it in a `{% raw %}{% if %} ... {% endif %}{% endraw %}`conditional and add a variable to `_config.yml`. If you don't plan to change it then hard-coding the string is perfectly acceptable.
Let's run through how you'd add a new link that points to a Reddit profile. Starting with the three things from above:
1. `https://www.reddit.com/user/username`
2. [`fa-reddit`](http://fontawesome.io/icon/reddit/)
3. `Reddit`
And plug them into the appropriate locations:
```html
<li>
<a href="[1]">
<i class="fab fa-fw [2]" aria-hidden="true"></i> [3]
</a>
</li>
```
To end up with:
```html
<li>
<a href="https://www.reddit.com/user/username">
<i class="fab fa-fw fa-reddit" aria-hidden="true"></i> Reddit
</a>
</li>
```
![Reddit link in author profile]({{ "/assets/images/mm-author-profile-reddit-gs.png" | relative_url }})
To add a touch of color to the default black (`#000`) icon a few more steps are necessary.
Start by copying [`_utilities.scss`](https://github.com/mmistakes/minimal-mistakes/blob/master/_sass/minimal-mistakes/_utilities.scss) `<site root>/_sass`. Open it up to the icon section (it's near the bottom) and nest a new class beneath `.social-icons` that matches the one used to declare the Font Awesome icon. In our case `.fa-reddit`.
Simply add a `color` declaration and the corresponding hex code.
```scss ```scss
.social-icons { .social-icons {
.fa-reddit { .fa-reddit {
color: #ff4500; color: #ff4500;
} }
@ -595,12 +563,6 @@ Simply add a `color` declaration and the corresponding hex code.
![Reddit link in author profile with color]({{ "/assets/images/mm-author-profile-reddit-color.png" | relative_url }}) ![Reddit link in author profile with color]({{ "/assets/images/mm-author-profile-reddit-color.png" | relative_url }})
**ProTip:** For bonus points you can add it as a Sass `$variable` that you set in [`_variables.scss`](https://github.com/mmistakes/minimal-mistakes/blob/master/_sass/minimal-mistakes/_variables.scss) like the other ["brand" colors](http://brandcolors.net/). You'll need to add this file to `/_sass/` as well if you're using the Ruby Gem version of the theme.
{: .notice--info}
**Please please please** don't submit [pull requests]({{ "/docs/contributing/" | relative_url }}) adding in support for "missing" social media links. I'm trying to keep things down to the minimum (hence the theme's name) and have no interest in merging such PRs :expressionless:.
{: .notice--warning}
### Custom Sidebar Content ### Custom Sidebar Content
Blocks of content can be added by using the following under `sidebar`: Blocks of content can be added by using the following under `sidebar`:

25
docs/_posts/2012-03-15-layout-author-override.md
View file

@ -2,31 +2,44 @@
title: "Layout: Author Override" title: "Layout: Author Override"
author: Billy Rick author: Billy Rick
excerpt: "A post to test author overrides using a data file." excerpt: "A post to test author overrides using a data file."
last_modified_at: 2018-09-10T12:32:27-04:00
--- ---
Sites that may have content authored from various individuals can be accommodated by using [data files](https://jekyllrb.com/docs/datafiles/). Sites that may have content authored from various individuals can be accommodated by using [data files](https://jekyllrb.com/docs/datafiles/).
To attribute an author to a post or page that is different from the site author specified in `_config.yml`: To attribute an author to a post or page that is different from the site author specified in `_config.yml`:
**Step 1.** Create `_data/authors.yml` and add authors using the following format. Anything variables found under `author` in `_config.yml` can be used (e.g. `name`, `avatar`, `uri`, social media profiles, etc.). **Step 1.** Create `_data/authors.yml` and add authors using the following format. Anything variables found under `author` in `_config.yml` can be used (e.g. `name`, `bio`, `avatar`, author `links`, etc.).
```yaml ```yaml
# /_data/authors.yml # /_data/authors.yml
Billy Rick: Billy Rick:
name : "Billy Rick" name : "Billy Rick"
uri: "http://thewhip.com"
email: "billy@rick.com"
bio : "What do you want, jewels? I am a very extravagant man." bio : "What do you want, jewels? I am a very extravagant man."
avatar : "/assets/images/bio-photo-2.jpg" avatar : "/assets/images/bio-photo-2.jpg"
twitter: "extravagantman" links:
- label: "Email"
icon: "fas fa-fw fa-envelope-square"
url: "mailto:billyrick@rick.com"
- label: "Website"
icon: "fas fa-fw fa-link"
url: "https://thewhip.com"
- label: "Twitter"
icon: "fab fa-fw fa-twitter-square"
url: "https://twitter.com/extravagantman"
Cornelius Fiddlebone: Cornelius Fiddlebone:
name : "Cornelius Fiddlebone" name : "Cornelius Fiddlebone"
email: "cornelius@thewhip.com"
bio : "I ordered what?" bio : "I ordered what?"
avatar : "/assets/images/bio-photo.jpg" avatar : "/assets/images/bio-photo.jpg"
twitter: "rhymeswithsackit" links:
- label: "Email"
icon: "fas fa-fw fa-envelope-square"
url: "mailto:cornelius@thewhip.com"
- label: "Twitter"
icon: "fab fa-fw fa-twitter-square"
url: "https://twitter.com/rhymeswithsackit"
``` ```
**Step 2.** Assign one of the authors in `authors.yml` to a post or page you wish to override the `site.author` with. **Step 2.** Assign one of the authors in `authors.yml` to a post or page you wish to override the `site.author` with.

38
test/_config.yml
View file

@ -91,31 +91,19 @@ author:
avatar : "/assets/images/bio-photo.jpg" avatar : "/assets/images/bio-photo.jpg"
bio : "I am an amazing person." bio : "I am an amazing person."
location : "Somewhere" location : "Somewhere"
email : links:
uri : - label: "Your Website"
home : # null (default), "absolute or relative url to link to author home" icon: "fas fa-fw fa-link"
bitbucket : url: "https://your-site.com"
codepen : - label: "Twitter"
dribbble : icon: "fab fa-fw fa-twitter-square"
flickr : url: "https://twitter.com/"
facebook : - label: "GitHub"
foursquare : icon: "fab fa-fw fa-github"
github : url: "https://github.com/"
google_plus : - label: "Instagram"
keybase : icon: "fab fa-fw fa-instagram"
instagram : url: "https://instagram.com/"
lastfm :
linkedin :
pinterest :
soundcloud :
stackoverflow : # "123456/username" (the last part of your profile url, e.g. http://stackoverflow.com/users/123456/username)
steam :
tumblr :
twitter : "mmistakes"
vine :
weibo :
xing :
youtube : # "https://youtube.com/c/MichaelRoseDesign"
# Reading Files # Reading Files

24
test/_data/authors.yml
View file

@ -2,17 +2,27 @@
Billy Rick: Billy Rick:
name : "Billy Rick" name : "Billy Rick"
uri : "http://thewhip.com"
email : "billy@rick.com"
bio : "What do you want, jewels? I am a very extravagant man." bio : "What do you want, jewels? I am a very extravagant man."
avatar : "/assets/images/bio-photo-2.jpg" avatar : "/assets/images/bio-photo-2.jpg"
twitter : "extravagantman" links:
google_plus : "BillyRick" - label: "Email"
icon: "fas fa-fw fa-envelope-square"
url: "mailto:billyrick@rick.com"
- label: "Website"
icon: "fas fa-fw fa-link"
url: "https://thewhip.com"
- label: "Twitter"
icon: "fab fa-fw fa-twitter-square"
url: "https://twitter.com/extravagantman"
Cornelius Fiddlebone: Cornelius Fiddlebone:
name : "Cornelius Fiddlebone" name : "Cornelius Fiddlebone"
email : "cornelius@thewhip.com"
bio : "I ordered what?" bio : "I ordered what?"
avatar : "/assets/images/bio-photo.jpg" avatar : "/assets/images/bio-photo.jpg"
twitter : "rhymeswithsackit" links:
google_plus : "CorneliusFiddlebone" - label: "Email"
icon: "fas fa-fw fa-envelope-square"
url: "mailto:cornelius@thewhip.com"
- label: "Twitter"
icon: "fab fa-fw fa-twitter-square"
url: "https://twitter.com/rhymeswithsackit"

24
test/_posts/2012-03-15-layout-author-override.md
View file

@ -8,25 +8,37 @@ Sites that may have content authored from various individuals can be accommodate
To attribute an author to a post or page that is different from the site author specified in `_config.yml`: To attribute an author to a post or page that is different from the site author specified in `_config.yml`:
**Step 1.** Create `_data/authors.yml` and add authors using the following format. Anything variables found under `author` in `_config.yml` can be used (e.g. `name`, `avatar`, `uri`, social media profiles, etc.). **Step 1.** Create `_data/authors.yml` and add authors using the following format. Anything variables found under `author` in `_config.yml` can be used (e.g. `name`, `bio`, `avatar`, author `links`, etc.).
```yaml ```yaml
# /_data/authors.yml # /_data/authors.yml
Billy Rick: Billy Rick:
name : "Billy Rick" name : "Billy Rick"
uri: "http://thewhip.com"
email: "billy@rick.com"
bio : "What do you want, jewels? I am a very extravagant man." bio : "What do you want, jewels? I am a very extravagant man."
avatar : "/assets/images/bio-photo-2.jpg" avatar : "/assets/images/bio-photo-2.jpg"
twitter: "extravagantman" links:
- label: "Email"
icon: "fas fa-fw fa-envelope-square"
url: "mailto:billyrick@rick.com"
- label: "Website"
icon: "fas fa-fw fa-link"
url: "https://thewhip.com"
- label: "Twitter"
icon: "fab fa-fw fa-twitter-square"
url: "https://twitter.com/extravagantman"
Cornelius Fiddlebone: Cornelius Fiddlebone:
name : "Cornelius Fiddlebone" name : "Cornelius Fiddlebone"
email: "cornelius@thewhip.com"
bio : "I ordered what?" bio : "I ordered what?"
avatar : "/assets/images/bio-photo.jpg" avatar : "/assets/images/bio-photo.jpg"
twitter: "rhymeswithsackit" links:
- label: "Email"
icon: "fas fa-fw fa-envelope-square"
url: "mailto:cornelius@thewhip.com"
- label: "Twitter"
icon: "fab fa-fw fa-twitter-square"
url: "https://twitter.com/rhymeswithsackit"
``` ```
**Step 2.** Assign one of the authors in `authors.yml` to a post or page you wish to override the `site.author` with. **Step 2.** Assign one of the authors in `authors.yml` to a post or page you wish to override the `site.author` with.