hexo + butterfly blog安装

hexo + Butterfly blog安装

1. 安装hexo butterfly

1. 安装hexo

1 2	npm install -g hexo-cli hexo init

2. 安装butterfly

1 2	git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

将hexo根目录下_config.yml改为theme: Butterfly。

平滑升级

推荐把主题默认的配置文件_config.yml 复製到 Hexo 根目录下的 `_config.butterfly.yml’

Hexo會自動合併主題中的_config.yml和 _config.butterfly.yml裡的配置，如果存在同名配置，會使用_config.butterfly.yml的配置，其優先度較高。

安装安装 pug 以及 stylus 的渲染器插件。

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

proxy

1
2
3

sudo npm config set proxy=socks://127.0.0.1:1080
sudo npm config set proxy=http://127.0.0.1:1081
sudo npm config set registry=http://registry.npmjs.org

local_search

在hexo根目录下_config.yml加上

search:
  path: search.xml
  field: post

然后，安装插件npm install hexo-generator-search --save.

安装mermaid插件

1	npm install hexo-filter-mermaid-diagrams

其它插件安装跟hexo主题一样

npm i hexo-permalink-pinyin --save #中文链接转拼音链接
npm install hexo-deployer-git --save #git
npm install hexo-generator-seo-friendly-sitemap --save # sitemap

3. cover 图片和 theme

cover:
  # display the cover or not (是否顯示文章封面)
  index_enable: true
  aside_enable: true
  archives_enable: true
  # the position of cover in home page (封面顯示的位置)
  # left/right/both
  position: both
  # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
  default_cover:
    # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg
    - /img/ach.jpg
    - /img/imgs/0.jpg
    - /img/imgs/1.jpg

这个图片放置在，blog\themes\Butterfly\source\img\imgs路径下。

theme

theme_color: 
  enable: true
  main: "#7B90D2"
  paginator: "#91B493"
  button_hover: "#7B90D2"
  text_selection: "#00c4b6"
  link_color: "#99a9bf"
  meta_color: "#7b90d2"
  hr_color: "#A4D8FA"
  code_foreground: "#F47466"
  code_background: "rgba(27, 31, 35, .05)"
  toc_color: "#7b90d2"
  blockquote_padding_color: "#49b1f5"
  blockquote_background_color: "#49b1f5"

文章置顶

将node_modules\hexo-generator-index\lib下 generator.js替换如下

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
    var config = this.config;
    var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
    var paginationDir = config.pagination_dir || 'page';
    return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
    });
};

然后在文章post头加上top：100数字越大越靠前

title: Hexo 
date: 2020-04-18 17:32:22
categories: hexo
tags: [hexo1, hexo2, hexo3]
top: 100

新建留言板页

1	hexo new page "contact"

加上 /source/contact/index.md

---
title: contact
date: 2020-09-30 17:25:30
type: "contact"
layout: "contact"
---

改变页面宽度

themes\Butterfly\source\css\_page\common.styl下

.layout
  display: flex
  margin: 0 auto
  padding: 2rem 20px
  max-width: 1600px #正文页面宽度

文章统计图和标签等

1	npm install hexo-charts -S

编辑主题目录/Butterfly/layout/page.pug 文件，在 .tag-cloud 下面添加一行 #tags-chart，在 .category-content 下面添加一行 #categories-chart.

when 'tags'
        include includes/page/tags.pug
          #tags-chart
      when 'link'
        include includes/page/flink.pug
      when 'categories'
        include includes/page/categories.pug
          #categories-chart

字体大小和font

D:\study\hexo\blog_ing\themes\Butterfly\source\css\_layout\head.style

.site-page
  position: relative
  padding-bottom: .3rem
  text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
  font-size: .60em
  cursor: pointer

修改 _config.butterfly.yml

font:
  global-font-size:
  code-font-size:
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
  code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

访问map

clustrmaps 注册一个帐号找到Free Tools下面的Website Widget, 点击Get Map Widget 输入你的博客网址，点击Next 根据你自己的喜好选择样式Map widget或Globe Widget 找到如下代码，copy
1
<script type="text/javascript" id="clstr_globe" src="//clustrmaps.com/globe.js?d=xxxxxxxxxxxxx"></script>

在themes\Butterfly\layout\includes\widget下创建card_map.pug

.card-widget.card-map
  .card-content
    .item-headline
      i.fas.fa-globe-asia(aria-hidden="true")
      span= _p('访客地图')
    //- 下面这行适用于3D地图(Globe Widget)
    <script type="text/javascript" id="clstr_globe" src="//clustrmaps.com/globe.js?d=Cxxxxxxxxxxx"></script>

并且在该目录下的 index.pug添加:

1 2	!=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache}) !=partial('includes/widget/card_map', {}, {cache:theme.fragment_cache})