Bufferfly主题安装

前言

今天是我记录Bufferfly的第一天，之后每次会记录本站的美化，既可以为自己做个总结，也可以为其他刚开始使用Bufferfly的小伙伴提供一些建议和帮助。美化过的一点一滴都会记录在此篇文章里，后续也会在此篇文章更新！

PS：本站版本

适用人群：Butterfly 主题使用者！

Bufferfly的基本配置

具体配置参考Bufferfly的官方文档

教程一定要看完呀！

真香警告！

首页背景图

配置

这个背景图其实很简单，在主题的配置文件_config.yml里，CTRL + F找到index-img 配置项，修改它即可。

ps:可以将图片放在图床中保存，我使用的图床：imgurl

首页字体

配置

这个就需要你自己新建一个 css 文件，在主题文件里的 source \ css 文件夹里新建一个 css 文件，命名随意

往里写几行代码就完事了


    @font-face {
    font-family:'arzhu';
    src:url('../94dnuramwhfxgxpw9y82.ttf'); /* 修改成你的字体 */
    font-display:swap
}
h1#site-title {
    font-family:arzhu!important
}
span#subtitle {
    font-family:arzhu!important
}
a#site-name {
    font-family:arzhu!important
}

arzhu只是别名，可以任意修改，不过引用的时候，要确保名字相同。 url我是把字体下载到了本地使用，这里要注意.tff字体文件放的位置。最后在主题的配置文件里找到 inject配置项，引用刚刚新建的 css 文件即可。

这里推荐俩字体网站:100 font和第一字体

hexo-electric-clock 电子时钟插件

前言

效果如下：

NPM 插件安装的部署方法：

npm i hexo-electric-clock --save

# 或者

cnpm i hexo-electric-clock --save

新增网站根目录_config 配置项 (不是主题的)：

electric_clock:
  priority: 5
  enable: true
  enable_page: all
  layout:
    type: class
    name: sticky_layout
    index: 0
  temple_html: '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img id="card-clock-loading" src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-clock/clock/images/weather/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading" class="entered loading"></div></div></div></div></div>'

hexo 三连

1	hexo clean && hexo g && hexo s

具体配置请参考小冰博客https://zfe.space/post/hexo-electric-clock.html

hexo-history-calendar 历史上的今天插件

前言

效果如下：

NPM 插件安装的部署方法：

npm i hexo-history-calendar --save

# 或者

cnpm i hexo-history-calendar --save

新增网站根目录_config 配置项 (不是主题的)：

history_calendar:
  priority: 6
  enable: true
  enable_page: all
  layout:
    type: class
    name: sticky_layout
    index: 0
  temple_html: '<div class="card-widget card-history"><div class="card-content"><div class="item-headline"><i class="fas fa-clock fa-spin"></i><span>那年今日</span></div><div id="history-baidu" style="height: 100px;overflow: hidden"><div class="history_swiper-container" id="history-container" style="width: 100%;height: 100%"><div class="swiper-wrapper" id="history_container_wrapper" style="height:20px"></div></div></div></div>'

hexo 三连

1	hexo clean && hexo g && hexo s

具体配置请参考小冰博客https://zfe.space/post/hexo-history-calendar.html

hexo-magnet自定义 tags 或 categories 的排列和展示

前言

效果如下：

NPM 插件安装的部署方法：

npm i hexo-magnet --save

# 或者

cnpm i hexo-magnet --save

新增网站根目录_config 配置项(不是主题的)：

magnet:
  enable: true
  priority: 1
  enable_page: /
  type: categories
  devide: 2
  display:
    - name: 教程
      display_name: 小冰の魔改教程
      icon: 📚
    - name: 游戏评测
      display_name: 小冰の游戏评测
      icon: 🎮
    - name: 生活趣闻
      display_name: 小冰の生活趣闻
      icon: 🐱‍👓
    - name: vue
      display_name: 小冰の编程学习
      icon: 👩‍💻
    - name: 学习
      display_name: 小冰の读书笔记
      icon: 📒
    - name: 随想
      display_name: 小冰の胡思乱想
      icon: 💡
  color_setting:
    text_color: black
    text_hover_color: white
    background_color: "#f2f2f2"
    background_hover_color: "#b30070"
  layout:
    type: id
    name: recent-posts
    index: 0
  temple_html: '<div class="recent-post-item" style="width:100%;height: auto"><div id="catalog_magnet">${temple_html_item}</div></div>'
  plus_style: ""

hexo 三连

1	hexo clean && hexo g && hexo s

具体配置请参考小冰博客https://zfe.space/post/hexo-magnet.html

hexo-githubcalendar 插件 1.0

前言

效果如下：

NPM 插件安装的部署方法：

npm i hexo-githubcalendar --save

# 或者

cnpm i hexo-githubcalendar --save

新增网站根目录_config 配置项(不是主题的)：

# Ice Kano Plus_in
# Hexo Github Canlendar
# Author: Ice Kano
# Modify: Lete乐特
githubcalendar:
  enable: true
  priority: 3 # 这里加上参数
  enable_page: /
  user: zfour
  layout:
    type: id
    name: recent-posts
    index: 0
  githubcalendar_html: '<div class="recent-post-item" style="width:100%;height:auto;padding:10px;"><div id="github_loading" style="width:10%;height:100%;margin:0 auto;display: block"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="#d0d0d0" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg></div><div id="github_container"></div></div>'
  pc_minheight: 280px
  mobile_minheight: 0px
  color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']"
  api: https://python-github-calendar-api.vercel.app/api
  # api: https://python-gitee-calendar-api.vercel.app/api
  calendar_js: https://cdn.jsdelivr.net/gh/Zfour/[email protected]/hexo_githubcalendar.js
  plus_style: ""