Hello! My blog!

本博客采用 hexo + github 的方式建立，采用了butterfly主题进行美化

本文记录博客的美化部分，搭建过程请看姊妹篇——hexo博客搭建

本文主要参考了：

csdn博客:hexo个人博客搭建（二）butterfly主题配置

butterfly官方文档:butterfly

安装butterfly

1.在git bash中clone butterfly主题：

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

如果沒有 pug以及 stylus 的渲染器，还需要下载，否则在项目运行时会报错：

npm install hexo-renderer-pug hexo-renderer-stylus --save

3.修改hexotest/_config.yml文件：

theme: butterfly

4.升级建议:

为了減少升级主题带来的不便，我们还需要做以下操作：
把hexotest/theme/butterfly/ _config.yml 复制到 hexotest目录下，同重命名为_config.butterfly.yml

Hexo会自动合并主题中的_config.yml和 _config.butterfly.yml里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。

配置butterfly

设置网站个人配置

修改hexotest/_config.yml文件，自己发挥吧！

# Site
title: lxh0510						#网站标题（选个酷的！）
subtitle: ''						#副标题
description: ''						#个性签名
keywords:
author: Xinhao Liu					#作者
language: zh-CN						#语言（简体中文）
timezone: Asia/Shanghai				#中国时区

导航菜单

修改hexotest/_config.butterfly.yml文件

menu:
  主页: / || fas fa-home
  分类: /categories/ || fa fa-archive
  标签: /tags/ || fa fa-tags
  归档: /archives/ || fa fa-folder-open
  关于笔者: /about/ || fas fa-heart

每个导航页也可以有副导航页，以及各种各样的导航栏类型，详情请见官方文档，为了简洁好看，我的导航栏暂时设置为这样

效果图：

代码块显示设置

先修改hexotest/_config.butterfly.yml文件

# Code Blocks (代码块样式)
# --------------------------------------
highlight_theme: mac #  darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button 是否显示复制按钮
highlight_lang: true # show the code language 展示代码块语言
highlight_shrink: false # true: 打开文章默认折叠代码块内容 / false: 打开文章默认展开代码块内容
highlight_height_limit: false # unit: px
code_word_wrap: true #是否关闭滚动条

再修改hexotest/_config.yml文件:将line_number的值改为false

highlight:
  enable: true
  line_number: false 
  auto_detect: false
  tab_replace: ''

本地搜索功能

1、安装插件

npm install hexo-generator-search --save

2、主题配置文件 _config.butterfly.yml：

# Local search
local_search:
  enable: true
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显示

效果图：

创建文件夹

分类：

hexo new page categories

会出现hexotest/source/categories/index.md文件

标签：

hexo new page tags

会出现hexotest/source/categories/index.md文件

…以此类推创建自己要的子页面，如about（关于笔者）….等

修改副标题

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

# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (开启打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體）
  # source: 2  調用一言網的一句話（簡體）
  # source: 3  調用一句網（簡體）
  # source: 4  調用今日詩詞（簡體）
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗号' , ',请使用转义字元 ,
  # 如果有英文双引号' " ',请使用转义字元 "
  # 开头不允許转义字元，如需要，请把整個句子用双引号包住
  # 如果关闭打字效果，subtitle只会现示sub的第一行文字
  sub:
    - In me the tiger sniffs the rose
    - By Xinhao Liu

2.在\themes\butterfly\source\css_layout中的head.styl:

#site-subtitle
    color: var(--white)   
    font-size: 1.05em     
    +minWidth768()
    font-size: 1.40em

效果图：

图片设置

网页相关图片

图片可以存放在hexotest/themes/butterfly/source/img文件夹中，方便应用

# Favicon（網站圖標）
favicon: /img/logo.jpg

# Avatar (頭像)
avatar:
  img: img/avatar.jpg
  effect: false

# The banner image of home page
index_img: /img/background.jpg

# If the banner of page not setting, it will show the top_img
default_top_img: img/article.jpg

# The banner image of archive page
archive_img: img/article.jpg

# If the banner of tag page not setting, it will show the top_img
# note: tag page, not tags page (子標籤頁面的 top_img)
tag_img: img/article.jpg

# If the banner of category page not setting, it will show the top_img
# note: category page, not categories page (子分類頁面的 top_img)
category_img: img/article.jpg

!tips:想必一定有选择恐惧症的小伙伴们吧！推荐下面的网址：极简壁纸，在这里挑喜欢的图片就好啦

文章封面

每篇文章可以统一设置默认文章封面，也可以单独设置一张封面（通过设置每篇文章md文件的cover属性，会覆盖上述默认封面）

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

cover:
  # display the cover or not (是否顯示文章封面)
  index_enable: true
  aside_enable: true
  archives_enable: true
  # the position of cover in home page (封面顯示的位置)
  # left/right/both
  position: both
  # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
  default_cover:
    # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

错误页面

# Replace Broken Images (替換無法顯示的圖片)
error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg

图片懒加载

1.安装hexo-lazyload-image插件

npm install hexo-lazyload-image --save

2.修改主题配置文件 _config.yml：

lazyload:
  enable: true
  loadingImg: /img/loading.gif

图片大图查看

修改主题配置文件_config.butterfly.yml：(两种形式选一)

# Lightbox (圖片大圖查看模式)
# --------------------------------------
# You can only choose one, or neither (只能選擇一個 或者 兩個都不選)

