Hexo Butterfly Extension(拓展)

Live2d+butterfly配置+valine

在网上随处都可以搜到有关hexo的各种主题的文章，相关的教程数不胜数，可能有些从0开始的人就像我当初看了很多教程但是仍旧一样迷茫，而且有些人仍然对butterfly主题情有独钟，就像博主我一样。这篇文章将是一套完整的流程。（本篇文章是基于配置好了hexo和butterfly主题之后来进行后续的一系列操作的。若没有配置好可以参考上一篇文章）

看板娘配置

看板娘是什么？？

看板娘是一种动态的可互动的二维图像，采用目前最先进的live2d技术，Live2d是一种应用于电子游戏的绘图渲染技术，由日本Cybernoids公司开发，通过一系列的连续图像和人物建模来生成一种类似二维图像的三维模型，现阶段已用于web。

从github官网上看，目前星星最多的是这一位作者，在经过一番搜索发现，国内已经有很多相关对live2d web进行实践的先驱，但是追根溯源从资源来看，貌似都是出自一人之手。很多的作品都是基于这位作者进行的再创作，也可以叫魔改。

二次元都会懂。这里就不过多解释了。

1，从github上下载文件

首先去作者的的网站下载看板娘部署文件，点击code直接下载压缩包。

解压到本地文件夹，并命名为live2d-widegt。如下图所示。

2，配置并修改相关文件

2-1，修改autoload.js 文件

该文件位于live2d-widget中，将第二行的代码注释掉同时解除第三行代码的注释。正确代码如下图所示。

2-2，修改hexo中主题配置文件_config.yml。

（注意是butterfly主题配置文件）

修改代码如下；

js

inject:
  head:
  # - <link rel="stylesheet" href="/xxx.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
    <script src="/live2d-widget/autoload.js"></script>
  bottom:

使用的是notepad++，按住Ctrl+f 搜索inject，直接跳转。

2-3，启动live2d

在hexo主题配置文件_config.yml中任意位置添加如下代码：（推荐代码最后）

js

live2d:
  enable: true

3，安装插件

如果你没有 pug 和 stylus 的渲染器，需要安装

在cmd中输入

Code

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

Ctrl+ s 保存，到了这里看板娘的基本配置就完成了！

输入以下命令：

haxe

hexo clean 			//清除cache文件
hexo generate		//生成public文件
hexo server		//启动服务
hexo deploy    //部署到github仓库

看板娘的配置已经完成，如果你还没有学会，请留下你的邮箱，或者评论。……&^_^

Butterfly.yml文件配置

1，文件讲解

在文件路径为/themes/butterfly中有一个_config.yml的文件。将它复制到hexo的根目录，/source/_data如果没有_data文件夹则新建一个文件夹命名为_data。复制到里面并且重新命名为butterfly.yml，记住，这个文件将替换原先的config.yml。从而就可以而_posts文件夹则存放的是md文件，也就是咱们熟悉的Markdown的文本文件。（Markdown是世界上最好的语言[滑稽/]）在编译hexo generate的时候会将md文件编译到publish文件夹。浏览器会自动根据publish文件夹执行生成dom树并显示，如果有js或者css文件也会自动加载并渲染。

2，在文章中插入图片

1，本地图片

当Hexo项目中只用到少量图片时，可以将图片统一放在source/images文件夹中，通过markdown语法访问它们。如果没有images则新建文件夹。

引用方式如下

Code

![](/images/image.jpg)

如果在在_config.yml文件中配置，写入文件路径的话，此时引用的就是theme中sources中的img文件中的图片，直接这样写就行。

Code

/img/image.jpg

上述是markdown的引用方式，图片只能在文章中显示，但无法在首页中正常显示。

如果希望图片在文章和首页中同时显示，可以使用标签插件语法。

Code

{% asset_img image.jpg This is an image %}

2，CDN引用

将图片上传至图床，本人用的图床软件为ipic（mac版），windows的不知道有什么好的软件。传图片完成后会生成链接，可以选择Markdown语法的，还可以选择直接访问的链接

例如：！

3，使用阿里云矢量图库

阿里云矢量图库链接，用github账户登录就行了。

进入阿里 iconfont 寻找你想要添加的图标，并且添加到项目。（建议一次添加多个）

点击购物车图标并且随便给项目命名你会看到如下：

点击下载至本地。

你会看到一个压缩包，或者是文件夹，将文件夹中的iconfont.css这个css文件取出来并且放到路径为 hemesutterflysourcecss的文件夹中。

用notepad++打开

接着在主题文件中配置，iconfont是阿里提供的书写格式，后面的icon-bilibili-fill则对应的是上面css文件中所显示的。

js

social:
   fab fa-github: https://github.com/weiswift/ || Github
   iconfont  icon-facebook-fill: https://www.facebook.com/profile.php?id=JunweiLi
   iconfont  icon-telegram: https://telegram.org/18625517682
   iconfont  icon-bilibili-fill: https://space.bilibili.com/393810586
   fas fa-envelope: mailto:swiftjunwei@yahoo.co.jp
   

