Jekyll（五）. jekyll-theme-chirpy主题常用基础配置及侧边导航栏联系方式修改

最新推荐文章于 2024-06-05 09:38:59 发布

您的昵称是啥

最新推荐文章于 2024-06-05 09:38:59 发布

阅读量1k

点赞数

分类专栏： Jekyll自建博客文章标签： html github ruby

本文链接：https://blog.csdn.net/qq_36816662/article/details/128314721

版权

Jekyll自建博客专栏收录该内容

5 篇文章 4 订阅

订阅专栏

安装完Ruby环境以及Jekyll主题之后，将fork到的主题根据自身情况进行个性化定制，例如此博客源主题地址，本篇介绍下常用配置及更改侧边导航栏。

修改_config.yml配置文件

主要配置一些全局属性，包括lang（语言）,url（主页地址）,title（博客主标题）,avatar（设置头像地址）等等，都有相应的注释。

Jekyll的基本结构

先看一下整个博客的基本结构，下面为_layouts/default.html的代码，较为清晰，

---
layout: compress
# Default layout
---
<!DOCTYPE html>
{% include assets-origin.html %}

{% capture prefer_mode %}
  {% if site.theme_mode %}
    data-mode="{{ site.theme_mode }}"
  {% endif %}
{% endcapture %}

<!-- `site.alt_lang` can specify a language different from the UI -->
<html lang="{{ site.alt_lang | default: site.lang }}"{{ prefer_mode }}>

  {% include head.html %}

  <body data-spy="scroll" data-target="#toc" data-topbar-visible="true">

    {% include sidebar.html %}

    {% include topbar.html %}

    <div id="main-wrapper" class="d-flex justify-content-center">
      <div id="main" class="container pl-xl-4 pr-xl-4">
        {{ content }}
      </div>

      {% include search-results.html %}

    </div> <!-- #main-wrapper -->

    {% include footer.html %}

    {% if page.mermaid %}
      {% include mermaid.html %}
    {% endif %}

    <div id="mask"></div>

    <a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow" role="button">
      <i class="fas fa-angle-up"></i>
    </a>

    {% if site.pwa.enabled %}
      <div id="notification" class="toast" role="alert" aria-live="assertive" aria-atomic="true"
        data-animation="true" data-autohide="false">
        <div class="toast-header">
          <button type="button" class="ml-2 ml-auto close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="toast-body text-center pt-0">
          <p class="pl-2 pr-2 mb-3">{{ site.data.locales[site.lang].notification.update_found }}</p>
          <button type="button" class="btn btn-primary" aria-label="Update">
            {{ site.data.locales[site.lang].notification.update }}
          </button>
        </div>
      </div>
    {% endif %}

    {% include search-loader.html %}

    {% include js-selector.html %}

  </body>

</html>

Jekyll将整个博客的各个部分单独出来方便维护处理（比如侧栏导航，头部，尾部等），再在布局文件中将各部分拼合在一起，约定将模块化的html文件放在_includes文件夹下，通过 Liquid 的 include 指令引用模块到目标页面中。
在这里插入图片描述

页面通过include指令将模块拼合起来，而布局文件之间是有继承关系的，比如此博客的布局之间的继承关系如上图，这种继承关系是在头信息（Front Matter）中定义的，比如_layouts/page.html的头信息：

---
layout: default
---

然而放在_posts文件夹下的文章没有在头信息中指定使用layout布局，最后为什么会生成post为布局的最终文章呢？这得益于在_config.yml文件中的defaults头信息的默认配置：

defaults:
  - scope:
      path: ''          # 空值代表项目下的所有文件
      type: posts
    values:
      layout: post   #所有文件的默认layout为post

侧边导航（sidebar）联系方式更改

在_data\contact.yml文件中定义了有哪些联系方式的图标，在_includes\sidebar.html中的源码得知，通过遍历_data\contact.yml中的数组来获取展示图标，并且添加联系方式的地址。

{% for entry in site.data.contact %}
      {% capture url %}
        {%- if entry.type == 'github' -%}
          https://github.com/{{ site.github.username }}
        {%- elsif entry.type == 'twitter' -%}
          https://twitter.com/{{ site.twitter.username }}
        {%- elsif entry.type == 'email' -%}
          {% assign email = site.social.email | split: '@' %}
          javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
        {%- elsif entry.type == 'rss' -%}
          {{ "/feed.xml" | relative_url }}
        {%- else -%}
          {{ entry.url }}
        {%- endif -%}
      {% endcapture %}

      {% if url %}
      <a href="{{ url }}" aria-label="{{ entry.type }}"
        {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
        <i class="{{ entry.icon }}"></i>
      </a>
      {% endif %}

    {% endfor %}

在_data\contact.yml中得知icons powered by https://fontawesome.com/，在_data\assets\cross_origin.yml中得知使用的cdn为fontawesome: css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css ，由于5.11.1的版本较低，很多国内平台图标没有，可以改成较新的6.2.0版本。之后就可以在_data\contact.yml添加比如微博：

  -
  type: weibo
  icon: 'fab fa-weibo'

之后在_includes\sidebar.html修改代码添加微博的地址，并在_config.yml中添加微博的id，拼成微博的主页地址。

作者的更改

在文章开始部分显示的作者如何更改呢？头信息中定义了作者author: xxx，在post.html布局文件中看到显示作者的逻辑是如果头信息定义的author值，则去遍历_data/authors.yml中的作者对象数组，有则取到name及url，如果头信息没有定义author值，则去_config.yml配置文件中获取social中定义的联系方式。

如何将文章置顶

在头信息中加入pin: true。

该Jekyll主题的一些其他功能及配置在原作者的教程文章中有介绍，首页做了隐藏，可以在分类中的Blogging目录中找到，更多。

您的昵称是啥

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Jekyll（五）. jekyll-theme-chirpy主题常用基础配置及侧边导航栏联系方式修改

安装完Ruby环境以及Jekyll主题之后，将fork到的主题根据自身情况进行个性化定制，例如此博客源，本篇介绍下常用配置及更改侧边导航栏。
复制链接

扫一扫