feat(sidebar): Add friends link in the side bar

[huanyushi]

Hello everyone, I'm here to share a customization to the sidebar - adding friend links.

How to achieve?

Add the following code to _includes/sidebar.html (before the button at the bottom of the sidebar.):

  <!-- friend links -->
  {% if site.data.friends %}
      {% include friends.html %}
  {% endif %}

Then create a new file _includes/friends.html:

<!-- friend links -->
<div class="friends">
     <hr style="border: 1px solid ">
    <p><i class="fas fa-user-friends"></i><span>FRIENDS</span></p>
    <ul>
      {% for friend in site.data.friends %}
      <li><a href="{{friend.href}}">{{friend.title}}</a></li>
      {% endfor %}
    </ul>
</div>

The relevant style design can be added to assets/css/jekyll-theme-chirpy.scss:

#sidebar .friends {
    padding-left: 2.5rem;
    padding-right: 1.25rem;
    width: 100%;
    margin-bottom: 1.5rem;
}
#sidebar .friends p {
    color: var(--site-subtitle-color);
    font-family: inherit;
    font-weight:600;
    font-size: 95%;
}
#sidebar .friends p i {
    opacity: 0.8;
    margin-right: 1.5rem;
}
#sidebar .friends p span {
    letter-spacing: 0.2px;
    opacity: 0.9;
}
#sidebar .friends ul {
    color:var(--site-subtitle-color);
    font-size:95%;
    opacity: 0.95;
    margin-bottom: 0rem;
}
#sidebar .friends ul li {
    margin-bottom: 0.4rem;
    opacity: 0.9;
}

Note that here I borrowed the color variable name from subtitle, of course, you can also define a new variable to control the color in light and dark modes.

Then you can add friend links in _data/friends.yml, e.g. :

  - title: "Title1"
    href: "https://example.com/"
  - title: "Title2"
    href: "https://example.com/"
  - title: "Title3"
    href: "https://example.com/"
  - title: "Title4"
    href: "https://example.com/"

Effect

See the following figures and my BLOG:

Note

This method is only suitable for adding a small number of friend links, otherwise, they will occupy space at the bottom buttons. If you need to add a large number of friend links, my suggestion is to create a new file "friends.md" in _tabs and place all the friend links there.

[steveng57]

This is super cool. Thanks for posting, I am going to use it in my site!

A few suggestions if I may to make it a bit better and more portable.

1. Consider putting the friends YAML data into it own file in the _data directory instead of putting it in _config.yml. _config.yml is for site configuration information, it is too easy to polute and overload _config.yml with stuff that is better placed elsewhere. Instead put it in a friends.yml file stored in your _data directory. The syntax of your code would be almost the same, you would just have to change references of site.friends to site.data.friends.

2. a minor nit, the YAML syntax you use for friends is valid but punctuation rich :-). instead you can just use, the more common syntax...

  - title: "Title1"
    href: "https://example.com/"
  - title: "Title2"
    href: "https://example.com/"
  - title: "Title3"
    href: "https://example.com/"
  - title: "Title4"
    href: "https://example.com/"

3. Put your code in its own file and put it in the _includes folder, maybe called friends.html. Then in sidebar.html just do an "include", like this
   {% include friends.html %}
   This way, you can keep your code mostly separate from the chirpy theme code, and when an update to chirpy is posted, instead of a bunch of lines to modify again, you only have one.

4. Put your outer div inside the {% if site.friends %} block. No need to generate a div if there are no friends.

5. Similar to 3, but for the CSS. Instead of putting it directly in jekyll-theme-chirpy.scss, put it in its own file then use a css include to bring it into the works. The include would go either in main.scss or jekyll-theme-chirpy.scss.

These changes will help make a good thing a bit better.

[huanyushi]

Thank you very much for your suggestions. As you suggested, I have made the modifications.

Similar to 3, but for the CSS. Instead of putting it directly in jekyll-theme-chirpy.scss, put it in its own file then use a css include to bring it into the works. The include would go either in main.scss or jekyll-theme-chirpy.scss.

The template css code is not included in assets/css/jekyll-theme-chirpy.scss, so I think it's OK to add our code to it.

Lastly, thank you once again for your suggestions. I'm not familiar with frontend, but I've learned a lot from your responses. Wishing you a wonderful day.