# medium-zoom
# https://github.com/francoischalifour/medium-zoom
medium_zoom: false

# fancybox
# http://fancyapps.com/fancybox/3/
fancybox: true

文章页设置

以下设置均需修改主题配置文件_config.butterfly.yml：

复制的内容后加上版权信息

# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:
  enable: true # 是否开启网站复制权限
  copyright:  # 复制的内容后面加上版权信息
    enable: false  # 是否开启复制版权信息添加
    limit_count: 50 # 字数限制，当复制文字大于这个字数限制时

文章版权信息显示

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

效果图：

相关文章

# Related Articles
related_post:
  enable: true
  limit: 6 # Number of posts displayed
  date_type: created # or created or updated 文章日期顯示創建日或者更新日

效果图：

侧边栏设置

以下设置均需修改主题配置文件_config.butterfly.yml：

调整侧边栏出现位置

aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or right

个人信息

card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/xxx

# social settings (社交圖標設置)   即下面两个小图标
# formal:
#   icon: link || the description
social:
  fab fa-github: https://github.com/xxxxx || Github
  fas fa-envelope: mailto:xxxx@xxx.com || Email

效果图

公告栏设置

card_announcement:
    enable: true
    content: This is my Blog #修改公告栏信息

目录栏设置

# toc (目錄)
toc:
  post: true
  page: false
  number: true
  expand: false
  style_simple: false # for post
  scroll_percent: true

效果图：

特效&&美化

以下均修改主题配置文件 _config.butterfly.yml即可

butterfly主题提供了多种特效及美化方式，如鼠标点击效果、打字效果、自定义背景及主题色、背景特效（彩带或星空特效）等，但笔者个人觉得加上反而破坏了简洁的美，便未设置，如需设置，请看官网文档：butterfly

字数统计

1.在git bash 中安装插件hexo-wordcount：

npm install hexo-wordcount --save

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

# wordcount (字數統計)
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

效果图：

文章分享功能

修改主题配置文件 _config.butterfly.yml，以下addThis、sharejs、addtoany三个选一个开启：

# Share System (分享功能)
# --------------------------------------

# AddThis
# https://www.addthis.com/
addThis:
  enable: false
  pubid:  #访问 AddThis 官网, 找到你的 pub-id

# Share.js
# https://github.com/overtrue/share.js
sharejs:
  enable: true  #我开启的
  sites: facebook,twitter,wechat,weibo,qq  #想要显示的内容

# AddToAny
# https://www.addtoany.com/
addtoany:
  enable: false
  item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

扩展配置

静态资源压缩

博客中有大量 HTML、CSS、JS 文件，这些文件为了阅读方便会加入许多回车和空行，但在页面解析时其实会浪费部分时间，此外如果有许多插图，也会拖慢网页加载，并占据 GitHub 仓库的存储空间。

因此对资源进行压缩，可以节省我们的存储空间，同时也可以加快加载速度，相关插件有：gulp、hexo-neat、hexo-all-minifier等，这里笔者采用了hexo-neat：

1.安装插件：

$ npm install hexo-neat --save

2.之后在配置文件_config.yml末尾添加如下内容：

# hexo-neat
## Docs: https://github.com/rozbo/hexo-neat
neat_enable: true
# 压缩 html
neat_html:
  enable: true
  exclude:
# 压缩 css  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩 js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'

添加评论系统

本博客采用了valine评论系统：Valine 诞生于2017年8月7日，是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。理论上支持但不限于静态博客，目前已有Hexo、Jekyll、Typecho、Hugo、Ghost、Docsify 等博客和文档程序在使用Valine。

官网：valine

设置步骤如下：

1.注册leancloud账号，进入控制台后点击左下角创建应用，获取APP ID与APP key

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

首先修改comments配置，指明使用valine系统：

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  use: Valine
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true
  count: true # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page

然后修改下面的valine配置，填入APP ID与APP key：

valine:
  appId: xxxx          #从leancloud官网获得
  appKey: xxxx		   #从leancloud官网获得	
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  visitor: false
  option:

这样就设置完毕啦！

**tips:**上述方法设置评论会在每个md文件下的网页附上评论区，如果某些文章不想要评论区功能，可以在文章上方布局中修改：

comments:false

一些小问题

图片懒加载相关问题

在编写博客时，遇到了这样一个bug:

网站开启图片懒加载后，首次加载页面图片不显示，但是刷新一次后会显示。

解决方法：
修改主题配置文件 _config.yml，找到lazyload配置，添上isSPA: true字段即可。

lazyload:
  enable: true
  loadingImg: img/loading.gif
  isSPA: true

isSPA:

  • true：针对单页面应用，当滚动条滚动到图片位置时就会向后端请求图片
  • false：刷新才能请求图片

路径优化

Hexo 博客默认的文章路径是 域名/年/月/日/文章标题，平时查阅也很困难，因此需要优化文章的 URL 路径。

解决方法：
修改主题配置文件 _config.yml，找到 permalink 项，将 :year/:month/:day/:title/ 修改为 :name.html，就可以用 域名/文章标题 访问了。

此外，还可以将下方的 pretty_url 项中的两个 true 改为 false 用于美化 URL，两项分别是去除连接中的后缀 index.html 和 .html 的。

permalink: :name.html
permalink_defaults:
pretty_urls:
  trailing_index: false # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: false # Set to false to remove trailing '.html' from permalinks

后续：！把这个路径改了之后，图片显示不出来了，等后续优化！