Hexo主题美化-第三期

设置头像不旋转

当鼠标移到侧边栏头像上时，头像会播放旋转动效，要想禁用可以找到
themes\butterfly\source\css_layout\aside.styl文件并按照如下对transform: unset修改即可完成动效屏蔽。

.avatar-img
  overflow: hidden
  margin: 0 auto
  width: 110px
  height: 110px
  border-radius: 70px

  img
    width: 100%
    height: 100%
    transition: filter 375ms ease-in .2s, transform .3s
    object-fit: cover

    &:hover
      transform: unset

Butterfly主题升级问题

为了減少升级主题带来的不便，我们还需要做以下操作：
把主题文件夹中的 _config.yml 复制到 Hexo 根目录下，同重命名为 _config.butterfly.yml

代码块美化

# Code Blocks (代码块样式)
# --------------------------------------
highlight_theme: mac #  darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button 是否显示复制按钮
highlight_lang: true # show the code language 展示代码块语言
highlight_shrink: false # true: 打开文章默认折叠代码块内容 / false: 打开文章默认展开代码块内容
highlight_height_limit: false # unit: px
code_word_wrap: true #是否关闭横向滚动条（自动换行）

图片加载失败动画

# 安装插件
npm install hexo-lazyload-image --save

在主目录配置文件_config.yml增加配置

lazyload:
  enable: true
  loadingImg: /img/loading.gif

侧边栏样式

以下修改主题配置文件_config.butterfly.yml

侧边栏位置

aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or right 我的是右边

个人信息

...
card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me #按钮文字
      link: https://github.com/xxxxxx #可以放上自己的github地址    

社交图标

# social settings (社交圖標設置)
# formal:
#        icon: link || the description
#书写格式：图标名：url || 描述性文字`
social:
   fab fa-github: https://githubfast.com/lyr233 || Github
   fa fa-book-open: https://blog.csdn.net/YR_112233 || CSDN
   fab fa-qq:  tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=728831102&website=www.oicqzone.com || QQ
   fas fa-envelope-open-text: mailto:728831102@qq.com || Email

公告栏设置

...
card_announcement:
    enable: true
    content: This is my Blog #修改公告栏信息

字数统计

npm install hexo-wordcount --save

编辑主题配置文件

# wordcount (字數統計)
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

社交图标不旋转

编辑themes/butterfly/source/css/_layout/aside.styl，找到social-icon，设置transform为unset

设置浏览量

参考自建不蒜子页面搭建不蒜子服务，并修改主题文件

# 修改API
inject:
  bottom:
    - <script defer pjax data-api="https://busuanzi.lin8177.top/api" data-prefix="busuanzi_value" src="https://busuanzi.lin8177.top/js"></script>

# 修改CDN
busuanzi: https://example.com/js

修改导航栏常驻

主题配置文件中修改成下方样式

nav:
  logo:
    display_title: true
    display_post_title: true
    fixed: false

加载页面

修改主题配置文件夹

preloader:
  enable: true           # 开启加载页面
  load_style: 1          # 样式（1 / 2）