hi
终于折腾了小半个月把博客成功挂在了服务器上,其间出现的不少的问题,在解决问题的过程中也了解了不少的东西,一直挺喜欢记录一些东西以证明学过些什么,希望以后能继续坚持下去。
这篇文章主要记录hexo博客下个性化定制的细节和优化,预计只完成大体部分,自己看着顺眼就好,然后再学习一下markdown的使用方法大概就结束这一阶段的折腾。
hexo官方文档下的配置
在_config.yml中进行大部分的配置
- 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主题文件夹下的/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
在这里可以看到模板 滴滴滴
大致框架就是这样,以后还会陆续进行修改增加。
放一个博客配置比较全面的链接在这里!