hexo从零开始之butterfly主题美化(Ⅰ)

butterfly配置

安装butterfly主题

)1.在hexo项目根目录下执行操作clone主题

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

)2.如果没有pug以及stylus样式渲染器，还需要下载不然后报错

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

)3.修改项目根目录下的_config.yml文件，开启主题

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
#theme: landscape
theme: butterfly

创建文件夹

1).分类文件夹

hexo new page categories

可以在根目录的source/categories/index.md 文件。如果想直接在_posts创建自定义命名的的博客文件

hexo new 自定义名字

会现在在source/_posts/自定义名字.md
2).标签

hexo new page tags

会出现source/tags/index.md文件
以此类推创建自己要的子页面。例如‘关于’等导航条上的页面

修改副标题

修改文件 _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
  # 如果有英文逗号' , ',请使用转义字元 &#44;
  # 如果有英文双引号' " ',请使用转义字元 &quot;
  # 开头不允許转义字元，如需要，请把整個句子用双引号包住
  # 如果关闭打字效果，subtitle只会现示sub的第一行文字
  sub:
    - 学而不思则惘然，不学而思则空然
    - 选择从来多是多余的，路永远只有一条，人朝前，勇往前
    - 喝多了会哭，微醺才会笑

在\themes\butterfly\source\css\_layout中的head.styl

// 推荐在\themes\butterfly\source\css\_global中的index.styl中的:root中定义--light-subtitle-color: #f00 
  #site-subtitle
    //color: var(--light-grey)   //
    //color: red  // 修改后的代码 第一种方式直接修改
    color: var(--light-subtitle-color) // 第三种重新定义一个变量修改 字体大小也可如此
    font-size: 1.05em     // 字体大小
    +minWidth768()
    font-size: 1.40em   // 字体大小

1.如果你不想去找—light-grey的变量那么直接用方法一这样修改
2.如果你想去改它的变量值、在\themes\butterfly\source\css\_global中的index.styl中搜索

#--light-grey: $light-grey //修改前
 --light-grey: #f00 //修改后 第二种变量修改

但是不推荐这么做容易造成其它地方引入了变量—light-grey样式污染

图片配置

图片可以是云链接图片或者是放在本地的 /themes/butterfly/source/img下修改文件_config.butterfly.yml

disable_top_img: false #true表示不需要顶部的页面 / false表示需要

查看常用图片设置

可以用比特虫在线制作工具生成.ico的图片

img位置	修改地方	描述
网站图标	favicon: /img/favicon.png(本地)	如果要修改成网络中地址直接放 https://xxx/xxx
头像	avatar: img: /img/本地图片名字.jpg	`effect: false` #头像会一直转圈
背景图	background: /img/backgroundImg01.jpg	修改整个背景图的图片
主页封面	index_img: /img/backgroundImg01.jpg	指的首页的图片
文章详情页顶部img	default_top_img: /img/localhostImgName.jpg	当每个md页面没有设置top_img和cover时默认展示这个图片
归属页顶部img	archive_img: /img/archive.jpg	这个是导航条上归属页顶部图片
tag页	tag_img: /img/localhostImgName.jpg	注意：不要自己去配置这里指的的是自定tag页的顶部图片不是 tags页顶部图片
tag子页面	tag_per_img: tag子页面的名字: localhostImgName.jpg	这里要注意的是tag子页面下的顶部图片可以配置多条，每条多配置对应的名字
分类页	category_img: /img/localhostImgName.jpg	注意：不要自己去配置这里指的的是category页的顶部图片不是 category页顶部图片
分类子页面	category_per_img: category子页面的名字: localhostImgName.jpg	这里要注意的是category子页面下的顶部图片可以配置多条，每条多配置对应的名字

文章封面常用配置

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:
    - /img/tagImg1.jpg
    - /img/tagImg2.jpg
    - /img/tagImg3.jpg
    - /img/tagImg4.jpg
    - /img/tagImg5.jpg

字数统计

老版本自己去下载

npm install hexo-wordcount --save

在站点配置文件_config.yml或者在主题配置文件_config.butterfly.yml中配置

wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

在主题配置文件_config.butterfly.yml中配置

wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

页脚设置

展示你站点起始时间的选项。它位于页面的最底部。

# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2021
  custom_text: <a  href="https://beian.miit.gov.cn"><img  class="icp-icon"  src="/img/icp.png"><span>津ICP备2021000769号-2</span></a>
  copyright: true # Copyright of theme and framework

数学公式MathJax

mathjax 是一个开源的 web 数学公式渲染器，由 JS 编写而成，它提供的书写方式和 LaTeX 的书写方式一样
Hexo 默认的渲染引擎是 marked，但 marked 不支持 mathjax，所以需要更换渲染引擎为 hexo-renderer-kramed

npm uninstall hexo-renderer-marked --save # 卸载 marked
npm install hexo-renderer-kramed --save # 安装 kramed

停用 hexo-math 并安装 mathjax

npm uninstall hexo-math --save # 卸载 hexo-math  
npm install hexo-renderer-mathjax --save # 安装 mathjax

打开 /node_modules/hexo-renderer-kramed/lib/renderer.js，进行如下修改：

function formatText(text) {  
  // Fit kramed's rule: $$ + \1 + $$  
  // return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$'); 
  return text;
}

