亲们小编又回来了，之前uiscc是采用phpcms内容管理系统的一个小博客，经过几次搬家折腾基本已经报废（程序健壮性不强啊），惆怅我良久不知道换什么程序来搞，直到看到hexo顿感这才是我一直苦苦寻找的博客程序啊。下面小编汇报一下hexo基于Node.js的静态博客程序得大致用法和在做uiscc这个模板时候总结的经验。

什么是 Hexo？

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析伟德伟诺官网，在几秒内，即可利用靓丽的主题生成静态网页。

安装

安装 Hexo 只需几分钟时间，若您在安装过程中遇到问题或无法找到解决方式，请在github上提交问题，社区会尽力解决您的问题。

安装前提

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

1

$ npm install -g hexo-cli

建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3

$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
9

.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml

网站的 配置 信息，您可以在此配置大部分的参数。

package.json

应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

1
2
3
4
5
6
7
8
9
10
11
12
13

{
  "name": "hexo-site",
  "version": "",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo-renderer-ejs": "*",
    "hexo-renderer-stylus": "*",
    "hexo-renderer-marked": "*"
  }
}

scaffolds

模版 文件夹。当您新建伟德伟诺官网时，Hexo 会根据 scaffold 来建立文件。

scripts

脚本 文件夹。脚本是扩展 Hexo 最简易的方式，在此文件夹内的 JavaScript 文件会被自动执行。

source

资源文件夹是存放用户资源的地方。除 posts 文件夹之外，开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes

主题 文件夹。Hexo 会根据主题来生成静态页面。

配置

您可以在 _config.yml 中修改大部份的配置。

网站

Hexo全局配置

用文本编辑器修改_config.yml这个文件 大致如下 只需要自行修改几个 其他保持默认即可

通常需要修改站点名称 /URL格式 /归档设置 /disqus评论用户名 /部署配置 这几项就可以了 注意冒号后面都要添加一个半角空格 之后才是设置参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

# Hexo Configuration
# Site
title: Hexo #博客标题
subtitle: #博客副标题
description: #博客描述
author: John Doe #作者名字
email: #邮箱地址
language: #语言 中国大陆简体中文的标准语系地区码是zh-CN 台灣是正體中文zh-TW 

# URL
url: http://yoursite.com #博客地址
root: / #博客根目录
permalink: :year/:month/:day/:title/ #博客url地址结构  
tag_dir: tags 
archive_dir: archives
category_dir: categories
code_dir: downloads/code
permalink_defaults:

# Directory
source_dir: source
public_dir: public

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight:
enable: true
line_number: true
tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Archives
archive: 1 #设置为1 是全部展示
category: 2
tag: 2

# Server
port: 4000 #本地服务器端口是4000
server_ip: localhost #本地服务器地址
logger: false
logger_format: dev

# Date / Time format
date_format: MMM D YYYY #日期格式
time_format: H:mm:ss #时间格式

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Disqus
disqus_shortname: #disqus的用户名称

# Extensions
theme: landscape #主题设置
exclude_generator:

# Deployment
deploy:
  type:

写伟德伟诺官网

Hexo使用markdown语法的纯文本存放伟德伟诺官网 后缀为.md 你可以在_post文件夹里面新建这个后缀的.md文件 使用的全是UTF-8编码

也可以输入命令以生成

1

hexo new post <title>

如果是新建一个页面

1

hexo new page <title>

看一下刚才生成的

多标签注意语法格式 如下:

1
2
3
4

tags:
- 标签1
- 标签2
- 标签3

想在首页伟德伟诺官网预览添加图片可以添加photo参数 这个fancybox可以省略 如下:

1
2

photos:
  - http://xxx.com/photo.jpg

正文中可以使用 <!--more--> 设置伟德伟诺官网摘要 如下:

1
2
3

以上是伟德伟诺官网摘要
<!--more-->
以下是余下全文

