---
title: hexo优化(一)
date: 2019-03-03 20:29:20
tags:
- hexo
- NEXT
---
目录:
[TOC]
<!--more-->
- 主题配置文件_config.yml在你使用的主题文件夹内
# 1.日程表出现404优化
- 今天的优化是让界面内不存在404链接,目前我的主题界面如下:![](http://thyrsi.com/t6/676/1551622289x2890173753.png)
- 测试每个功能菜单后发现日程表打开出现404界面,出现原因未进行日程表配置。
# 2.头像设置
## 2.1添加头像
-
- 在配置文件中的字段为 `sidebar Avatar`
# Sidebar Avatar
avatar: /images/header.jpg
- 此处为头像的路径,只需将你的头像放入`themes/next/source/images`中,将avatar路径设置为该图像即可。
## 2.2设置头像边框为圆形
打开位于`themes/next/source/css/_common/components/sidebar/`下的`sidebar-author.syl`文件,修改如下
```
.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;
// 修改头像边框
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
```
## 2.3头像特效之旋转
```
.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;
// 修改头像边框
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
// 设置旋转
transition: 1.4s all;
}
// 可旋转的圆形头像,`hover`动作
.site-author-image:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-transform: rotate(360deg);
}
```
# 3.侧栏设置
## 3.1基础配置
- 在配置文件中的字段为`sidebar`
sidebar:
# Sidebar Position - 侧栏位置(只对Pisces | Gemini两种风格有效)
position: left//靠左放置
#position: right //靠右放置
# Sidebar Display - 侧栏显示时机(只对Muse | Mist两种风格有效)
#display: post//默认行为,在文章页面(拥有目录列表)时显示
display: always //在所有页面中都显示
#display: hide//在所有页面中都隐藏(可以手动展开)
#display: remove //完全移除
offset: 12//文章间距(只对Pisces | Gemini两种风格有效)
b2t: false//返回顶部按钮(只对Pisces | Gemini两种风格有效)
scrollpercent: true //返回顶部按钮的百分比
## 3.2设置社交链接
- 打开themes/next下的_config.yml文件,搜索关键字social,然后添加社交站点名称与地址即可。
![](http://thyrsi.com/t6/676/1551709518x2890211845.png)
- 社交图标的设置在social—icons中,图标地址[Font Awesome图标地址 ](https://fontawesome.com/icons?from=io "Font Awesome图标地址 ")更改时注意大小写。
![](http://thyrsi.com/t6/676/1551709764x2728278811.png)
# 4.添加站点访问计数
## 4.1、安装脚本
- 要使用不蒜子必须在页面中引入busuanzi.js,代码如下:
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
- 打开 themes/next/layout/_partial/footer.swig,将下面这段代码添加到里面
- 要显示站点总访问量,复制以下代码添加到你需要显示的位置。有两种算法可选:
- 算法a:pv的方式,单个用户连续点击n篇文章,记录n次访问量。
<div>
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv" style='display:none'>
本站总访问量 <span id="busuanzi_value_site_pv"></span> 次
<span class="post-meta-divider">|</span>
</span>
</div>
- 算法b:uv的方式,单个用户连续点击n篇文章,只记录1次访客数。
<span id="busuanzi_container_site_uv" style='display:none'>
有<span id="busuanzi_value_site_uv"></span>人看过我的博客啦
</span>
## 4.2主题_config.yml设置
- 找到关键字visitors count
# visitors count
```
counter: true
```
- 之后可以更改counter的值为false来隐藏页脚的访问量统计,然后,我们在themes/next/layout/_partial/footer.swig中添加以下代码:
{% if theme.footer.counter %}
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
<span class="post-meta-divider">|</span>
<span id="busuanzi_container_site_uv">本站访客数<span id="busuanzi_value_site_uv"></span>人</span>
{% endif %}
注:如果使用Next主题可以直接在主题配置文件中进行配置,具体操作如下:
1. 在_config.yml中找到关键字busuanzi_count,进行如下配置:
- 将enable的值由false改为true,便可以看到页脚出现访问量,上述配置表示:
- site_uv表示是否显示整个网站的UV数
- site_pv表示是否显示整个网站的PV数
- page_pv表示是否显示每个页面的PV数
当然,对于不蒜子的配置可以随意更改,下附上本人的配置:
![](http://thyrsi.com/t6/677/1551878464x2890171671.png)
# 5.RSS
- 在你的本地站点目录中安装
$ npm install hexo-generator-feed --save
- 在hexo的`_config.yml`添加如下配置
#feed
#Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
type: atom
path: atom.xml
limit: 20
hub:
content: