教程指南

Jekyll 博客优化指南：功能增强与用户体验改进

前言

在使用 Jekyll 搭建博客的过程中，经常需要添加一些基础功能和改进用户体验。本文记录了几个常用的优化配置，包括：

1. 功能增强：搜索和订阅功能
2. 布局优化：移动端适配
3. 文档规范：统一的排版标准
4. 性能优化：加载速度优化

目录

1. 功能增强
   • 添加搜索功能
   • 配置 RSS 订阅
2. 布局优化
   • 响应式设计
   • 侧边栏实现
3. 文档规范
   • 中文排版规范
   • 文件命名规范
4. 性能优化
   • Jekyll 配置优化

功能增强

1. 添加搜索功能

目的：

• 在文章数量较多时，快速定位特定文章
• 按关键词查找相关内容
• 减少用户翻页次数

方案选择：

• Algolia Search：第三方搜索服务，每月有 10000 次免费搜索额度
• Simple Jekyll Search：生成 JSON 索引文件，前端 JavaScript 实现搜索
• Lunr.js：纯前端搜索，支持中文分词，适合小型博客

这里选择 Algolia Search 的原因：

• 搜索速度快，支持实时搜索
• 自带分词功能，支持中文搜索
• 有开箱即用的 UI 组件
• 配置简单，维护成本低

实现步骤：

1. 安装依赖：

# 在 Gemfile 中添加
gem 'jekyll-algolia'

# 安装依赖
bundle install

1. 配置 _config.yml：

# 添加 Algolia 搜索配置
algolia:
  application_id: YOUR_APP_ID
  index_name: YOUR_INDEX_NAME
  search_only_api_key: YOUR_SEARCH_KEY

1. 创建搜索页面 search.html：

---
layout: page
title: 搜索
---
<div id="search-searchbar"></div>
<div id="search-hits"></div>

2. 配置 RSS 订阅

目的：

• 让用户通过 RSS 阅读器订阅博客更新
• 支持文章聚合到其他平台
• 提供标准的文章输出格式

方案选择：

• Jekyll Feed：Jekyll 官方插件，输出标准 RSS 2.0 格式
• 自定义 RSS 模板：可以自定义输出格式，但需要自己维护

选择 Jekyll Feed 的原因：

• 配置简单，只需添加插件即可
• 自动处理文章更新
• 输出格式符合 RSS 标准

实现步骤：

1. 安装插件：

# 在 Gemfile 中添加
gem 'jekyll-feed'

# 安装依赖
bundle install

1. 更新 _config.yml：

plugins:
  - jekyll-feed

# RSS 配置
feed:
  path: feed.xml
  posts_limit: 20

布局优化

1. 响应式设计

目的：

• 适配手机和平板等移动设备
• 确保文章在小屏幕上也能正常阅读
• 减少横向滚动

方案说明：

• 设置 viewport 确保正确缩放
• 使用相对单位适配不同屏幕
• 在小屏幕上调整导航栏和侧边栏位置

实现步骤：

1. 在 _sass 目录下创建响应式样式文件：

// _sass/_responsive.scss
@media screen and (max-width: 768px) {
  .container {
    padding: 0 15px;
  }
  
  .sidebar {
    width: 100%;
    margin-top: 20px;
  }
}

1. 引入样式文件：

// assets/css/style.scss
@import "responsive";

2. 侧边栏实现

目的：

• 展示文章归档，方便按时间浏览
• 显示文章分类，便于主题浏览
• 在合适位置展示其他导航信息

方案说明：

• 使用 Liquid 模板语言处理数据
• 文章按年份分组归档
• 移动端时调整位置到主内容下方

实现步骤：

1. 创建 _includes/sidebar.html：

<div class="sidebar">
  <h2>归档</h2>
  {% assign postsByYear = site.posts | group_by_exp:"post", "post.date | date: '%Y'" %}
  
  <ul class="archive-list">
    {% for year in postsByYear %}
      <li>
        <span class="year"></span>
        <span class="count">()</span>
      </li>
    {% endfor %}
  </ul>
</div>

1. 在布局文件中引入侧边栏：

<!-- _layouts/default.html -->
<div class="container">
  <div class="content">
    {{ content }}
  </div>
  {% include sidebar.html %}
</div>

文档规范

1. 中文排版规范

目的：

