butterfly主题设置

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://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://imgapi.cn/wiki.html 调用示例

https://www.dmoe.cc/ 调用示例二次元图片

https://unsplash.com/developers 可根据关键字搜索图片教程查看

还有更下头的

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:
    - <base target="_blank">

方法二

参考: 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/ 博客的样式, 而且它的博客也是 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

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自动部署已经成功 hexo github action 配置
写个脚本一键上传代码避免频繁执行命令
~~增加hexo plus plus 支持https://hexoplusplus.js.org/~~ 需要其他服务支持,暂不需要.
增加在线留言.
优化下访问速度, pwa 图片压缩(tinypng gulp) cnd 优化
seo优化 https://opstrip.com/2017/03/12/hexo-sitemap-keywords/
~~导航栏增加栏目, 快速导航~~

将 categories 合集放在 nav页二级菜单下
考虑新做个页面实现文章的导航 webstack 类似 , 学习下新增page 页面编辑

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

或则参考博客单页 https://m.seovx.com/
项目内a 标签打开的问题内链是打开新页面还是当前页面
在线接口获取的东西随机壁纸随机游戏随机鸡汤;
页面是真的骚
标签插件能不能增加 ==重点显示== 支持或则换一个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

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

butterfly主题设置