干技术怎么能不搭建个人博客呢（二 ❤ hexo主题nexT使用-主题美化）干技术怎么能不搭建个人博客呢（二 ❤ hexo

干技术怎么能不搭建个人博客呢（二 ❤ hexo主题nexT使用-主题美化）

https://github.com/iissnan/hexo-theme-next

1、主题简单配置

Next主题主要分为四种scheme，可以在主题文件的_config.yml文件中进行选择，分别是Muse、Mist、Pisces、Gemini；

下载

git clone https://github.com/iissnan/hexo-theme-next themes/next

我主要选用的是Gemini风格

2、Next常规配置

个人信息配置

在站点的_config.yml文件中进行配置：

title: 陶白&博客
subtitle: 学无止境
description: 路漫漫其修远兮，吾将上下而求索。
keywords: 陶白,北安南栎，博客
author: tbai
language: zh-CN # 主题语言
timezone: Asia/Shanghai #中国的时区，不要乱改城市

头像配置

将头像放置在themes/next/source/images/中，然后在主题中打开_config.yml文件中进行配置：

avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /img/avatar.jpg #将我们的头像图片放置在blog/themes/next/source/images目录下，填写具体地址
  # If true, the avatar would be dispalyed in circle.
  rounded: false #鼠标放在头像上时是否旋转
  opacity: 1 #头像放缩指数
  # If true, the avatar would be rotated with the cursor.
  rotated: true #头像是否设为圆形，否则为矩形

其它常规配置

# Table Of Contents in the Sidebar
toc:
  enable: true #是否自动生成目录
  # Automatically add list number to toc.
  number: false #目录是否自动产生编号
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false #标题过长是否换行
  # Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` var.
  max_depth: 6 #最大标题深度
# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12 #侧边栏相对主菜单像素距离
  # Back to top in sidebar.
  b2t: true #是否提供一键置顶
  # Scroll percent label in b2t button.
  scrollpercent: true #是否显示当前阅读进度
  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: false #手机上是否显示侧边栏

菜单栏配置

在主题中打开_config.yml文件中进行配置：

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

系统自动帮我们创建了home和archives页面，所以我们只需要使用终端创建tags和categories页面即可

$ cd hexo文件目录
$ hexo new page "tages"
$ hexo new page "categories"

3、添加搜索功能

1、安装 hexo-generator-searchdb 插件

$ cd 文件目录
$ npm install hexo-generator-searchdb --save

2、打开站点配置文件_config.yml,找到Extensions在下面添加:

# 搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

3、打开主题配置文件_config.yml,找到Local search，将enable设置为true。

4、添加分类、标签、关于

1. hexo new page "about"
2. hexo new page "tags"
3. hexo new page "categories"

5、增加categories: 书籍

只要搭建好了categories界面，然后在自己的博客里面增加上面categories即可

6、设置菜单项的显示中文文本

打开 themes/next/languages/zh-Hans.yml 文件,搜索 menu 关键字，修改对应中文或者新增。

7、Hexo NexT主题更改语言

打开站点配置文件：站点根目录/_config.ymlspa

而后搜索找到language属性，属性值配置成zh-Hans，表示中文c
language: zh-Hans

8、设置头像边框为圆形框

打开位于 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%;
}

9、hexo之next主题添加分类

编辑新建界面，将页面类型设置为categories，主题将会在这个页面上显示所有的分类：

---
title: categories
date: 2018-03-02 12:33:16
type: "categories"
---
然后在需要的地方添加【categories：分类】就可以

10、主页文章添加边框阴影效果

打开 themes/next/source/css/_custom/custom.styl ,向里面加代码:

// 主页文章添加阴影效果
.post {
   margin-top: 0px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

11、修改文章间分割线

打开 themes/next/source/css/_common/components/post/post-eof.styl ,修改：

.posts-expand {
  .post-eof {
    display: block;
  //  margin: $post-eof-margin-top auto $post-eof-margin-bottom;  
    width: 0%; //分割线长度
    height: 0px; // 分割线高度
    background: $grey-light;
    text-align: center;
  }
}

12、代码块自定义样式

// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 边框的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

🍯 Next主题优化

前言

在Hexo的模板中选择了Next主题，看中了Gemini风格。特意修改了一下，以满足使用

找到themes中的next文件夹，进入/source/css/_variables/目录，打开Gemini.styl文件
置$body-bg-color，改变页面背景色。

页面底部主题信息删除

打开themes中的next文件夹，找到_config.yml文件，修改footer下面的配置为false即可

页面顶部黑色线条删除

打开themes中的next文件夹，找到/source/css/_common/components/header/headerband.styl文件，删除background样式即可

可能遇到的问题

环境要求

对于node环境要求在这里插入图片描述

网速过慢

npm是从国外服务器下载，速度慢可能出现异常，所以我们可以安装cnpm来替换npm

# 终端输入
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
#查看安装版本
$ cnpm -v

安装淘宝镜像文件【后续补充】

安装淘宝镜像文件 【后续补充】
git config --global user.name "Lourance"
git config --global user.email "2455067339@qq.com"

# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。
可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

本地推送到远程仓库出的问题解决

[remote rejected] master -> master (hook declined) error: failed to push some refs to

解决方法：码云的解决方法 ： 设置>多邮箱管理>公开

终端输入“hexo clean”报错，正确做法是：

首先定位到博客文件夹，输入以下命令并回车： cd /Users/你的用户文件夹名/你的 blog 文件夹名【我的 tbai】开启 root 权限（超级管理员权限），输入以下命令并回车： sudo su 最后一步，依次输入 hexo 三连并回车：

$ hexo clean
$ hexo g
$ hexo d

Gitee上出现未可知的违规信息

检查以后发现是文章里面有 &  ，Gitee
// 删除以后再次更新正常

hexo博客使用Next主题，将主题改为子主题Gemini后，用hexo s启动服务器本地查看正常，但hexo d推送至服务器后，服务器端的主题并没有改变。

解决方法
使用命令hexo clean清除缓存后，再重新使用hexo g编译，最后再用hexo d推送即可。

markdown主题图片不显示

问题：改主题为Gemini时，hexo clean，hexo g，hexo d 三个命令完成后主题未改变

解决办法：删除next下的.git文件夹（这好像是个隐藏文件夹），再上传时修改成功。

附：后来我又发现用 hexo s 命令查看网页部署时是成功的，但是 hexo d 部署到GitHub上就不行，后来等一会就行了，可能是有延迟。

我的博客以及相关其他博客

https://tbai.top 我的博客

// 其他好看的博客
https://lovelijunyi.gitee.io/
https://sunhwee.com/

干技术怎么能不搭建个人博客呢（二 ❤ hexo主题nexT使用-主题美化）