Butterfly 个性化配置教程

官方教程Butterfly 文档

1. 前言

Butterfly 是一款基于 Vue.js 和 Markdown 的静态博客生成器，以其简洁、灵活和强大的主题系统而受到许多开发者的喜爱。通过个性化配置，你可以轻松打造一个独一无二的个人博客或项目网站。本教程将带你一步步完成 Butterfly 的个性化配置。

2. 安装与初始化

2.1 安装 Hexo

Butterfly 是基于 Hexo 的主题，因此首先需要安装 Hexo。在终端中运行以下命令：

1
npm install -g hexo-cli

安装完成后，创建一个新的 Hexo 站点：

1
2
hexo init myblog
cd myblog

2.2 安装 Butterfly 主题

在站点目录下，运行以下命令安装 Butterfly 主题：

1
npm install hexo-theme-butterfly --save

安装完成后，修改 _config.yml 文件，将主题设置为 butterfly：

1
theme: butterfly

2.3 初始化主题配置

在站点根目录下，运行以下命令初始化 Butterfly 的配置文件：

1
hexo init-config

这将生成 _config.butterfly.yml 文件，用于后续的个性化配置。

3. 基础配置

3.1 站点信息

在 _config.yml 文件中，配置你的站点信息，例如：

1
2
3
4
5
6
title: 你的博客名称
subtitle: 你的副标题
description: 你的博客描述
author: 你的名字
language: zh-CN
timezone: Asia/Shanghai

3.2 主题配置

在 _config.butterfly.yml 文件中，你可以进行更详细的个性化配置。以下是一些常用配置：

3.2.1 网站标题和副标题

1
2
3
4
# 网站标题
title: 你的博客名称
# 网站副标题
subtitle: 你的副标题

3.2.2 网站图标

1
2
# 网站图标
favicon: /images/favicon.ico

3.2.3 菜单配置

1
2
3
4
5
6
# 菜单
menu:
  Home: /
  Archives: /archives/
  Tags: /tags/
  About: /about/

3.2.4 社交链接

1
2
3
4
5
# 社交链接
social:
  GitHub: https://github.com/your-github
  Twitter: https://twitter.com/your-twitter
  Weibo: https://weibo.com/your-weibo

4. 样式与布局

4.1 主题风格

Butterfly 提供多种主题风格，你可以在 _config.butterfly.yml 中选择自己喜欢的风格：

1
2
# 主题风格
theme_style: 'style1'

可选风格包括：

  • style1：默认风格
  • style2：深色风格
  • style3：浅色风格

4.2 布局调整

你可以通过 _config.butterfly.yml 文件调整页面布局，例如：

1
2
3
4
# 首页布局
index_layout: 'grid'
# 文章页面布局
post_layout: 'single'

4.3 自定义 CSS

如果你需要进一步自定义样式，可以在主题目录下的 source/css 文件夹中添加自定义的 CSS 文件，并在 _config.butterfly.yml 中引用：

1
2
# 自定义 CSS
custom_css: /css/custom.css

5. 功能配置

5.1 评论系统

Butterfly 支持多种评论系统，例如 Valine、Disqus 和 Gitalk。以下以 Valine 为例进行配置：

  1. 在 _config.butterfly.yml 中启用 Valine：
1
2
3
4
5
# Valine 配置
valine:
  enable: true
  app_id: 你的 Valine App ID
  app_key: 你的 Valine App Key
  1. 在文章页面中添加评论区域：
1
2
3
---
comments: true
---

5.2 搜索功能

Butterfly 内置了搜索功能，你只需要在 _config.butterfly.yml 中启用它：

1
2
3
# 搜索功能
search:
  enable: true

5.3 代码高亮

Butterfly 使用 Prism.js 进行代码高亮，你可以自定义代码高亮的样式：

1
2
3
4
# 代码高亮
prismjs:
  enable: true
  theme: 'default'

可选主题包括：

  • default：默认主题
  • okaidia：深色主题
  • twilight：浅色主题

6. 部署

6.1 本地预览

在终端中运行以下命令启动本地服务器：

1
hexo server

访问 http://localhost:4000 查看你的博客。

6.2 部署到 GitHub Pages

  1. 在 _config.yml 文件中配置部署信息：
1
2
3
4
deploy:
  type: git
  repo: https://github.com/your-github/your-repo.git
  branch: gh-pages
  1. 运行以下命令进行部署：
1
hexo deploy

7. 常见问题

7.1 如何添加自定义页面？

在站点根目录下运行以下命令创建自定义页面：

1
hexo new page "about"

然后在 _config.butterfly.yml 中添加菜单项：

1
2
menu:
  About: /about/

7.2 如何修改文章的日期格式？

在 _config.yml 文件中修改日期格式：

1
2
date_format: YYYY-MM-DD
time_format: HH:mm:ss