文章目录

一、前言
二、蝴蝶主题
- 1.快速入门
- 2.valine评论移植
- 3.文章移植
三、个性美化
- 1.boyui对话框式简介页面
- 2.说说动态页面
- 3.友链页面优化

一、前言

这两天心血来潮给自己的hexo网站换了主题，从sakura到butterfly了，

原sakura主题全部内容放到：http://cungudafa.gitee.io
（ps.sakura主题后面作者好像又有更新，我就不更新啦~）
现目前主题butterfly：http://cungudafa.top

简单说一下butterfly的优点：

界面是我的新宠了（快速门）
很多设置优化都单独封装在yml配置了（配置很方便，加载很nice，主题更新也方便）
友链单独封装yml文件，不用写index.md了
不蒜子统计（这些都是sakura没有完善的，我很心水。）
tags页面

之前我在sakura也是仿这个写的，太卑微了吧。
动态目录响应和相关文章推荐(这个可以设置插件，心动)
大招在支持黑夜模式和繁简体字转换
友链
和sakura出入不大，参考优化了一下也是美丽许多！（优化步骤见后文）
相册页面 （可）

内部的图片展示效果我还在优化中，想自定义css。

二、蝴蝶主题

1.快速入门

首先，非常感谢主题作者：JerryC 大佬，使用教程可以参考文档，当然如果遇到什么问题，也可以留言，我也尽最大努力帮助大家优化自己的网站。

主页：

如何开始你的hexo-theme-butterfly呢？

官方教程：快速开始

1. 第一次使用，一定要仔细阅读参考文档，配置好你的config和source。

2.其次，还有很多功能是需要安装插件的，申请app_id的都要按照规范做。

3.最后，注意细节是否有空格，名称路径是否出错。
Hexo+Butterfly+Github+Coding搭建个人博客
这篇文章指出需要安装：
```
npm install cheerio --save
```
你是否安装可以查看根目录下的package.json，参考我的：

{"name": "hexo-site","version": "0.0.0","private": true,"scripts": {"build": "hexo generate","clean": "hexo clean","deploy": "hexo deploy","server": "hexo server"},"hexo": {"version": "4.2.0"},"dependencies": {"cheerio": "^1.0.0-rc.3","hexo": "^4.0.0","hexo-abbrlink": "^2.0.5","hexo-algolia": "^1.3.1","hexo-blog-encrypt": "^3.0.12","hexo-deployer-git": "^2.1.0","hexo-generator-archive": "^1.0.0","hexo-generator-baidu-sitemap": "^0.1.6","hexo-generator-category": "^1.0.0","hexo-generator-feed": "^2.2.0","hexo-generator-index-pin-top": "^0.2.2","hexo-generator-json-content": "^4.1.6","hexo-generator-searchdb": "^1.3.0","hexo-generator-sitemap": "^2.0.0","hexo-generator-tag": "^1.0.0","hexo-neat": "^1.0.4","hexo-permalink-pinyin": "^1.1.0","hexo-related-popular-posts": "^4.0.0","hexo-renderer-ejs": "^1.0.0","hexo-renderer-marked": "^2.0.0","hexo-renderer-pug": "^1.0.0","hexo-renderer-stylus": "^1.1.0","hexo-server": "^1.0.0","hexo-tag-bili": "^1.0.0","hexo-tag-fancybox_img": "^1.0.1","hexo-wordcount": "^6.0.1"}
}

2.valine评论移植

如果你之前有过主题，可不可以把评论也搬过来呢？

当然是可以的！

注意把yml配置的链接路径对应上（这是访问路径）

因为在leancloud存储里是域名和链接页面的路径，只要路径一样就可以显示之前主题的留言啦！

leancloud显示是从域名拼接路径，就像这样，（这样设置的确可以在两个域名都显示同一组评论，不过valine-admin（zhaojun版）返回邮件的地址只有一个哦！最好还是再建立一个leancloud后台容器！）
在页面中，渲染样式是根据主题来设置的！！！（注意links\index.md的type是link）

解释一下：type: link是从全局渲染data\link.yml友链内容到links\index.md中

这里需要把link.yml改为links.yml
即这个内容文件时\links\index.html页面所用
同时修改flink.pug引用link.yml为links.yml （即：site.data.link改为site.data.links）
总结：valine评论移植，只要相对路径搞好，就可。

3.文章移植

我以前设置的是hexo-abbrlink插件——随机访问路径，这里在主配置文件下不用修改，
但是，在文章里注意这个abbrlink的地址也要写过来哦！

sakura到butterfly的区别是（作者信息没有了，首图top_img还有cover封面的覆盖图，根据之前的教程设置吧——主题页面。）