more以上内容即是伟德伟诺官网摘要，在主页显示，more以下内容点击『> Read More』链接打开全文才显示。

Hexo常用插件

RSS订阅

安装hexo-generator-sitemap插件即可

1

npm install hexo-generator-feed --save

Sitemap站点地图

这个不是给你看的 是给搜索引擎看的
安装hexo-generator-baidu-sitemap插件即可

1

npm install hexo-generator-baidu-sitemap --save

装完之后 记得在全局配置里面开启这两个插件

1
2
3

plugins:
- hexo-generator-feed
- hexo-generator-sitemap

更多插件可以去Hexo插件wiki找到 https://github.com/hexojs/hexo/wiki/Plugins

小优化篇

修改网站标题 分页title

hexo默认模板伟德伟诺官网列表的所有页面标题都是一样的，而一般应该是第%d页 - blog.title。对应的设置在head.ejs中，通过判断page.current来处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<% 
var title = page.title;
  if (is_archive()){
    title = 'Archives';
    if (is_month()){
      title += ': ' + page.year + '/' + page.month;
    } else if (is_year()){
      title += ': ' + page.year;
    }
  } else if (is_category()){
    title = page.category;
  } else if (is_tag()){
    title = page.tag;
  }
  if (page.current > 1 && title) {
    title += ' - 第' + page.current + '页';
  } else if (page.current > 1) {
    title = '第' + page.current + '页';
  }
%>
<title><% if (title){ %><%= title %> | <% } %><%= config.title %></title>

增加 keyword description

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<% var keyword = '';
  if (page.tags){
    for(var ki = 0; ki < page.tags.data.length; ki ++){
      keyword += page.tags.data[ki].name + ',';
    }
    keyword = keyword.substring(0, keyword.length - 1);
  }else{
    keyword = theme.keyword;
  }
%>
<meta name="keywords" content="<%= keyword %>">
<% var tempHtml = '';
  if (page.excerpt){
    tempHtml = strip_html(page.excerpt);
  } else if(page.content) { 
    tempHtml = strip_html(page.content);
  } else {
    tempHtml = theme.description;
  } 
%>
<meta name="description" content="<%= truncate(tempHtml, {length: 140}) %>">

标签列表 list_tags 增加按照出现次数排序功能

首先查找了大量文档发现 hexo 默认并没有提供这个功能，查询数据结构后发现 tags 这个数组里面是含有length这个参数得但是它是一个[[Getter]]，并不能直接送给sort使用，目测sort也是hexo自行实现得一个方法，本着解决问题的想法，就直接自己存储了一个 myTags 变量去存储tags里的内容并自行实现相关功能。

首先我们复制一份 /node_modules/hexo/lib/plugins/helper/list_tags.js 起名叫做 list_tags_rank.js

然后修改代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

修改 list_tags_rank.js
注释掉 23到32行

// Sort the tags
// tags = tags.sort(orderby, order);

// Ignore tags with zero posts
// tags = tags.filter(function(tag){
//   return tag.length;
// });

// Limit the number of tags
// if (options.amount) tags = tags.limit(options.amount);

新增：
var myTags = [];
tags.forEach(function(tag){
  if(tag.length !== 0){
    myTags.push({name: tag.name, length: tag.length, path: tag.path, _id: tag._id});
  }
});
myTags.sort(function (n1, n2){
  return (n2[orderby] - n1[orderby]) * order;
});

if (options.amount) myTags.length = options.amount;
tags = myTags;

在 /node_modules/hexo/lib/plugins/helper/index.js 中挂载 list_tags_rank.js。

代码如下：

1
2

增加在42行左右：随便哪一行了强迫症犯了
helper.register('list_tags_rank', require('./list_tags_rank'));

以后调用就可以这样：

1
2
3

<%- list_tags_rank(site.tags, {style: '', separator:'', amount: 24, orderby: 'length', order:'1'}) %>

orderby: 'length' 就是按照便签出现得顺序排序