hexo博客

发布日期: 2024-07-04

文章字数: 2.4k

阅读时长: 11 分

阅读次数:

butterfly 主题设置

先前准备使用matery主题, 设置评论的过程中总是开启失败, 所以切换了butterfly主题

主题来源

其他几款主题

安知鱼 https://docs.anheyu.com/initall.html
steller https://xaoxuu.com/wiki/stellar/
acorn https://acorn.imaging.xin/ hexo 企业站
Keep https://github.com/XPoet/hexo-theme-keep 大气简单可以试试
solitude https://github.com/everfu/hexo-theme-solitude 和安知鱼有点像
maupassant https://github.com/tufu9441/maupassant-hexo 像故事集一样主题
MengD https://github.com/lete114/hexo-theme-MengD 和上面一个风格过之不及
fluid https://github.com/fluid-dev/hexo-theme-fluid 没具体看不过用的人也挺多

本博客将会同步到 hexo2source 仓库

资料准备

Hexo 官方中文文档
https://hexo.io/zh-cn/docs/configuration

butterfly官方文档设置教程
https://butterfly.js.org/

Github 项目地址
https://github.com/jerryc127/butterfly.js.org

主题开发者适配的插件
https://github.com/jerryc127/butterfly-plugins

魔改教程

https://butterfly.zhheo.com/

主题安装

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

安装主题依赖

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

个人常用配置

个人Front-matter配置

例如本文的配置
title: butterfly主题设置
description: hexo+butterfly搭建教程 转自https://winward-king.github.io/tags/hexo/
date: 2024-07-04 18:05:58
tags: hexo博客
categories: hexo博客
series: hexo博客   #系列文章设置
sticky: 100  数越大.文章越靠前

设置代码格式

highlight_height_limit: 400 # unit: px  default :highlight_height_limit: false
code_word_wrap: true

添加默认大图

default_top_img: /images/back-title.jpg  配置随机图片地址  或则 default_cover_img 数组 可以实现图片随机

调整侧边栏

_config.yml
aside: 关闭公告页面

设置页面直接编辑

post_edit:
  enable: true
  url: https://github.com/liudongsir/hexo2source/tree/master/source/

页面虽然可以直接编辑但是图片在线上路径错误.寻找新的图片插件解决下

文章置顶

主题自带了hexo-generator-index 置顶插件,在Front-matter中配置 sticky: 1 数字大靠前。

插件安装

官方插件库 https://hexo.io/plugins/

增加git部署插件
```
npm install hexo-deployer-git --save
```

增加本地搜索

npm install hexo-generator-searchdb --save

增加字数统计插件
```
npm i --save hexo-wordcount
```
增加短链插件
```
npm install hexo-abbrlink --save

_config.yml
permalink: posts/:abbrlink/
```
引入插件后会在 Front-matter 中添加字段 abbrlink,

连接永久有效,除非你自己改动文件 abbrlink

下面的插件不是必须安装

hexo-daily-news

早报 https://github.com/Shiguang-coding/hexo-daily-news

https://v2.alapi.cn/api/zaobao?token=eFiWkgTzAipWiPru&format=image 直接请求即可

cnpm install hexo-daily-news –save


- ##### hexo-dynamic-config

> 配置环境变量的插件

- ##### hexo-generator-readme-file

> 为你的文章生成一个 `README.md` 文件，里面包含了所有的文章链接。
>
> 可以用来制作 章节目录
>
> 另外可以利用 series 制作章节目录
>
> 另有插件 hexo-generator-readme 使用报错

- ##### hexo-generator-random

> 随机文章访问插件

- ##### hexo-image-link





### 优化

##### 	使用 Front-matter  series 属性

在项目中使用 {% series %} 做系列导航页.


##### 404页面添加随机图片

error_404:
enable: true
subtitle: ‘Page Not Found’
background: https://cdn.seovx.com/?mom=302


