hexo博客butterfly主题美化

博客代码展示

代码高亮样式
Butterfly 支持6种代码高亮样式:

  • default
  • darker
  • pale night
  • light
  • ocean
  • mac

只需要配置主题配置文件(配置butterfly.yml)
找到这一行highlight_theme: light然后进行将light更换成你喜欢的代码高亮格式就可以了,个人喜欢mac,样式如下:
hexo博客butterfly主题美化_第1张图片
代码展开和关闭

官方一共支持,这3中样式,

  • true 全部代码框不展开,需点击>打開
  • false 代码框展开,有>点击按钮
  • none 不展示>按钮

只需要配置主题配置文件(配置butterfly.yml)
找到这一行highlight_theme: false然后进行将false更换成你喜欢的的样式就可以了

代码复制按钮
只需要配置主题配置文件(配置butterfly.yml)
更改highlight_copy: true这一行就可以了,默认有复制按钮

代码换行

默认是不换行,如果你要想设置换行功能,可以
更改主题配置文件中的code_word_wrap: false,将false改成true

然后找到博客配置文件,將line_number改成false:

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

社交图标

  • Font-awesome图标的添加

打开主题的配置文件,进行对应位置的替换就可以啦

social:
  fa fa-github: https://github.com/jerryc127 || Github
  • 其他图标的添加

这里比较复杂,待补充,有兴趣可以参考这篇文章点击出发
文章封面
在我们文章的首页按照这个格式进行添加cover: xxxx其中xxxx是我们图片的链接
例如我的文章是这样的:

cover: https://s1.ax1x.com/2020/07/05/US3MkD.md.jpg

评论系统

打开主题的配置文件,将xxxx替换成你想要用的评论系统,接下来我给大家推荐两个评论系统.

  • 按照 Valine的教程配置一下LeanCloud应用.然后照着我的配置去配置一下,主要是添加appId和appKey
valine:
  appId: 替换成你的appId
  appKey: 替换成你的appKey
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: zh-CN/ # i18n: zh-CN/zh-TW/en/ja
  placeholder: 说些什么吧 # valine comment input placeholder(like: Please leave your footprints )
  guest_info: nick,mail,link #valine comment header info (nick/mail/link)
  recordIP: false # Record reviewer IP
  serverURLs: https://ophsiskh.lc-cn-n1-shared.com
  bg: # valine background
  emojiCDN: # emoji CDN
  enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
  requiredFields: nick,mail # required fields (nick/mail)
  • 注册來必力,注册账号,配置你自己的來必力设置,找到你的UID,最后模仿我的配置文件进行配置
    hexo博客butterfly主题美化_第2张图片
livere:
  uid: 你的uid

404页面

本主题内置了404页面,如果想打开只需要模仿我下面的主题配置文档即可

error_404:
  enable: true
  subtitle: 'Page Not Found'
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png

音乐界面

首先我们先安装一个插件,有了这个插件后我们才能进行获取歌单

1、 第一步安装 hexo-tag-aplayer:

npm install --save hexo-tag-aplayer

2、首先要在站点配置文件中开启meting模式,添加以下代码在配置文件的最后:

aplayer:
  meting: true

3、创建音乐界面
命令如下

hexo new page music

4、复制歌单的链接,然后复制歌单的id,例如 https://music.163.com/playlist?id=523845661&userid=46562117 ,这个歌单的id就是523845661,公司名可以是tencent、netease或是其他公司,打开/Hexo/source/playlist/index.md文件,
这里我用的是网易云,相同复制即可

在这里插入图片描述

输入:

{
     % meting "2627135799" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

这样歌单就创建完成啦~

添加静态链接

解决了博客链接过长的问题

安装步骤

  • 安装插件:
npm install hexo-abbrlink --save
  • 修改根目录下的config.yml文件中的permalink

修改后如下图所示

permalink: posts/:abbrlink/
abbrlink:
  alg: crc32  #support crc16(default) and crc32
  rep: hex    #support dec(default) and hex
  • 其他可选
crc16 & hex
crc16 & dec
crc32 & hex
crc32 & dec

因为你的文章目录结构已经改变,和之前的年月日文章路径产生冲突,所以你需要重新生成文章 hexo clean 和 hexo g,不然会报undefined 错

增加搜索功能

可以装插件,方法如下:

npm install hexo-generator-search --save

然后在编辑我们的butterfly.yml文件,打开本地搜索功能即可.

local_search:
  enable: true
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result

最后

博客地址:https://lannanhai.cn

你可能感兴趣的:(hexo,github,git,node.js,npm)