hexo优化（一）

最新推荐文章于 2024-02-29 00:38:49 发布

坠入my

最新推荐文章于 2024-02-29 00:38:49 发布

阅读量329

点赞数 1

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

---

[TOC]

- 主题配置文件_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`文件,修改如下

## 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，代码如下：

- 打开 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: