Next博客配置

发表于 2021-03-28 分类于 Config

在将近一年没有写博客之后，我又重新捡起之前的博客开始写了。至于为什么想写博客呢，小土刀的博客中提到

我睡觉的时候大家的夜生活才刚刚开始，我醒来的时候大家却仍在熟睡，每天在禅修中等待天亮。想找人聊聊最近读的书，但是却没有志趣相投的，平日的聊天也大都跟技术相关，不怪乎其他专业的人觉得我们无趣了。我找不到人聊政治制度，找不到人聊历史，找不到人聊心理学，找不到人聊经济，我只能自己跟自己聊。

这就是我写博客的原因，这是我跟自己沟通的方式。我们每天每时每刻都有可能冒出各种各样光怪陆离的想法，这些想法在当时无比清晰，但是保质期却很短，常常睡一觉就变质，而写博客就是把这些想法打磨和雕琢的方法之一。通过写博客，我得意把这些想法永久地保存下来。

不得不说，这一年来，不写博客的确思索少了很多，没有像之前一样，学过什么之后就及时回顾，只是记得一些大概的细节。之后应该会更新一下之前停滞的数据库系统和分布式系统系列，再写研究方向(自然语言处理)的分析。

博客基于hexo框架搭建，选择主题为next，其余可以选择主题参照，给出的github链接里面一般会有基于该主题搭建的博客样式和具体操作。比较推荐的有yilia主题、annie主题、cactus-light主题、fluid主题、butterfly主题，具体操作可以看博主搭建个人博客的博客。拿我来说，选择主题标准主要是简洁、博客特效不花(否则容易分散博客阅读的精力)、容易搭建，next的star数量远远高于其他主题，目前作者维持每月一更的进度，bug不太多，所以就选择了next主题。基于next有诸多博客样例，其中个人比较喜欢小丁的个人博客、yearito’s blog、荷七博客、七夏浅笑、idefun这几个，idefun的个人简历页似乎还可以直接编辑。个性化定制主要是css具体样式定制和next主页里的选项，next个性化之后也有界面类似于butterfly主题，个性美化可以参照，样式设置可以参照。

现在 star 在 1k 以上的榜单如下：

iissnan/hexo-theme-next, Elegant theme for Hexo., 15.5k

litten/hexo-theme-yilia, 一个简洁优雅的hexo主题 A simple and elegant theme for hexo., 7.8k

theme-next/hexo-theme-next, Elegant and powerful theme for Hexo., 6.3k

ppoffice/hexo-theme-icarus, A simple, delicate, and modern theme for the static site generator Hexo., 4.3k

viosey/hexo-theme-material, Material Design theme for hexo., 3.9k

blinkfox/hexo-theme-matery, A beautiful hexo blog theme with material design and responsive design.一个基于材料设计和响应式设计而成的全面、美观的Hexo主题, 2.9k

yscoder/hexo-theme-indigo, 一个Material Design风格的Hexo主题。 Yusen’s Blog, 2.7k

fluid-dev/hexo-theme-fluid, 一款 Material Design 风格的 Hexo 主题 / An elegant Material-Design theme for Hexo, 2.1k

probberechts/hexo-theme-cactus, A responsive, clean and simple theme for Hexo., 1.8k

pinggod/hexo-theme-apollo, a concise hexo theme, 1.8k

jerryc127/hexo-theme-butterfly, A Hexo Theme: Butterfly, 1.8k

LouisBarranqueiro/hexo-theme-tranquilpeak, A gorgeous responsive theme for Hexo blog framework, 1.7k

Molunerfinn/hexo-theme-melody, A simple & beautiful & fast theme for Hexo., 1.3k

ahonn/hexo-theme-even, A super concise theme for Hexo, 1.2k

fi3ework/hexo-theme-archer, A smart and modern theme for Hexo., 1.1k

ppoffice/hexo-theme-hueman, A redesign of Alx’s wordpress theme Hueman, ported to Hexo., 1.1k

forsigner/fexo, A minimalist design theme for hexo., 1.1k

wuchong/jacman, Jacman is a fresh looking and responsive theme for Hexo with more features based on Pacman., 1k

shenliyang/hexo-theme-snippet, Snippet 简洁而不简单，也许是一款你寻找已久的hexo主题, 971

volantis-x/hexo-theme-volantis, A Wonderful Theme for Hexo Volantis, 960

安装

前期是基本的hexo操作，参照官方文档执行。

安装前提

安装 Hexo 相当简单，只需要先安装下列应用程序即可：

Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
Git

安装 Git

