Hexo+Next主题个人博客的优化

hi

终于折腾了小半个月把博客成功挂在了服务器上，其间出现的不少的问题，在解决问题的过程中也了解了不少的东西，一直挺喜欢记录一些东西以证明学过些什么，希望以后能继续坚持下去。

这篇文章主要记录hexo博客下个性化定制的细节和优化，预计只完成大体部分，自己看着顺眼就好，然后再学习一下markdown的使用方法大概就结束这一阶段的折腾。

 

hexo官方文档下的配置

在_config.yml中进行大部分的配置

hexo官方 配置

• menu菜单栏：去掉#即可显示

menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

发现创建标签成功，但点击进入后并没有相关页面，则创建相关页面

$ hexo n page tags
$ hexo n page categories

打开myblog/source/categories目录下的index.md，修改内容为以下：

---
title: 分类
date: 2018-09-14 12:18:35
type: categories
---

 

NexT官方文档配置

NexT官方文档

• 头像：

     将文件保存在next主题文件夹下的/images/avatar.png，配置文件中修改avatar项

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: /images/avatar.png

   头像设置为圆形

   打开站点下的 myblog/themes/next/source/css/_common/components/sidebar/sidebar-author.styl文件 ,在.site-author-image选择器的末尾（右括号前）添加

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  opacity: hexo-config('avatar.opacity') is a 'unit' ? hexo-config('avatar.opacity') : 1;

  border-radius: 50%;
  transition: 2s all;
}

.site-author-image:hover{
  transform: rotate(360deg);
}

 

• 浏览器标签

       将一张图标32x32像素大小的图标favicon.jpg放入myblog/themes/next/source/images目录里，打开myblog/themes /next/_config.yml主题配置文件，搜索关键字favicon，找到如下代码块，并做相应修改。

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

• 首页文章缩略

   myblog/themes/next/_config.yml主题配置文件

auto_excerpt:
  enable: ture
  length: 150

• 站点访问统计

     next主题默认集成了第三方访问统计插件。

    编辑myblog/themes/next/layout/_third-party/analytics/busuanzi-counter.swig，找到以下代码：

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

#改为（）主要改链接内容

<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

     只需要打开myblog/themes/next/_config.yml主题配置文件，搜索关键字busuanzi_count。

     将enable的值改为true,并对站点UV配置、站点PV配置、单页面PV进行配置。如下：

busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user">本站访客数</i>
  site_uv_footer:人次
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye">本站总访问量</i>
  site_pv_footer:次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o">本文总阅读量</i>
  page_pv_footer:次

• 背景图案的更改

   hexo\themes\next\source\images\ 的路径下存放图片

   修改themes\next\source\css\ _custom\custom.styl文件，添加以下代码

body {
    background:url(/images/图片.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size:cover;
}

修改不透明度

.main-inner {
    opacity: 0.85;
}

• 打赏功能

    主题配置文件中：

reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

• 看板娘

npm install --save hexo-helper-live2d

官方提供了以下模型名称：

        live2d-widget-model-chitose
        live2d-widget-model-epsilon2_1
        live2d-widget-model-gf
        live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
        live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
        live2d-widget-model-haruto
        live2d-widget-model-hibiki
        live2d-widget-model-hijiki
        live2d-widget-model-izumi
        live2d-widget-model-koharu
        live2d-widget-model-miku
        live2d-widget-model-ni-j
        live2d-widget-model-nico
        live2d-widget-model-nietzsche
        live2d-widget-model-nipsilon
        live2d-widget-model-nito
        live2d-widget-model-shizuku
        live2d-widget-model-tororo
        live2d-widget-model-tsumiki
        live2d-widget-model-unitychan
        live2d-widget-model-wanko
        live2d-widget-model-z16

在这里可以看到模板 滴滴滴

 

 

大致框架就是这样，以后还会陆续进行修改增加。

放一个博客配置比较全面的链接在这里！