可以自定义格式

js

.iconfont {
  font-family: "iconfont" !important;
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

4，menu界面

menu界面主要是网站的主页总体布局，这个可以当做模板复制，可以直接参照我的menu界面去配置就行了。

fa图标库：根据官网的配置就ok。

js

menu:
   Home: / || fas fa-home
   Archives: /archives/ || fas fa-archive
   Tags: /tags/ || fas fa-tags
   Links: /link/ || fas fa-link
   Moment||fas fa-leaf:
     - Music || /music/ || fas fa-music
     - Dairy || /dairy/ || fa fa-bookmark
     - Gallery || /gallery/ || fa fa-picture-o
   Steam||fa fa-steam:
     - MikuTap 初音未来 || /mikutap/ || fa fa-music
     - StartBattle 星际大战 || /starbattle/ || fa fa-space-shuttle
   Msg: /messageboard/ || fa fa-comments-o
   About: /about/ || fas fa-heart

5，捐助系统

我还是厚着脸皮把这个东西给放上来了。:horse:呀

请将收款码放到自己主题themes的source文件夹的img文件夹中。

js

# Sponsor/reward
reward:
  enable: true
  QR_code:
     - img: /img/wechat.jpg
       link:
       text: 微信
     - img: /img/alipay.jpg
       link:
       text: 支付宝

6，优雅的使用Markdown：

放弃使用WordPress

当初使用宝塔面板的时候，发现WordPress经常就给网页的图片给吃了，网页经常性的崩溃，最后坚决使用Hexo

而且最重要的一点就是WordPress写文章竟然不支持Markdown这么好的语言。

使用Typora

Typora 是什么？

Typora 是一款支持实时预览的 Markdown 文本编辑器。它有 OS X、Windows、Linux 三个平台的版本，并且由于仍在测试中，是完全免费的。而且输入所见即所得。

使用的时候且行且珍惜，现在还在内测，用不了多久估计就要收费（猜测）。

官网：真要有能力还是去支持一下作者。

主题：一款不错的书写主题使你灵感爆棚。

安装Typora主题：

官方文档是这样说的：

How to install a theme

• Download theme from this website or other place.
• Open typora. Click “Open Theme Folder” button from Preference Panel → Appearance section.
• Put downloaded content into the opened folder, make sure your css files are directly under that
• directory.

mac电脑在左上角的Typora–>偏好设置–>外观–>主题文件夹

将下载好的主题导入到这个主题文件夹中就行。

这个步骤的关键，就要确保 CSS 文件在这个目录下。

Markdown便捷：

给出一篇参考范文

1，打出emoji：输入” : “也就是英文状态下的冒号，输入” horse “ Typora会自动给你提示，可以说是非常好用的了。

2，用Mac上用Typora书写文章简直忒爽，这纯白的界面爱了爱了。

Valine评论区

1、注册账号并进入：

LeanCloud

2、创建应用：

修改主题配置文件找到valine，enable设为true并分别将复制的id和key填入。

分支选择master，点击部署。

点击设置，安全中心，web安全域名，填入自己的域名。

3,配置config.yml

config.yml代码如下：

Code

# valine

# https://valine.js.org
valine:
  enable: true
  appId: #你的appid
  appKey: #你的appkeys
  notify: false # valine mail notify (true/false) https://github.com/xCss/Valine/wiki
  verify: false # valine verify code (true/false)
  pageSize: 10 
  avatar: monsterid
  lang: en # i18n: zh-cn/en
  placeholder: \(≧▽≦)/你想说什么呢，记得填邮箱哦!
  guest_info: nick,mail
  recordIP: false 
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  count: true # top_img顯示評論數
  bg: 
  enableQQ: false 
  requiredFields: 昵称/邮箱
  # required fields (nick/mail)

到此，valine评论区的创建和应用就设置好了。

标签云：

Hexo-Tag-Cloud

Hexo 标签云插件：官方文档

安装流程

npm安装：

js

npm install hexo-tag-cloud

修改 tagcloud 的模板

对于 pug 用户

• 这里以 Butterfly 主题为例
• 找到 Butterfly/layout/includes/widget/card_tags.pug 文件
• 将这个文件修改为如下内容(注意缩进):

js

if site.tags.length
  .card-widget.card-tags
    .card-content
      .item-headline
        i.fa.fa-tags(aria-hidden="true")
        span= _p('aside.card_tags')
        script(type="text/javascript" charset="utf-8" src="/js/tagcloud.js")
        script(type="text/javascript" charset="utf-8" src="/js/tagcanvas.js")
        #myCanvasContainer.widget.tagcloud(align='center')
          canvas#resCanvas(width='200', height='200', style='width=100%')
            != tagcloud()
          != tagcloud({min_font: 16, max_font: 24, amount: 50, color: true, start_color: '#999', end_color: '#99a9bf'})

自定义：

现在 hexo-tag-cloud 插件支持自定义，可以改变你的标签云的字体和颜色，还有突出高亮。

• 在你的博客根目录，找到 _config.yml 文件然后添加如下的配置项:

Code

# hexo-tag-cloud
tag_cloud:
    textFont: Trebuchet MS, Helvetica
    textColor: '#333'
    textHeight: 25
    outlineColor: '#E2E1D1'
    maxSpeed: 0.5
    pauseOnSelected: false # true 意味着当选中对应 tag 时,停止转动

游戏移植

mikutap

说明

作者已经允许移植：官网

folk作者官网的所有的文件夹到本地

配置_congig.yml

添加如下代码：

js

skip_render: 
  - "mikutap/**"
  - "battlecity/**"
  - "starbattle/**"
  - "tetris/**"

游戏文件放在source文件夹中，命名为mikutap，

Tips：可以放 html，但是要设置 skip_render，否则 Hexo 会把 html 当作 md 处理

官网文件说明

在 Hexo 配置文件中，通过设置 include/exclude 可以让 Hexo 进行处理或忽略某些目录和文件夹。你可以使用 glob 表达式 对目录和文件进行匹配。

include and exclude options only apply to the source/ folder, whereas ignore option applies to all folders.

举例：

js

# Include/Exclude Files/Folders
include:
  - ".nojekyll"
  # 包括 'source/css/_typing.css'
  - "css/_typing.css"
  # 包括 'source/_css/' 中的任何文件，但不包括子目录及其其中的文件。
  - "_css/*"
  # 包含 'source/_css/' 中的任何文件和子目录下的任何文件
  - "_css/**/*"

exclude:
  # 不包括 'source/js/test.js'
  - "js/test.js"
  # 不包括 'source/js/' 中的文件、但包括子目录下的所有目录和文件
  - "js/*"
  # 不包括 'source/js/' 中的文件和子目录下的任何文件
  - "js/**/*"
  # 不包括 'source/js/' 目录下的所有文件名以 'test' 开头的文件，但包括其它文件和子目录下的单文件
  - "js/test*"
  # 不包括 'source/js/' 及其子目录中任何以 'test' 开头的文件
  - "js/**/test*"
  # 不要用 exclude 来忽略 'source/_posts/' 中的文件。你应该使用 'skip_render'，或者在要忽略的文件的文件名之前加一个下划线 '_'
  # 在这里配置一个 - "_posts/hello-world.md" 是没有用的。

ignore:
  # Ignore any folder named 'foo'.
  - "**/foo"
  # Ignore 'foo' folder in 'themes/' only.
  - "**/themes/*/foo"
  # Same as above, but applies to every subfolders of 'themes/'.
  - "**/themes/**/foo"

Hero官网：官方文档

Gallery图库

参考

官方文档说明：Butterfly

• 在cmd中输入 hero new page gallery

• 在hexo根目录的source找到gallery中的index.md

• 配置index.md

  js

<div class="gallery-group-main">
{% galleryGroup '青春&美食' 'Delicious Food' '/gallery/foods' http://qhyvux0h6.hb-bkt.clouddn.com/20190704175516_smsjd.jpg %}
{% galleryGroup 'Sky' 'Romantic Games' '/gallery/games' http://qhyvux0h6.hb-bkt.clouddn.com/pHOna.jpg %}
</div>

配置子页面

构建路径如下：

在子文件夹中同样也有index.md

js

• {% gallery %}
  ![](http://qhyvux0h6.hb-bkt.clouddn.com/%E5%85%89%E9%81%875.png)
  ![](http://qhyvux0h6.hb-bkt.clouddn.com/%E5%85%89%E9%81%876.png)
  ![](http://qhyvux0h6.hb-bkt.clouddn.com/%E5%85%89%E9%81%873.jpg)
  ![](http://qhyvux0h6.hb-bkt.clouddn.com/%E5%85%89%E9%81%872.jpg)
  ![](http://qhyvux0h6.hb-bkt.clouddn.com/%E5%85%89%E9%81%874.jpg)
  ![](http://qhyvux0h6.hb-bkt.clouddn.com/%E5%85%89%E9%81%871.jpg)
  {% endgallery %}
  > ### Sky的插画，针不戳。
  >
  > ### National verson，Nice to meet you!
  >
  
  

致谢

感谢：Hexo-Tag-Cloud

感谢：Valine

感谢：HFIProgramming

感谢：Butterfly

思考

本博客将于8月份正式托管在github上面，当然你有能力的话自己买服务器也无所谓。

Vps可以干什么？？？

国外的Vps可以搭建私人FQ节点

挖矿,这个东西咱也不了解，就不过多阐述。

部署云爬虫，防止被反爬，目前正在钻研

展望与总结

写文章实在是很费时间啊，亲。

如果这篇文章给予了你帮助，希望可以打赏，让我更好的维护这个博客。

Most importantly:要把时间放在提升自己的能力的方面，而且做事情要有始有终，困难不会压倒咱