Windows：下载并安装 git.
Mac：使用 Homebrew, MacPorts 或者下载安装程序。
Linux (Ubuntu, Debian)：sudo apt-get install git-core
Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

Mac 用户

如果在编译时可能会遇到问题，请先到 App Store 安装 Xcode，Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

Windows 用户

对于中国大陆地区用户，可以前往淘宝 Git for Windows 镜像下载 git 安装包。

安装 Node.js

Node.js 为大多数平台提供了官方的安装程序。对于中国大陆地区用户，可以前往淘宝 Node.js 镜像下载。

其它的安装方法：

Windows：通过 nvs（推荐）或者nvm 安装。
Mac：使用 Homebrew 或 MacPorts 安装。
Linux（DEB/RPM-based）：从 NodeSource 安装。
其它：使用相应的软件包管理器进行安装，可以参考由 Node.js 提供的指导

对于 Mac 和 Linux 同样建议使用 nvs 或者 nvm，以避免可能会出现的权限问题。

Windows 用户

使用 Node.js 官方安装程序时，请确保勾选 Add to PATH 选项（默认已勾选）

For Mac / Linux 用户

如果在尝试安装 Hexo 的过程中出现 EACCES 权限错误，请遵循由 npmjs 发布的指导修复该问题。强烈建议不要使用 root、sudo 等方法覆盖权限

Linux

If you installed Node.js using Snap, you may need to manually run npm install in the target folder when initializing a blog.

安装 Hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

1	$ npm install -g hexo-cli

进阶安装和使用

对于熟悉 npm 的进阶用户，可以仅局部安装 hexo 包。

1	$ npm install hexo

安装以后，可以使用以下两种方式执行 Hexo：

npx hexo <command>
将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo <command>：
1
echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile
基本指令

init

1	$ hexo init [folder]

新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。

This command is a shortcut that runs the following steps:

Git clone hexo-starter including hexo-theme-landscape into the current directory or a target folder if specified.
Install dependencies using a package manager: Yarn 1, pnpm or npm, whichever is installed; if there are more than one installed, the priority is as listed. npm is bundled with Node.js by default.

new

1	$ hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

1	$ hexo new "post title with whitespace"

参数	描述
`-p`, `--path`	自定义新文章的路径
`-r`, `--replace`	如果存在同名文章，将其替换
`-s`, `--slug`	文章的 Slug，作为新文章的文件名和发布后的 URL

默认情况下，Hexo 会使用文章的标题来决定文章文件的路径。对于独立页面来说，Hexo 会创建一个以标题为名字的目录，并在目录中放置一个 index.md 文件。你可以使用 --path 参数来覆盖上述行为、自行决定文件的目录：

1	hexo new page --path about/me "About me"

以上命令会创建一个 source/about/me.md 文件，同时 Front Matter 中的 title 为 "About me"

注意！title 是必须指定的！如果你这么做并不能达到你的目的：

1	hexo new page --path about/me

此时 Hexo 会创建 source/_posts/about/me.md，同时 me.md 的 Front Matter 中的 title 为 "page"。这是因为在上述命令中，hexo-cli 将 page 视为指定文章的标题、并采用默认的 layout。

generate

1	$ hexo generate

生成静态文件。

选项	描述
`-d`, `--deploy`	文件生成后立即部署网站
`-w`, `--watch`	监视文件变动
`-b`, `--bail`	生成过程中如果发生任何未处理的异常则抛出异常
`-f`, `--force`	强制重新生成文件 Hexo 引入了差分机制，如果 `public` 目录存在，那么 `hexo g` 只会重新生成改动的文件。使用该参数的效果接近 `hexo clean && hexo generate`
`-c`, `--concurrency`	最大同时生成文件的数量，默认无限制

该命令可以简写为

$ hexo g

publish

1	$ hexo publish [layout] <filename>

发表草稿。

server

1	$ hexo server

启动服务器。默认情况下，访问网址为： http://localhost:4000/。

选项	描述
`-p`, `--port`	重设端口
`-s`, `--static`	只使用静态文件
`-l`, `--log`	启动日记记录，使用覆盖记录格式

deploy

1	$ hexo deploy

部署网站。

参数	描述
`-g`, `--generate`	部署之前预先生成静态文件

该命令可以简写为：

$ hexo d

render

1	$ hexo render <file1> [file2] ...

渲染文件。

参数	描述
`-o`, `--output`	设置输出路径

migrate

1	$ hexo migrate <type>

从其他博客系统迁移内容。

clean

1	$ hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。

平时写博客的时候，一般流程是

