hexo优化（一）

---
title: hexo优化（一）
date: 2019-03-03 20:29:20
tags: 
- hexo
- NEXT

---

目录：

[TOC]

<!--more-->

- 主题配置文件_config.yml在你使用的主题文件夹内

# 1.日程表出现404优化

- 今天的优化是让界面内不存在404链接，目前我的主题界面如下：
- 测试每个功能菜单后发现日程表打开出现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,然后添加社交站点名称与地址即可。
  
- 社交图标的设置在social—icons中，图标地址[Font Awesome图标地址 ](https://fontawesome.com/icons?from=io "Font Awesome图标地址 ")更改时注意大小写。
  

# 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数

当然，对于不蒜子的配置可以随意更改，下附上本人的配置：

# 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: