一、hexo+butterfly博客设计

1.hexo搭建安装

安知鱼博主：

官方：

另一个博主：

店长：

2.hexo项目运行

1
2
3
4
hexo init
hexo clean
hexo g
hexo s
  • ==注意我的电脑4000端口被占用，所以我的运行指令是 hexo s -p 5000==

3.主题安装

官方的：

安知鱼博主的：

安知鱼魔改主题：

4.主题配置

  • 修改_config.yml文件
  • 修改主题配置文件_config.butterfly.yml

5.主题美化

  • 修改主题配置文件_config.butterfly.yml
  • 修改主题配置文件source/css/custom/custom.css

6.主题优化

  • 修改主题配置文件_config.butterfly.yml

7.自定义挂载容器

某个功能页面不想挂在首页，想挂在关于或者统计等页面，只需要做2步:
1、在对应页面创建一个DOM让插件有地方挂载，例如演示的就是在关于页面(/about/index.md)的文件中直接写入一个div块

<!-- GitCalendar容器 -->
<div id="gitZone"></div>

2、在对应配置项改为与你容器id以创建页面路径相关的（是改不是加!!!）

1
2
3
4
5
enable_page: /about/ # 应用页面(记住最后带/)
layout: # 挂载容器类型
  type: id
  name: gitZone
  index: 0

8.页面和文章页配置

Front-matter

Front-matter 是 markdown 文件最上方以 — 分隔的区域，用于指定个别档案的变数。

  • Page Front-matter 用于页面配置
  • Post Front-matter 用于文章页配置
Page Front-matter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
title: # 【必需】标题
date: # 【必需】建立日期
type: # 类型【必需】,标签、分类和友情链接三个页面需要配置
updated: # 更新日期
comments: # 是否开启评论
description: # 页面描述
keywords: # 页面关键词
top_img: # 页面顶部图
mathjax: # 是否开启数学公式,(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex: # 是否开启 katex, (当设置katex的per_page: false时，才需要配置，默认 false)
aside: # 是否开启侧边栏,(默认 true)
aplayer: # 是否开启音乐播放器
highlight_shrink: # 是否开启代码折叠
random: #配置友情链接是否随机排序（默认为 false)
Post Front-matter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
---
title:
date:
updated:
tags: #【可选】文章标签
categories: #【可选】文章分类
keywords: #【可选】文章关键字
description:
top_img:
comments:
cover: #【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空)
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
abcjs:
---

后续内容待更新…