Hexo美化

hexo 博客优化

参考文献:

两个小人、星空背景、流星
添加标签云
添加访客地图
添加阿里巴巴矢量图标
icp备案
butterfly官方教程
配置双栏
鼠标样式
配置双栏
hexo-magnet、hexo-history等

hexo博客使用butterfly主题

初期配置

进入博客目录下

npm i hexo-theme-butterfly

然后在_config.yml之下使用这个主题:

theme: butterfly

安装渲染插件

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

之后在主界面之下创建一个新的文件，命名为{ % label _config.butterfly.yml blue % }

vi _config.butterfly.yml

将themes/butterfly/_config.yml中的内容全部copy进刚才创建的文件中，这个文件相当于用户自定义的文件，配置覆盖原来的配置

创建博客唯一链接：

npm install hexo-abbrlink --save

然后进入_config.yml:

permalink: :year/:month/:day/:title/
#修改为
  permalink: post/:abbrlink.html # post为自定义前缀
abbrlink:
  alg: crc32   #算法： crc16(default) and crc32
  rep: hex     #进制： dec(default) and hex

注意对齐格式为空格对齐，不能混用空格和tab，否则会报错

公告两个小人

两个小人，在`themes/butterfly/layout/includes/widget/card_announcement.pug’之中添加如下代码:

 .xpand(style='height:200px;')
  canvas.illo(width='800' height='800' style='max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;')
script(src='https://fastly.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/twopeople1.js')
script(src='https://fastly.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/zdog.dist.js')
script#rendered-js(src='https://fastly.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/twopeople.js')
style.
  .card-widget.card-announcement {
  margin: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  }
  canvas {
  display: block;
  margin: 0 auto;
  cursor: move;
  }

星空背景、流星动态，不可和樱花特效共存

在themes/butterfly/source/js下新建universe.js

function dark() {window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var n,e,i,h,t=.05,s=document.getElementById("universe"),o=!0,a="180,184,240",r="226,225,142",d="226,225,224",c=[];function f(){n=window.innerWidth,e=window.innerHeight,i=.216*n,s.setAttribute("width",n),s.setAttribute("height",e)}function u(){h.clearRect(0,0,n,e);for(var t=c.length,i=0;i<t;i++){var s=c[i];s.move(),s.fadeIn(),s.fadeOut(),s.draw()}}function y(){this.reset=function(){this.giant=m(3),this.comet=!this.giant&&!o&&m(10),this.x=l(0,n-10),this.y=l(0,e),this.r=l(1.1,2.6),this.dx=l(t,6*t)+(this.comet+1-1)*t*l(50,120)+2*t,this.dy=-l(t,6*t)-(this.comet+1-1)*t*l(50,120),this.fadingOut=null,this.fadingIn=!0,this.opacity=0,this.opacityTresh=l(.2,1-.4*(this.comet+1-1)),this.do=l(5e-4,.002)+.001*(this.comet+1-1)},this.fadeIn=function(){this.fadingIn&&(this.fadingIn=!(this.opacity>this.opacityTresh),this.opacity+=this.do)},this.fadeOut=function(){this.fadingOut&&(this.fadingOut=!(this.opacity<0),this.opacity-=this.do/2,(this.x>n||this.y<0)&&(this.fadingOut=!1,this.reset()))},this.draw=function(){if(h.beginPath(),this.giant)h.fillStyle="rgba("+a+","+this.opacity+")",h.arc(this.x,this.y,2,0,2*Math.PI,!1);else if(this.comet){h.fillStyle="rgba("+d+","+this.opacity+")",h.arc(this.x,this.y,1.5,0,2*Math.PI,!1);for(var t=0;t<30;t++)h.fillStyle="rgba("+d+","+(this.opacity-this.opacity/20*t)+")",h.rect(this.x-this.dx/4*t,this.y-this.dy/4*t-2,2,2),h.fill()}else h.fillStyle="rgba("+r+","+this.opacity+")",h.rect(this.x,this.y,this.r,this.r);h.closePath(),h.fill()},this.move=function(){this.x+=this.dx,this.y+=this.dy,!1===this.fadingOut&&this.reset(),(this.x>n-n/4||this.y<0)&&(this.fadingOut=!0)},setTimeout(function(){o=!1},50)}function m(t){return Math.floor(1e3*Math.random())+1<10*t}function l(t,i){return Math.random()*(i-t)+t}f(),window.addEventListener("resize",f,!1),function(){h=s.getContext("2d");for(var t=0;t<i;t++)c[t]=new y,c[t].reset();u()}(),function t(){document.getElementsByTagName('html')[0].getAttribute('data-theme')=='dark'&&u(),window.requestAnimationFrame(t)}()};
dark()

在themes/butterfly/source/css中新建universe.css：

/* 背景宇宙星光  */
#universe{
  display: block;
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

在根目录的_config.butterfly.yml中inject中配置bottom和head中添加:

inject: 
  bottom:
    # 星空背景
    - <canvas id="universe"></canvas>
    - <script defer src="/js/universe.js"></script>
  head:
    #星空背景
    - <link rel="stylesheet" href="/css/universe.css">

昼夜转换动画:

新建themes/butterfly/layout/includes/custom/sun_moon.pug

mkdir custom
cd custom
vi sum_moon.pug

添加代码:

svg(aria-hidden='true', style='position:absolute; overflow:hidden; width:0; height:0')
  symbol#icon-sun(viewBox='0 0 1024 1024')
    path(d='M960 512l-128 128v192h-192l-128 128-128-128H192v-192l-128-128 128-128V192h192l128-128 128 128h192v192z', fill='#FFD878', p-id='8420')
    path(d='M736 512a224 224 0 1 0-448 0 224 224 0 1 0 448 0z', fill='#FFE4A9', p-id='8421')
    path(d='M512 109.248L626.752 224H800v173.248L914.752 512 800 626.752V800h-173.248L512 914.752 397.248 800H224v-173.248L109.248 512 224 397.248V224h173.248L512 109.248M512 64l-128 128H192v192l-128 128 128 128v192h192l128 128 128-128h192v-192l128-128-128-128V192h-192l-128-128z', fill='#4D5152', p-id='8422')
    path(d='M512 320c105.888 0 192 86.112 192 192s-86.112 192-192 192-192-86.112-192-192 86.112-192 192-192m0-32a224 224 0 1 0 0 448 224 224 0 0 0 0-448z', fill='#4D5152', p-id='8423')
  symbol#icon-moon(viewBox='0 0 1024 1024')
    path(d='M611.370667 167.082667a445.013333 445.013333 0 0 1-38.4 161.834666 477.824 477.824 0 0 1-244.736 244.394667 445.141333 445.141333 0 0 1-161.109334 38.058667 85.077333 85.077333 0 0 0-65.066666 135.722666A462.08 462.08 0 1 0 747.093333 102.058667a85.077333 85.077333 0 0 0-135.722666 65.024z', fill='#FFB531', p-id='11345')
    path(d='M329.728 274.133333l35.157333-35.157333a21.333333 21.333333 0 1 0-30.165333-30.165333l-35.157333 35.157333-35.114667-35.157333a21.333333 21.333333 0 0 0-30.165333 30.165333l35.114666 35.157333-35.114666 35.157334a21.333333 21.333333 0 1 0 30.165333 30.165333l35.114667-35.157333 35.157333 35.157333a21.333333 21.333333 0 1 0 30.165333-30.165333z', fill='#030835', p-id='11346')

新建/themes/butterfly/source/css/layout/sun_moon.styl:

.Cuteen_DarkSky,
.Cuteen_DarkSky:before
  content ''
  position fixed
  left 0
  right 0
  top 0
  bottom 0
  z-index 88888888

.Cuteen_DarkSky
  background linear-gradient(#feb8b0, #fef9db)
  &:before
    transition 2s ease all
    opacity 0
    background linear-gradient(#4c3f6d, #6c62bb, #93b1ed)

.DarkMode
  .Cuteen_DarkSky
    &:before
      opacity 1

.Cuteen_DarkPlanet
  z-index 99999999
  position fixed
  left -50%
  top -50%
  width 200%
  height 200%
  -webkit-animation CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1)
  animation CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1)
  transform-origin center bottom


@-webkit-keyframes CuteenPlanetMove {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes CuteenPlanetMove {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.Cuteen_DarkPlanet
  &:after
    position absolute
    left 35%
    top 40%
    width 9.375rem
    height 9.375rem
    border-radius 50%
    content ''
    background linear-gradient(#fefefe, #fffbe8)

.search
  span
    display none

.menus_item
  a
    text-decoration none!important
//按钮相关，对侧栏按钮做过魔改的可以调整这里的数值
.icon-V
  padding 5px

新建themes/butterfly/source/js/sun_moon.js,

function switchNightMode() {
  document.querySelector('body').insertAdjacentHTML('beforeend', '<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>'),
    setTimeout(function() {
      document.querySelector('body').classList.contains('DarkMode') ? (document.querySelector('body').classList.remove('DarkMode'), localStorage.setItem('isDark', '0'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-moon')) : (document.querySelector('body').classList.add('DarkMode'), localStorage.setItem('isDark', '1'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-sun')),
        setTimeout(function() {
          document.getElementsByClassName('Cuteen_DarkSky')[0].style.transition = 'opacity 3s';
          document.getElementsByClassName('Cuteen_DarkSky')[0].style.opacity = '0';
          setTimeout(function() {
            document.getElementsByClassName('Cuteen_DarkSky')[0].remove();
          }, 1e3);
        }, 2e3)
    })
  const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
  if (nowMode === 'light') {
    activateDarkMode()
    saveToLocal.set('theme', 'dark', 2)
    GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
    document.getElementById('modeicon').setAttribute('xlink:href', '#icon-sun')
  } else {
    activateLightMode()
    saveToLocal.set('theme', 'light', 2)
    document.querySelector('body').classList.add('DarkMode'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-moon')
  }
  // handle some cases
  typeof utterancesTheme === 'function' && utterancesTheme()
  typeof FB === 'object' && window.loadFBComment()
  window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
}

在themes/butterfly/layout/includes/head.pug添加一行:

//- global config
!=partial('includes/head/config', {}, {cache: true})

include ./head/config_site.pug
include ./head/noscript.pug

!=fragment_cache('injectHeadJs', function(){return inject_head_js()})

!=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
+ include ./custom/sun_moon.pug

在themes/butterfly/layout/includes/rightside.pug,替换原来的昼夜替换：

when 'translate'
  if translate.enable
    button#translateLink(type="button" title=_p('rightside.translate_title'))= translate.default
when 'darkmode'
  if darkmode.enable && darkmode.button
     a.icon-V.hidden(onclick='switchNightMode()',  title=_p('rightside.night_mode_title'))
       svg(width='25', height='25', viewBox='0 0 1024 1024')
         use#modeicon(xlink:href='#icon-moon')

修改_config.butterfly.yml

inject:
  head:
  bottome:
    - <script src="/js/sun_moon.js" async></script>

引入Aplayer播放器:

npm install hexo-tag-aplayer --save

站点配置文件中_config.yml中添加新的配置项:

# APlayer
# https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md
aplayer:
  meting: true
  asset_inject: false

修改主题配置文件_config.butterfly.yml中配置内容：

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

在主题配置文件中添加容器:

inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="5183531430" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="false" muted></div>

找寻歌单，对应网站对应的data-id和其他数据：

• data-server => 平台名称。netease：网易；tencent：腾讯；xiami：虾米；kugou：酷狗；baidu：百度
• data-type=>类型。playlist：歌单；song：单曲；专辑：album；关键词：search；歌手：artist
• data-id =>音乐页面链接上的id号
  之后添加aplayer自动缩进隐藏,在’themes/butterfly/source/css/custom.css’中添加:

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
  left: -66px !important;
  /* 默认情况下缩进左侧66px，只留一点箭头部分 */
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
  left: 0 !important;
  /* 鼠标悬停是左侧缩进归零，完全显示按钮 */
}

阿里云矢量图标库:

首先注册阿里云矢量图标库,添加喜欢的图标到购物车，最后点击添加到项目(没有项目先添加项目)
最后在我的项目中:

最后点击我的项目，点击fontclass版本之下的cdn链接，在打开的文件中复制所有的文件到themes/butterfly/source/css/之下，新建命名为iconfont.css

使用方法：

iconfont icon-neovim #类似原来的fa fa-sda之类的

对iconfont可以修改，在iconfont.css中添加:

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px; //整体大小
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-SAG:before {
  content: "\e622";
}

.icon-wendang:before {
  content: "\e603";
  color:deepskyblue; //颜色
}

网站副标题:

在_config.butterfly.yml中直接修改,具体可看butterfly官方文档

# Site
title: Hexo
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） http://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  # source: 3
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
    - 我双手合十的愿望里永远有你。
    - 穿越人海，只为与你相拥。
    - 手握日月摘 ♥ 陈。

侧边栏设置:

在_config.butterfly.yml中进行设置,还是看官方文档

aside:
xxxx

访问人数、运行时间、字数统计

均在_config.butterfly.yml之中
访问人数：

busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

运行时间:

runtimeshow:
  enable: true
  publish_date: 6/7/2018 00:00:00  
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

字数统计

wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

侧边栏时钟

npm install hexo-butterfly-clock --save

然后在_config.yml中添加:

# electric_clock
# see https://akilar.top/posts/4e39cf4a/
electric_clock:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude:
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: class
    name: sticky_layout
    index: 0
  loading: https://npm.elemecdn.com/hexo-butterfly-clock/lib/loading.gif #加载动画自定义
  clock_css: https://npm.elemecdn.com/hexo-butterfly-clock/lib/clock.min.css
  clock_js: https://npm.elemecdn.com/hexo-butterfly-clock/lib/clock.min.js
  ip_api: https://pv.sohu.com/cityjson?ie=utf-8

live2d看板娘:

首先克隆原作者的到本地butterfly/sources之下：

git clone https://github.com/stevenjoezhang/live2d-widget.git  

进入live2d文件夹中，修改两处：
修改路径为第二行路径，将第一个注释掉

// live2d_path 参数建议使用绝对路径
//const live2d_path = "https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
const live2d_path = "/live2d-widget/";

将cdnPath注释掉，使用apiPath

// 加载 waifu.css live2d.min.js waifu-tips.js
if (screen.width >= 768) {
	Promise.all([
		loadExternalResource(live2d_path + "waifu.css", "css"),
		loadExternalResource(live2d_path + "live2d.min.js", "js"),
		loadExternalResource(live2d_path + "waifu-tips.js", "js")
	]).then(() => {
		// 配置选项的具体用法见 README.md
		initWidget({
			waifuPath: live2d_path + "waifu-tips.json",
			apiPath: "https://live2d.fghrsh.net/api/",
			//cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/",
			tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"]
		});
	});
}

使用inject添加三个参数：

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

在_config.butterfly.yml之中添加:

live2d:
  enable: true

搜索系统

npm install hexo-generator-search --save   

然后_config.butterfly.yml之中添加:

# Local search
local_search:
  enable: true
  preload: true
  CDN:

search:
  path: search.xml
  field: all
  content: true
  template: ./search.xml

标签云

npm install hexo-tag-cloud --save

然后添加文字到butterfly/layout/include/widget/card_tags.pug

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'})

添加访客地图

在此之前得有个 clustrmaps 账号，前往 clustrmaps 网站注册一个帐号
找到 Free Tools 下面的 Website Widget, 点击 Get Map Widget,输入你的博客网址
点击 Next
根据你自己的喜好选择样式 Map widget 或 Globe Widget（建议选第二个）
找到如下代码，记住 src (** 的部分):

<script type="text/javascript" id="clstr_globe" src="**********************">

添加和修改模版:
在 themes\Butterfly\layout\includes\widget文件夹新建card_map.pug 文件，文件内容如下：

.card-widget.card-map
  .card-content
    .item-headline
      i.fa.fa-globe-asia(aria-hidden="true")
      span= _p('aside.card_map')
    script#clstr_globe(type="text/javascript" defer="defer" src="此处填入你自己的代码")

修改themes\Butterfly\layout\includes\widget\index.pug 文件，在你想要显示的位置插入以下代码：

if theme.aside.card_map
        !=partial('includes/widget/card_map', {}, {cache:theme.fragment_cache})

在 butterfly.yml 文件，找到 card_webinfo 下面添加一行card_map: true
编辑 themes\Butterfly\languages\zh-CN.yml 文件 (根据你的网站语言选择)，找到 card_announcement: 公告 , 在下面添加一行 card_map: 访客地图 (后面的文本可自定义)
如果不想显示，直接把 butterfly.yml 文件的card_map: true 改为 card_map: false 即可

icp备案

在_config.butterfly.yml之中添加:

Footer:
ICP:
  enable: true  # 是否启用ICP
  url: https://beian.miit.gov.cn/  # 点击后的链接地址
  text: 粤ICP备2021177866号 # 更改成自己的备案号
  icon:    # 图标

放置图标到/themes/butterfly/source/img之中(图标可以在任一一个已经备案的网站中找到)
在themes/butterfly/layout/includes/footer.pug中添加:

if theme.ICP.enable
  .icp
    a(href=theme.ICP.url)
      if theme.ICP.icon
        img.icp-icon(src=url_for(theme.ICP.icon))
      span=theme.ICP.text
  if theme.NSP.enable
  .icp
    a(href=theme.NSP.url)
      if theme.NSP.icon
        img.icp-icon(src=url_for(theme.NSP.icon))
      span=theme.NSP.text
  if theme.footer.custom_text
    .footer_custom_text!=`${theme.footer.custom_text}`

鼠标样式修改:

在themes\butterfly\source\css中新建mouse.css文件:

body {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),
        default;
}
a,
img {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),
        default;
}

在_config.butterfly.yml中inject注入:

inject:
  head:
  - <link rel="stylesheet" href="/css/mouse.css">

twikoo评论

twikoo

post子目录

// themes\Butterfly\layout\post.pug
// 注意直接在文件开始添加
extends includes/layout.pug

block content
  #post
    if top_img === false
      include includes/header/post-info.pug
		
    //- 添加二級目錄 start
    if page.series
      div.post-series
        h3 #{page.series}-系列：
        - let list = site.posts.sort('date', -1)
        - list.each(function(article){
          if article.series == page.series
            - let link = article.link || article.path
            - let title = article.title || _p('no_title')
            li
              a.title(href=url_for(link) title=title)= title
        - })
    //- 添加二級目錄 end

    article#article-container.post-content!=page.content

这样设置能够自动添加series

// scaffolds\post.md
---
title: {{ title }}
date: {{ date }}
series: 
tags:
categories:
---

最后在post中添加相同的series即可。

hexo-swiper文章置顶插件

npm i hexo-swiper-bar --save

• 在_config.yml下添加配置项

swiper:
  enable: true
  priority: 2
  enable_page: /
  layout:
    type: id
    name: recent-posts
    index: 0
  temple_html: '<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container">${temple_html_item}</div></div>'
  plus_style: ""

使用方法:
在Front-matter参数下添加，index越靠前，显示越前

swiper_index: 8
swiper_desc: 简单好用的 hexo 博客文章置顶插件！
swiper_cover: /images/letter/p.png

hexo-history-calender历史上的今天

npm i hexo-history-calendar --save

在_config.yml中添加:

history_calendar:
  priority: 4
  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-magnet插件1.0

npm i hexo-magnet --save

在根目录的_config.yml中添加:

magnet:
  enable: true
  priority: 1
  enable_page: /
  type: categories
  devide: 2
  display:
    - name: hexo
      display_name: 写一个Hexo博客
      icon: 📚
    - name: linux
      display_name: Linux安装和学习
      icon: iconfont icon-linux
    - name: neovim
      display_name: neovim学习
      icon: iconfont icon-neovim
  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-githubcalendar

npm i hexo-magnet --save

接着在_config.yml中进行编写:

# Ice Kano Plus_in
# Hexo Github Canlendar
# Author: Ice Kano
# Modify: Lete乐特
githubcalendar:
  enable: true
  priority: 3
  enable_page: /
  user: zfour #使用github就改为自己Github用户名，我使用的阿里云，对我是没有用的。
  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://gitcalendar.zfe.space/api
  # api: https://python-gitee-calendar-api.vercel.app/api
  calendar_js: https://cdn.jsdelivr.net/gh/Zfour/hexo-github-calendar@1.21/hexo_githubcalendar.js
  plus_style: ""

由于公共api被墙，所以采用备用api。具体可以查看作者的议题