• 统一全站的排版风格
• 提高中英文混排的可读性
• 便于后期维护和修改

规范要点：

1. 在 Markdown 文件中遵循以下规则：

• 中英文之间添加空格：在 GitHub 上开发程序
• 使用全角中文标点：下载源码，开始编码。
• 使用半角数字：共发布了 10 篇文章

1. 统一日期格式：

{{ post.date | date: "%Y年%-m月%-d日" }}

2. 文件命名规范

目的：

• 统一文件命名方式
• 避免文件名冲突
• 方便文件管理和查找

规范说明：

• 文章文件：YYYY-MM-DD-title-with-hyphen.md
• 页面文件：lowercase-with-hyphen.md
• 样式文件：_component-name.scss

性能优化

1. Jekyll 配置优化

目的：

• 减少站点构建时间
• 减少不必要的文件生成
• 优化资源文件大小

优化方案：

• 使用增量构建减少构建时间
• 排除不需要处理的文件
• 压缩图片等静态资源

实现步骤：

1. 更新 _config.yml：

# 提升构建性能
incremental: true
profile: true

# 排除不需要的文件
exclude:
  - Gemfile
  - Gemfile.lock
  - node_modules
  - vendor

1. 优化图片资源：

# 安装图片优化工具
npm install -g imagemin-cli

# 优化图片
imagemin images/* --out-dir=images/optimized

总结

完成以上配置后，博客将具备：

1. 文章搜索和 RSS 订阅功能
2. 移动端适配和侧边栏导航
3. 统一的文档规范
4. 更快的加载速度

根据实际需求，可以选择性地实施这些优化方案。

参考资源

• Jekyll 官方文档
• Algolia 搜索文档
• 中文文案排版指北
• Jekyll Feed 插件

优化 Jekyll 站点的导航菜单和分类系统

在建设个人博客网站时，良好的导航系统和清晰的内容分类对于提升用户体验至关重要。本文将介绍如何优化 Jekyll 站点的导航菜单和分类系统，让网站结构更加清晰、易用。

配置 Jekyll 站点

1. 修改主题

   1. 在 GitHub 上，导航到仓库

   2. 在仓库名称下，单击 Settings（设置）

   3. 在 Code and automation 节点，单击 Pages

   4. 在页面顶部单击所需的主题，然后单击 Select theme（选择主题）

Welcome to Jekyll!

You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.

Jekyll requires blog post files to be named according to the following format:

YEAR-MONTH-DAY-title.MARKUP

Where YEAR is a four-digit number, MONTH and DAY are both two-digit numbers, and MARKUP is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll also offers powerful support for code snippets:

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk.

在 GitHub Pages 上托管网站

你可以为一个 GitHub 账户托管一个站点，或者给每一个项目托管一个站点。

使用 GitHub 账户托管站点

1. 创建一个名为 “账户名.github.io“ 的仓库 Repository，其中”账户名“为 GitHub 的账户名或组织名称。例如：nesnilnehc.github.io

2. 下载 GitHub Desktop 工具，GitHub Desktop 兼容 Windows 和 macOS

3. 克隆仓库

4. 使用 Visual Studio Code 打开本地仓库目录，并创建一个 index.html 文件

   <!DOCTYPE html>
   <html>
   <body>
   <h1>Hello World</h1>
   <p>I'm hosted with GitHub Pages.</p>
   </body>
   </html>
   

5. 使用 GitHub Desktop 提交并发布

6. 通过 https://账户名.github.io 访问站点

参考

• GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.
• https://docs.github.com/cn/pages/setting-up-a-github-pages-site-with-jekyll/about-github-pages-and-jekyll#

如何使用 Jekyll 构建静态网站

必备环境

• Ruby 2.5.0+
• RubyGems
• GCC and Make

初始化

1. Windows 上安装 Jekyll
   1. 下载并安装 Ruby，https://rubyinstaller.org/downloads/

   # 检查 ruby 版本
   ruby -v
   

   1. 安装 jekyll 和 bundler gems

   gem install jekyll bundler
   

   1. 初始化网站

   jekyll new myblog
   

   1. 运行网站

   bundle add webrick
   bundle install
   bundle exec jekyll serve --trace
   

参考

• Jekyll Docs
• https://jekyllrb.com/docs/installation/windows/#installing-ruby-and-jekyll