hexo博客搭建&美化教程

博客搭建

本网站是用Hexo + GitHub部署的，用的是butterfly主题

优点：完全免费（所以我才用的这个🤣)，静态站点，轻量快速，可按需求自由定制改造；托管在 GitHub，安全省心；迁移方便……

不足：发文不便，依赖本地环境；更适合个人博客使用(其实也还好，写文章得用markdown语法，不会也没关系，有Typora编辑器就行)

按照上面的教程搭建就行，大致是让你配置node.js,git,然后安装Hexo ,更换butterfly主题,再部署到 github上

各种教程都让你用git bash打开你的blog文件夹，但现在powershell也可以（至少我的电脑上能这样用）

基本命令

预览：

hexo s: 实现”预览” 。启动一个本地的 Web 服务器（http://localhost:4000/），让你预览在Hexo 项目中编辑的内容，CTRL+C推出这个功能

三剑客（每次改动都要执行这3个命令重新部署网站）：

1
2
3

hexo clean
hexo g
hexo d

写博客：

hexo new post 博客名：生成一个md文件在blog\source\posts文件夹中，然后你在这个md中写文章就行，写完再执行一遍三剑客就OK了

具体搭建的话看上面的教程就够了，挺详细的

开始美化

butterfly主题的初步美化，你们可以看看作者的文档https://butterfly.js.org/

我设博客目录路径为\blog,以下不赘述,以下两个文件很重要！！！
修改站点配置文件为_config.yml，路径为blog\_config.yml
修改主题配置文件为_config.butterfly.yml，路径为blog\_config.butterfly.yml

Front-matter

Front-matter 是 markdown 文件最上方以---分隔的区域，就是你的文章正文上面的部分，用于配置文章。

如果标注可选的参数，可根据自己需要添加，不用全部都写

Page Front-matter：

写法	解释
title	【必需】页面标题
date	【必需】页面创建日期
type	【必需】标籤、分类和友情链接三个页面需要配置
updated	【可选】页面更新日期
description	【可选】页面描述
keywords	【可选】页面关键字
comments	【可选】显示页面评论模块(默认 true)
top_img	【可选】页面顶部图片
mathjax	【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
kates	【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aside	【可选】显示侧边栏 (默认 true)
aplayer	【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐配置
highlight_shrink	【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)

网站资料

修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改站点配置文件_config.yml。部分参数如下，详细参数可参考官方的配置描述。

参数	描述
title	网站标题
subtitle	描述
description	网站描述
keywords	网站的关键词。支持多个关键词
author	你的名字
language	网站使用的语言，默认语言是 en ，我们可以设成zh-CN (简体中文)
timezone	网站时区。Hexo 默认使用您电脑的时区。请参考时区列表进行设置，如 America/New_York, Japan, 和 UTC

头像

找到avater，把img设置成你自己的头像

1
2
3

avatar:
  img: /assets/head.jpg
  effect: false # true则会一直转圈

背景

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

1
2
3