hexo new page/post "title" 新建为title的.md文件
hexo clean && hexo s 清楚之前生成的文件，部署到本地服务器
hexo g -d 部署到远程服务器

next 配置

next官方中文文档更新比较慢，不少特性和配置没有及时发布，主要参考英文文档。

传统方式是配置两个文件，一个是站点下，即blog/下的_config.yml文件，称为站点配置文件，另一个是themes/next目录下的_config.yml，称为主题配置文件。

从next7.3.0开始，官方推荐将主题配置文件与主题分离，以便于主题的版本更新。

我们可以将所有主题配置放在一个位置（hexo/source/_data/next.yml）。这样就无需编辑主题配置文件（next/_config.yml）。

具体步骤：

在 hexo/source/_data 目录中创建 next.yml（如果_data 不存在，则创建目录）。
在 next.yml 设置 override 选项为 true。
将所有 NexT 主题选项从主题配置文件复制到 hexo/source/_data/next.yml 中。

然后我们只需要根据自己的需求配置 next.yml 即可。

基本信息配置

next主题的安装，站点作者、头像、侧边栏的配置参考文档，

具体站点的部署通过github操作，具体配置参考官方文档，在站点blog/_config.yml最后一行配置以下信息：

deploy:
  type: git
  repo: https://github.com/twinkle0331/twinkle0331.github.io.git
  branch: master

更为详细的配置参考官方文档，具体参数和设置里面都很详细。

个性化设置

设置网页链接为title.html格式而不是2021/03/28/title.html格式：

1	permalink: :title/

选择主题为next：

1	theme: next

设置缓存生成模式：

# Allow to cache content generation.
cache:
  enable: true

# Remove unnecessary files after hexo generate.
minify: true

选择sheme为Mist:

1	scheme: Mist

menu显示home、about、tags、categories、archives五栏，之前版本的next需要设定具体对应的中文名，在版本升级后，设定语言后自动更改对应的标签栏。

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

生成“分类”页并添加tpye属性

进入博客所在文件夹。执行命令

1	$ hexo new page categories

成功后会提示：

1	INFO Created: ~/Documents/blog/source/categories/index.md

根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：

---
title: 文章分类
date: 2021-03-28 13:47:40
---

添加type: "categories"到内容中，添加后是这样的：

---
title: 文章分类
date: 2021-03-28 13:47:40
type: "categories"
---

保存并关闭文件。

给文章添加“categories”属性

打开需要添加分类的文章，为其添加categories属性。下方的categories: web前端表示添加这篇文章到“web前端”这个分类。注意：hexo一篇文章只能属于一个分类，也就是说如果在“- web前端”下方添加“-xxx”，hexo不会产生两个分类，而是把分类嵌套（即该文章属于 “- web前端”下的 “-xxx ”分类）。

---
title: jQuery对表单的操作及更多应用
date: 2017-05-26 12:12:57
categories: 
- web前端
---

至此，点击首页的“分类”可以看到该分类下的所有文章。当然，只有添加了categories: xxx的文章才会被收录到首页的分类标签栏中。

其余属性页面的添加类似

添加本地搜索：

# 本地搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 100

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

添加代码高亮：

# _config.yml
highlight:
  enable: true
  auto_detect: false
  line_number: true
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

设置内容宽度

打开/themes/next/source/css/_variables/base.styl文件，找到Layout sizes字段修改如下

1
2
3

$content-desktop                = 70%;
$content-desktop-large          = 70%;
$content-desktop-largest        = 70%;

由之前的固定像素值更改为比例(画面宽度占屏幕的比例)

在blog/source/_data/style.styl(若无则新建文件/文件夹)下添加以下样式

// 主页文章添加阴影效果
.post {
  margin-top: 60px;
  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);
 }


// 标题栏背景
.site-meta {
    padding: 20px 0;
    color: #fff;
    background-image: url(/images/95033e2a5404c30e2ab560e72b157a0a.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: 100% 100%;
}  


// 修改主体透明度
.main-inner{
    background: #fff;
    opacity: 0.85;

}

//页脚文字
.footer,.footer a,.footer .with-love{
  //color: #31ff00
}


// 修改链接样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  &:hover {
    color: #ff8c00;
  }
}

a, span.exturl {
  border-bottom: none;
  &:hover {
    color: #ff8c00;
  }
}

//设置标签样式
.tag-cloud a {
    box-shadow: 0 1px 3px #6f42c1, 0 1px 2px #d9534f;
    padding: 2px 10px;
    margin: 8px;
    background: rgba(193,66,92,0);
    border-bottom: none;
    border-radius: 20px;
}

安装