---
abbrlink: '44e8'
title: 微信公众号（二）扩展分享
tags:- 微信公众号
categories: 技术
comment: true
description: 'cungudafa:在学习中的小王呀'
top_img: https://img-blog.csdnimg.cn/20200306151717593.png
cover: https://img-blog.csdnimg.cn/20200306151717593.png
date: 2020-03-06 16:54:10
---

同理，文章的相对路径没变的话，以前的评论也可以拉取过来哦！

三、个性美化

以下页面需要在目录显示，请设置butterfly.yml
如果需要中英文设置，请在主题themes\Butterfly\languages 设置。

menu:主页: / || fa fa-home博文||fa fa-graduation-cap: - 归档 || /archives/ || fa fa-folder-open- 分类 || /categories/ || fa fa-archive- 标签 || /tags/ || fa fa-tags生活||fa fa-diamond:- 说说 || /shuoshuo/ || fa fa-comments-o- 相册 || /photos/ || fa fa-camera-retro#- 音乐 || /music/ || fa fa-music#- 视频 || /movies/ || fa fa-video-camera友链: /links/ || fa fa-link留言板: /comment/ || fa fa-paper-plane#留言板: /messageboard/ || fa fa-paper-plane关于: /about/ || fa fa-heart

1.boyui对话框式简介页面

css和官网一致。
你可以下载我的botui.js，然后修改后文（你想要显示的）内容即可。
修改你要显示的页面，加上css和js引用，标签是：<bot-ui></botui>
source\about\index.md
我这个外框直接从sakura移植过来的，具体也贴出来了，方便copy！

---
title: about
date: 2020-2-12 22:14:36
keywords: 关于
description:
comments: false
top_img: https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/banner/about.jpg
---
<!-- https://www.bootcdn.cn/botui/ -->
<link href="https://cdn.bootcss.com/botui/0.3.9/botui-theme-default.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/botui/0.3.9/botui.min.css" rel="stylesheet">{% raw %}
<!-- 因为vue和botui更新导至bug,现将对话移至js下的botui中配置 -->
<div class="entry-content"><div class="moe-mashiro" style="text-align:center; font-size: 50px; margin-bottom: 20px;">[姑の小屋]</div><div id="hello-mashiro" class="popcontainer" style="min-height: 300px; padding: 2px 6px 4px; background-color: rgb(36, 200, 255); border-radius: 10px;"><center><p></p><h4>与&nbsp;<ruby>cungudafa&nbsp;<rp>（</rp><rt>真（ま）白（しろ）</rt><rp>）</rp></ruby>对话中...</h4><p></p></center><bot-ui></botui></div>
</div>
<!--<script src="https://cungudafa.gitee.io/js/botui.js></script>-->
<script src="/js/third-party/botui.js"></script>
<script>
bot_ui_ini()
</script>
{% endraw %}

2.说说动态页面

这个功能我也是从我之前的 sakura主题搬过来的静态的样式css，稍加修改。

source\shuoshuo\index.md

---
title: shuoshuo
type: shuoshuo
noDate: 'true'
comments: 'false'
top_img: https://cdn.jsdelivr.net/gh/cungudafa/img/images/food.jpg
---
<link rel="stylesheet" href="https://gitee.com/cungudafa/source/raw/master/css/shuoshuo.css">
<p></p>
<div class="photos-btn-wrap"><!-- <a class="photos-btn" href="http://cungudafa.top/photos/">Photos</a> --><a class="photos-btn active" href="">说说</a><a class="photos-btn" href="https://space.bilibili.com/430247358">视频</a>
</div><div id="primary" class="content-area" style=""><main id="main" class="site-main" role="main"><div id="shuoshuo_content"><ul class="cbp_tmtimeline"><li> <span class="shuoshuo_author_img"><img src="https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg" class="avatar avatar-48" width="48" height="48"></span><div class="cbp_tmlabel" href=""><p></p><p><strong>sakura主题改为butterfly主题</strong></p><p>强肝了一天，我累了<p><p></p><p class="shuoshuo_time"><i class="fa fa-clock-o"></i>2020年4月21日</p></div></li><li> <span class="shuoshuo_author_img"><img src="https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg" class="avatar avatar-48" width="48" height="48"></span><div class="cbp_tmlabel" href=""><p></p><p>第一个说说</p><p></p><p class="shuoshuo_time"><i class="fa fa-clock-o"></i>2020年2月25日</p></div></li></ul></div>
</div>

针对静态说说不能在线发布的问题，Uncle_drew 研究的gtalk在线发布https://cndrew.cn/shuoshuo/，这是另一款评论后台，防止和valine评论冲突，用了两个后台。

3.友链页面优化

默认：

优化：

参考链接：Hexo关于Butterfly的一些小修改

我直接将修改步骤再贴一遍，如果觉得好用，记得去上面链接的原博留言打卡，谢！

修改themes\Butterfly\layout\flink.pug渲染样式
（ctrl+/注释掉原来的内容，将下面添加进去：）