yml
# 图片格式 url(http://xxxxxx.com/xxx.jpg)
background: url(https://啥啥啥/img/dm1.png)

如果你的网站根目录不是'/'，使用本地图片时，需加上你的根目录。
例如：网站是 https://yoursite.com/blog，引用一张img/xx.png图片，则设置background为 url(/blog/img/xx.png)

导航菜单栏

修改主题配置文件_config.butterfly.yml，文字可自行更改，中英文都可以

yml
menu:
  Home: / || fas fa-home
  Archives: /archives/ || fas fa-archive
  Tags: /tags/ || fas fa-tags
  Categories: /categories/ || fas fa-folder-open
  List||fas fa-list:
    Music: /music/ || fas fa-music
    Movie: /movies/ || fas fa-video
  Link: /link/ || fas fa-link
  About: /about/ || fas fa-heart

必须是 /xxx/，后面||分开，然后写图标名，如果不想显示图标，图标名可不写
可以直接在子目录里添加 hide 隐藏子目录，如下面的List

yml
menu:
  Home: / || fas fa-home
  Archives: /archives/ || fas fa-archive
  Tags: /tags/ || fas fa-tags
  Categories: /categories/ || fas fa-folder-open
  List||fas fa-list||hide:
   Music: /music/ || fas fa-music
    Movie: /movies/ || fas fa-video
  Link: /link/ || fas fa-link
  About: /about/ || fas fa-heart

顶部图

修改主题配置文件_config.butterfly.yml，如果不要显示顶部图，可直接配置 disable_top_img: true。

配置	解释
index_img	主页的 top_img
default_top_img	默认的 top_img，当页面的 top_img 没有配置时，会显示 default_top_img
archive_img	归档页面的 top_img
tag_img	tag子页面的默认 top_img
tag_per_img	tag子页面的 top_img，可配置每个 tag 的 top_img
category_img	category 子页面的默认 top_img
category_per_img	category 子页面的 top_img，可配置每个 category 的 top_img

其它页面（tags/categories等自建页面）和文章页的top_img，请到对应的 md 页面设置front-matter中的top_img。

文章设置

封面与置顶

你可以直接在文章的front-matter区域里添加sticky: 1属性来把这篇文章置顶。数值越大，置顶的优先级越大。

文章的markdown文档上，在Front-matter添加cover，并填上要显示的图片地址。如果不配置cover，可以设置显示默认的cover；如果不想在首页显示cover，可以设置为false。
修改主题配置文件_config.butterfly.yml。

yml
cover:
  # 是否显示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 封面显示的位置
  # 三个值可配置 left , right , both
  position: both
  # 当没有设置cover时，默认的封面显示
  default_cover:

当配置多张图片时，会随机选择一张作为cover，此时写法应为：

yml
default_cover:
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg2.png
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg3.png

文章相关信息显示

post_meta这个属性用于显示文章的相关信息的，修改主题配置文件_config.butterfly.yml。

yml
post_meta:
  page:
    date_type: both # created or updated or both 主页文章日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是相对日期
    categories: true # true or false 主页是否显示分类
    tags: true # true or false 主页是否显示标签
    label: true # true or false 显示描述性文字
  post:
    date_type: both # created or updated or both 文章页日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是相对日期
    categories: true # true or false 文章页是否显示分类
    tags: true # true or false 文章页是否显示标签
    label: true # true or false 显示描述性文字

文章版权和协议许可

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

yml
post_copyright:
  enable: true
  decode: false
  author_href:
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

可以对单独文章设置版权信息，可以在文章Front-matter单独设置。

markdown
post_copyright:
copyright_author: xxxx
copyright_author_href: https://xxxxxx.com
copyright_url: https://xxxxxx.com
copyright_info: 此文章版权归xxxxx所有，如有转载，请註明来自原作者

文章打赏

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

yml
reward:
  enable: false
  QR_code:
    - img: /img/wechat.jpg
      link:
      text: wechat
    - img: /img/alipay.jpg
      link:
      text: alipay

文章目录TOC

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

yml
toc:
  post: true # 文章页是否显示 TOC
  page: false # 普通页面是否显示 TOC
  number: true	 # 是否显示章节数
  expand: false	# 是否展开 TOC
  style_simple: false # for post 简洁模式（侧边栏只显示 TOC, 只对文章页有效 ）

本地搜索导航栏

安装依赖：前往博客根目录，打开cmd命令窗口执行npm install hexo-generator-search --save。
1
2
plaintext
npm install hexo-generator-search --save
注入配置：修改站点配置文件_config.yml，添加如下代码：
1
2
3
4
5
yml
search:
path: search.xml
field: post
content: true
主题中开启搜索：在主题配置文件_config.butterfly.yml中修改以下内容：
1
2
3
4
diff
local_search:
- enable: false
+ enable: true
重新编译运行，即可看到效果：前往博客根目录，打开cmd命令窗口依次执行如下命令：
1
2
3
shell
hexo cl && hexo generate
hexo s -p 8000
详情可参考 hexo-generator-search

要去吃晚饭了，本来想取名魔改的，但目前分享的都比较普通，还是称之为美化好了，今天下午看了周扬和李偲菘李伟菘老师的直播访谈，就分享首燕姿的歌好了，《我不难过》，昨天看演唱会视频燕姿唱这首的时候下台和很多观众握手，羡慕了，可惜国内演唱会没这种条件，很经典很好听的歌，很纯粹很宝藏的灵魂，青山不改，细水长流，我们后会有期

hexo博客搭建&美化教程

博客搭建

教程推荐：

基本命令

开始美化

Front-matter

网站资料

头像

背景

导航菜单栏

顶部图

文章设置

封面与置顶

文章相关信息显示

文章版权和协议许可

文章打赏

文章目录TOC

相关文章推荐

本地搜索导航栏