> 图片地址是来源于 [https://weblog.lixiaomu.fun/posts/d55a4b452f7a/](https://weblog.lixiaomu.fun/posts/d55a4b452f7a/)
>
> [福利](https://www.seovx.com/st/)
>
> 官方用法 :https://cdn.seovx.com/?mom=302 访问链接即可获取美图

##### 随机图片地址

- 教程实例

> https://cdn.seovx.com/
>
> https://blog.csdn.net/SectSnow/article/details/115835711 随机图片网站
>
> https://weblog.lixiaomu.fun/posts/d55a4b452f7a/ 十个壁纸站

- 用法

一般直接放在`<img src="">`的 src 属性里即可。比如：

`<img src="http://api.nmb.show/xiaojiejie1.php">`

或者 `Markdown`里：

`![随机图片](http://api.nmb.show/xiaojiejie1.php)`

- 推荐

 [https://t.alcy.cc/](https://t.alcy.cc/)  [调用示例](https://t.alcy.cc/fj/)  二次元风景

[https://imgapi.cn/wiki.html](https://imgapi.cn/wiki.html)    [调用示例](https://imgapi.cn/api.php?zd=pc&fl=fengjing&gs=images)

[https://www.dmoe.cc/](https://www.dmoe.cc/)   [调用示例](https://www.dmoe.cc/random.php)   二次元图片

https://unsplash.com/developers 可根据关键字搜索图片      [教程查看](https://blog.csdn.net/SectSnow/article/details/115835711)

- 还有更下头的

https://www.cunshao.com/666666/api/web.php

##### 随机一句话

source: 1 調用一言網的一句話（簡體） https://hitokoto.cn/

source: 2 調用一句網（簡體） https://yijuzhan.com/

source: 3 調用今日詩詞（簡體） https://www.jinrishici.com/


##### 增加网站统计(未完成)

https://weblog.lixiaomu.fun/charts/   可以方便的查看自己的标签

##### 网站内链新标签打开

- 方法一

 使用 hexo 配置文件   `external_link.enable:true:`并不能打开新标签,最总使用了一下方法

**方法缺陷:所有的a标签都会打开新标签**

通过inject属性添加到header标签中去
_config.butterfly.conf
inject:
head:
-


- #####  方法二

参考: https://fe32.top/articles/hexo1619/

***使用方法二之后,就把方法一取消了,对于一些站内链接可以通过浏览器的特性决定是否打开新标签***

- 代码修改

menu_item.pug

if theme.menu
.menus_items
each value, label in theme.menu
if typeof value !== ‘object’
.menus_item
- const valueArray = value.split(‘||’)
- const isBlank = valueArray[2] && trim(valueArray[2]) === ‘_blank’ ? ‘_blank’ : ‘_self’
a.site-page(href=url_for(trim(valueArray[0])) target=${isBlank} )
if valueArray[1]
i.fa-fw(class=trim(valueArray[1]))
span=’ ‘+label
else
.menus_item
- const labelArray = label.split(‘||’)
- const hideClass = labelArray[2] && trim(labelArray[2]) === ‘hide’ ? ‘hide’ : ‘’
a.site-page.group(class=${hideClass} href=’javascript:void(0);’)
if labelArray[1]
i.fa-fw(class=trim(labelArray[1]))
span=’ ‘+ trim(labelArray[0])
i.fas.fa-chevron-down
ul.menus_item_child
each val,lab in value
- const valArray = val.split(‘||’)
- const isBlank = valArray[2] && trim(valArray[2]) === ‘_blank’ ? ‘_blank’ : ‘_self’
li
a.site-page.child(href=url_for(trim(valArray[0])) target=${isBlank})
if valArray[1]
i.fa-fw(class=trim(valArray[1]))
span=’ ‘+ lab


- 使用

menu:
首页: / || fas fa-home
个人|| fas fa-user-secret||hide:
关于自己: /about/ || fas fa-heart
网址收藏: /nav/index.html || fa-fw fas fa-infinity || _blank
音乐长廊: /music/index.html || fa-fw fas fa-music || _blank





****

------



##### 样式修改

- 选中了 [https://weblog.lixiaomu.fun/posts/a837db1d06ac/](https://weblog.lixiaomu.fun/posts/a837db1d06ac/) 博客的样式, 而且它的博客也是 butterfly主题的. 直接扒下网站源码 。


- 把里面的css文件 放入 butteryfly `source/css/custom`文件夹下

-  编辑文件   *themes\butterfly\layout\includes\head.pug*  添加内容

// todo 李小沐博客的主题
link(rel=’stylesheet’, href=url_for(‘/css/coin/custom.css’))
link(rel=’stylesheet’, href=url_for(‘/css/coin/xuanfu.css’))
link(rel=’stylesheet’, href=url_for(‘/css/coin/yejiao.css’))
//// todo 李小沐博客的主题 end


*本想利用主题配置文件的  inject heade 添加内容， 但是 我的博客根路径 为 `/hexo2`,导致相对路径总是找不到 。*

 还有点小毛病， 再找时间调整吧



##### gitalk 自动生成issue

使用插件`hexo-auto-issue` 设置未成功  [https://github.com/buxuku/hexo-auto-issue](https://github.com/buxuku/hexo-auto-issue)

`npm i hexo-create-issues  ` 只能通过hexo new title 触发 作为备选

### 添加在线评论

> 采用gitalk 评论方案,
>
> 优点:不需要部署后台,或则注册服务
>
> 缺点:  需要github登录,不允许匿名评论

*评论只能在线上使用,本地环境不能访问。*

- 注册应用
-  访问链接 https://github.com/settings/developers 注册新应用
- homepage URL 填写博客根路径  `https://liudongsir.github.io/hexo2`
- Authorization callback URL填写博客根路径  `https://liudongsir.github.io/hexo2`

- 配置文件

_config.yml
comments:
use: gitalk

gitalk:
client_id: *****
client_secret: *****
repo: hexo2
owner: liudongsir
admin: liudongsir
option:


后记

评论 系统  gitalk   gitcomment 权限过高

可以使用  giscus 和  utterances (相比上面两个权限要低)

可以查看   matery 主题配置文件中对各个评论系统有介绍.

 butterfly评论系统接入 https://fe32.top/articles/hexo1611/


giscus 接入			https://giscus.app/zh-CN#category

****

### 待做

- ~~根据matery主题设置随机文章配图~~

  *主题使用多了之后发现图文结合是挺好看 但是 翻阅效率有点低*

- ~~添加个人导航链接~~

- 设置系列文章的排序规则,目前文章根据日期排序 同一天写的文章就会有排序混乱


- ~~研究下自动部署~~

  使用github自动部署已经成功   {% post_link 'hexo/2024-07-05hexo githubaction自动部署' 'hexo github action 配置' %}

- 写个脚本 一键上传代码避免频繁执行命令

- ~~增加hexo plus plus 支持[https://hexoplusplus.js.org/](https://hexoplusplus.js.org/)~~  需要其他服务支持,暂不需要.

- 增加在线留言.

- 优化下访问速度,  pwa  图片压缩(tinypng   gulp)  cnd 优化

- seo优化   [https://opstrip.com/2017/03/12/hexo-sitemap-keywords/](https://opstrip.com/2017/03/12/hexo-sitemap-keywords/)

- ~~导航栏增加栏目, 快速导航~~

  > 将 categories 合集 放在 nav页二级菜单下

- 考虑新做个页面 实现文章的导航  webstack 类似 , 学习下 新增page 页面编辑

  先考虑把matery 主题的分类页页移植过来

  或则参考 博客单页 https://m.seovx.com/

- 项目内a 标签打开的问题 内链是打开新页面还是当前页面

- 在线接口 获取的东西  随机壁纸  随机 游戏  随机鸡汤;

- [页面是真的骚](https://weblog.lixiaomu.fun/posts/43857/)

- 标签插件能不能增加  ==重点显示==  支持   或则换一个markdown的编辑器  vscode?

- 文章排序   `https://github.com/dimonpanik/hexo-custom-sort`

- hexo  后台管理;  后台管理属于领不清, 有后台的话  还用hexo干嘛

### 最后

http://www.alapi.cn/  api 接口聚合



#### butterFly 在线评论

##### 前言

> 在线聊天实际意义不大, 有问题直接添加联系方式聊天方便。
>
> 其实更适合做一个在线客服功能。



参看:

https://blog.csdn.net/qq_41356250/article/details/126707325

###### crisp

注册失败,直接pass

###### tidio

安装成功, 但是只能网页回复

![图是对话截图,适合做在线客服](/images/2024-07-04butterfly%E4%B8%BB%E9%A2%98%E8%AE%BE%E7%BD%AE/image-20240708142627584.png)

liudong

https://liudongsir.github.io/hexo/hexo/posts/53336/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 liudong !

hexo博客

导航页搭建

2024-07-05 hexo博客

hexo博客

日志使用

2024-07-03 liudong

butterfly主题设置

butterfly 主题设置

资料准备

主题安装

个人常用配置

个人Front-matter配置

设置代码格式

添加默认大图

调整侧边栏

设置页面直接编辑

文章置顶

插件安装

增加git部署插件

增加本地搜索

增加字数统计插件

增加短链插件

下面的插件不是必须安装

hexo-daily-news

source: 1 調用一言網的一句話（簡體） https://hitokoto.cn/

source: 2 調用一句網（簡體） https://yijuzhan.com/

source: 3 調用今日詩詞（簡體） https://www.jinrishici.com/

你的赏识是我前进的动力