#page.flink#article-containereach i in site.data.linksh2= i.class_name.post-cards.md-linkseach item in i.link_list.md-links-item(style= item.color ? `--primary-color:${item.color};border-width:${item.width};border-style:${item.style};animation: ${item.custom} ${item.time} infinite alternate; background:${item.background}` : 'border-width:0px;border-style:solid;animation: link_custom 0s infinite alternate;background:0')a.customcolor(href=item.link  title=item.name target="_blank" rel=item.remove ? "external nofollow" : "" style=item.namecolor ? `--namecolor:${item.namecolor}` : '')if theme.lazyload.enableimg.lazyload(data-src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name,style=item.rotate ? `--primary-rotate:${item.rotate};--autotime:${item.autotime};` : '--primary-rotate:0deg' class=item.autorotate ? `${item.autorotate}` : '')elseimg(src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name ).md-links-title= item.name .md-links-des= item.descr!= page.contentif page.comments !== falseinclude includes/comments/index.pug

添加css样式，外链
（ctrl+F全局搜索 css: ，并添加外链）

    - https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/Hexo/css/flink.min.css

使用方法：
在link.yml里写：

   name: 姓名link: 地址avatar: 头像descr: 描述# 边框大小 默认为0 width: 0px# 边框样式 默认 solidstyle: solid# 边框颜色 默认淡蓝色 #49b1f5color: "#49b1f5"# 自动旋转 可选值 flash（闪现） link_custom（单色呼吸灯） link_custom1（彩色呼吸灯）custom: link_custom# 动画时长设定，默认为0time: 4s# name的颜色namecolor: "#ff6699"# descr的颜色descolor: "#ff6699"# 背景颜色background: 0# 鼠标悬停旋转角度rotate: 360deg# 自动旋转 latuo左旋转 rauto右旋转autorotate: "lauto"# 旋转的周期（时长）autotime: 0s#移除此链接的权重 0为否 非0为移除remove: 0

篇幅蛮大的了，作为一次换主题的笔记吧，方便我以后查看，嘿嘿~

欢迎大家多多指教！

hexo（butterfly）蝴蝶主题+个性美化相关推荐

Hexo中Next主题个性化美化的解决方案
目录 1.Next主题的启用 2.更改Next主题为中文 3.添加标签页和分类页 4.正确打开标签页和分类页 5.主题样式的更改 6.更改图像 7.更改标题.作者和链接 8.启动侧边栏社交链接 9.启 ...
2021 hexo matery主题个性魔改
hexo matery主题个性修改一.雪花飘落先来看看效果: 找到你的博客目录,在主题在/themes/matery/layout/layout.ejs 中写下如下代码即可 [外链图片转存失败, ...
使用 github 仓库搭建 Hexo教程，Hexo配置文件解读，Hexo安装next主题及主题配置，美化
这是之前写的文章了,重新补一补,把另外写的都和在一起了,出问题方便找搭建Hexo 准备安装 nodejs 安装 git 可以看我之前的博客,好像有写安装方法安装hexo-cli 中文官网安装是 ...
【教程】Hexo+Coding搭建自己的博客网站系列5-Next6.7版本主题深度美化
在我进行主题优化的时候,参考了网上很多文章,但是随着Next版本的变迁,越来越多个性化设置已经被集成到Next中.所以我写了这篇关于Next6.7版本主题优化的方案.有时间和精力的话,这篇文章也会随着 ...
valine--最新版+个性美化（持续更新）
文章目录 1.前言 2.正文 2.1 使用教程 2.2 新版更新点 2.3 我的配置 (1)config配置 (2)渲染配置 1.前言从入坑hexo以来,一直有用valine这个极简无后端的评论系统 ...
Hexo-Matery主题细致美化
文章目录 Hexo-Matery主题美化下载安装Matery主题切换主题新建页面 1.标签页 2.分类页 3.关于页面 4.留言板 5.友情链接 6.添加 404 页面 7.添加自定义页面配置 ...
Hexo + Butterfly 自定义页脚
原文链接 :Hexo + Butterfly 自定义页脚推荐阅读基于 Hexo 从零开始搭建个人博客(一): 环境准备基于 Hexo 从零开始搭建个人博客(二): 项目初识基于 Hexo 从零 ...
【blog】小白博客搭建和踩坑历程 hexo+butterfly
我的博客初始化踩坑流程(hexo搭建+git+butterfly) 搭建流程 Hexo-零基础搭建个人博客(详解)_〆清峰ㄟ的博客-CSDN博客_hexo 换主题的bug Hexo启动页面显示ex ...
【Web】Hexo+Butterfly+Github+Coding搭建个人博客
个人博客: http://www.milovetingting.cn Hexo+Butterfly+Github+Coding搭建个人博客背景之前用docsify搭建了一个简单的博客,但是docs ...

hexo（butterfly）蝴蝶主题+个性美化