更新 Mathjax 配置文件，打开 /node_modules/hexo-renderer-mathjax/mathjax.html，将最后一行的 <script> 改为:`

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

更改默认转义规则，因为 LaTeX 与 markdown 语法有语义冲突，所以 hexo 默认的转义规则会将一些字符进行转义，我们需要对默认的规则进行修改。打开 \node_modules\kramed\lib\rules\inline.js ，将var inline = {} 中的属性 escape 和 em参数更改如下

escape: /^\\([`*\[\]()#$+\-.!_>])/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

开启 mathjax，打开主题的 _config.butterfly.yml ，检索 MathJax，将 enable 参数设置为 true

# MathJax  
mathjax:  
  enable: true  
  per_page: false

配置成功后，需要渲染的文章开头，添加参数 mathjax: true 即可。

---
 title: Hello World
 mathjax: true //添加这个
---

$f(n)=\begin{cases} n/2, & \text{如果$ x<=2 $}\\ 3n+1, & \text{如果$ x>2 $} \end{cases}$

注意：用这个数学公式必须要在外面先写一层这个包裹 $$$ $$$

常用语法入口

$$ 
  f(n)=\begin{cases}
  n/2, & \text{如果$ x<=2 $}\\
  3n+1, & \text{如果$ x>2 $}
  \end{cases}
$$

文章设置

文章版本附带设置

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

在文章页，会有一个目录，用于显示TOC。

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

主题会优先判断文章Markdown的Front-matter是否有配置，如有，则以Front-matter的配置为准。否则，以主题配置文件中的配置为准

# Sponsor/reward 文章打赏
reward:
  enable: false
  QR_code:
    # - img: /img/wechat.jpg #打赏展示图片
    #   link:  #支付链接
    #   text: wechat  #展示文字
    # - img: /img/alipay.jpg
    #   link:
    #   text: alipay

# post_pagination (分頁)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post （1）表示下一篇文章”将链接到旧文章
# 2: The 'next post' will link to new post （2）表示下一篇文章”将链接到新文章
# false: disable pagination  false：禁用分页
post_pagination: 2

文章分享三选一

# 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

在 head 里添加一些meta资料，例如缩略图、标题、时间等。当分享网页到一些平台时，平台会读取 Open Graph 的内容，展示缩略图，标题信息等等

Open_Graph_meta:
  enable: true
  option:
    # twitter_card:
    twitter_image: /img/blogLog.png #图片路径
    # twitter_id:
    # twitter_site:
    # google_plus:
    # fb_admins:
    # fb_app_id:

代码设置

代码设置详情

代码的主题

Butterfly支持6种代码高亮样式：darker、pale night、light、ocean、mac、mac light

highlight_theme:  light

代码是否可以复制

highlight_copy:  true

代码展开关闭

highlight_shrink:  true  
# true 代码框不展开，需点击>打开; 
# false 代码框展开，有>点击按钮
# none 不显示>按钮

代码高度限制

highlight_height_limit:  false  # unit: px 直接添加数字，如200 
# false 表示不限制
# 设置数值 超出的数值部分会隐藏，并显示展开按钮。

生成唯一链接的二种方式

解决当文章以中文为链接时无法访问问题

查看hexo-abbrlink方法

1.在根目录下安装如下插件

npm install hexo-abbrlink --save

2.站点配置文件中的_config.yml修改:

# permalink: :year/:month/:day/:title/
permalink: post/:abbrlink.html  # post 是自定义的前缀 这里是为了生成的文章链接不会因为有中文而访问不到
abbrlink:
    alg: crc32   #算法： crc16(default) and crc32 默认16位
    rep: hex     #进制： dec(default) and hex 默认dec进制
    allow: ['post','school','cpp',"java","blog"] #允许的模板类型.默认为["post"]
    disallow: [] #不允许的模板类型，默认为空列表

然后会在每个对应的文章开头生成一个 abbrlink: 随机的值
链接形式就是 http://自己的域名/post/xxxxx;

不推荐 permalink: post/:abbrlink.html
推荐 permalink: post/:abbrlink/
具体原因→hexo之踩坑记录一

查看hexo-uuid的配置

1.在根目录下安装如下插件

npm install hexo-uuid --save

2.站点配置文件中的_config.yml修改:

permalink: post/:abbrlink.html  # post 是自定义的前缀 这里是为了生成的文章链接不会因为有中文而访问不到

然后会在每个对应的文章开头生成一个uuid: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx

所以只要在站点文件_config.yml配置它的permalink就行了

文章跳转设置

1.文章内跳转配置,在hexo中内置了标签插件#,使用方法如下

描点[文章内跳转](/本文的目录/xxxx/#目标位置)
目标位置<span id="目标位置"></span>

我要跳到本页面的创建文件夹位置

[我要跳到第二个创建文件](/post/ae01190e/#创建文件夹)

2.在不同文章跳转

$\color{blue}{2.1 用内置标签插件不开页面跳转}$

在hexo内置了标签插件 $\color{red}{\{\% post\_path \%\}}$ ,方法如下

{% post_path 要跳转文章md文件名  %}

$\color{red}{注意}$ :必须是已有的md文件名
我要跳到hello-world页

[我要在本站内跳到hello-world页]({% post_path hello-world %})

$\color{blue}{2.2用markdown自带语法跳转方法如下}$

我要跳hello-world页

# [我要跳hello-world页](页面的http地址)
[我要跳到hello-world页](https://shumoyun.netlify.app/post/4a17b156/)