Hexo更换主题之Butterfly

2022-05-26 本文已影响0人 cofbro

一.前言

前段时间搭建好了Hexo框架并用上了Fluid主题，后来不知道怎么回事，我的Fluid主题出了点问题，正好对我来说Fluid主题有点太简约了，索性换了一个Butterfly主题。下面说的一些配置的效果可以参考我的博客：cofbro的博客 - Hello I'm cofbro
如果还没有安装Hexo，可以看看这篇文章——Hello Hexo！一款高效的个人博客框架

二.Butterfly的下载

打开你的Hexo根目录，点击鼠标右键，进入 Git Bash Here，输入以下命令：

npm i hexo-theme-butterfly

随后咱们依次进入 Hexo -> themes -> butterfly 找到 _config.yml 文件，将里面的内容复制到Hexo根目录中的 _config.butterfly.yml(如果没有就创建)。

三.关于Butterfly配置

注意：本文仅展示部分配置，如需更多请参考Butterfly - A Simple and Card UI Design theme for Hexo

1._config.yml中的配置

打开根目录中的 _config.yml 文件，找到 theme 将其修改为 Butterfly ，以后配置更改就在这里面。
看板娘功能：需要先安装

npm install --save hexo-helper-live2d

再进入 _config.yml 在最后加上：

live2d:
    enable: true #是否显示看板娘
    scriptFrom: local
    model:
        use: live2d-widget-model-tororo #需要与后面的命令相同，直接更换名字即可
    display:
        position: left #宽高以及位置自己看着调
        width: 200
        height: 300
    mobile:
        show: true #是否在手机进行显示

通过npm下载对应的模型

npm install live2d-widget-model-tororo #对应的模型命令，这是只小白猫

其他的模型见 Hexo添加Live2D看板娘+模型预览

2._config.butterfly.yml中的配置

创建页：
更换主题后，除了主页好像都是需要你自己去创建的，下面这些命令就是创建页的：

hexo new page about #创建关于页

hexo new page tags #创建标签页

hexo new page categories #创建分类页

hexo new page categories #创建分类页

hexo new page link #创建友链页

其他基础配置

menu:
    首页: / || fas fa-home
    归档: /archives/ || fas fa-archive
    标签: /tags/ || fas fa-tags
    分类: /categories/ || fas fa-folder-open
    #菜单||fas fa-list:
    #音乐: /music/ || fas fa-music
    #电影: /movies/ || fas fa-video
    友链: /link/ || fas fa-link
    关于: /about/ || fas fa-heart

上面是一些右上角的标签，可以自定义选择

下面这个是局部搜索，不过需要通过npm安装

npm install hexo-generator-search --save

local_search:
    enable: true
    preload: false
    CDN:
    labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" 
# 如果没有查到内容相关内容显示

打字机效果

subtitle:
    enable: true
    # Typewriter Effect (打字效果)
    effect: true
    # loop (循環打字)
    loop: true
    # source 調用第三方服務
    # source: true
    # source: 1 https://hitokoto.cn/
    # source: 2 http://yijuzhan.com/
    # source: 3 https://www.jinrishici.com/
    # subtitle 會先顯示 source , 再顯示 sub 的內容
    source: 4
    # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
    sub:
        - 梦想这东西和经典一样 永远不会因为时间而褪色
        - 何其荣幸 何德何能 #注意这里的格式   空格和 '-'

鼠标点击特效

activate_power_mode:
    enable: false
    colorful: true # open particle animation (冒光特效)
    shake: true #  open shake (抖動特效)
    mobile: false

# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
fireworks:
    enable: true
    zIndex: 9999 # -1 or 9999
    mobile: false

# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
click_heart:
    enable: false
    mobile: false

# Mouse click effects: words (鼠標點擊效果: 文字)
ClickShowText:
    enable: false
    text:
        # - I
        # - LOVE
        # - YOU
    fontSize: 15px
    random: false
    mobile: false

提示：主题中很多 js 是通过CDN服务下载的，Butterfly用的 jsdeliver 在国内已经g了，如果想要正常显示特效请在 _config.butterfly.yml 找到 CDN 。

CDN:
    # The CDN provider of internal scripts (主題內部 js 的 cdn 配置)
    # option: local/jsdelivr
    # Dev version cannot choose jsdelivr (dev版的主題不能設置為 jsdelivr)
    internal_provider: local
    # The CDN provider of third party scripts (第三方 js 的 cdn 配置)
    # option: local/jsdelivr
    # when set it to local, you need to install hexo-butterfly-extjs
    third_party_provider: local #在这里改为local
    option:

之后依然要用到命令：

npm install hexo-butterfly-extjs

如果报错：npm WARN deprecated formidable@1.2.6: Please upgrade to latest, formidable@v2 or formidable@v3! Check these notes: https://bit.ly/2ZEqIau

则先键入以下命令，就可以在本地加载 js 文件了：

npm install formidable@v3