hexo及一些问题处理

Hexo 是一个简单地、轻量地、基于Node的一个静态博客框架，可以方便的生成静态网页托管在github和Heroku上

Hexo 的安装

由于Hexo是基于Node,所以需要先安装Node。(对于ubuntu 12.04版本来说,安装node比较麻烦,这里不表,具体百度)

npm install -g hexo

hexo 的帮助文档 (hexo help)

Usage: hexo <command>

Commands:
  help     Get help on a command.          查看帮助文档
  init     Create a new Hexo folder.       初始化一个hexo项目,缺省是当前目录
  version  Display version information.    显示版本信息

Global Options:
  --config  Specify config file instead of using _config.yml    指定配置文件,缺省_config.yml
  --cwd     Specify the CWD                                     自定义当前工作目录
  --debug   Display all verbose messages in the terminal        调试模式
  --draft   Display draft posts                                 草稿箱
  --safe    Disable all plugins and scripts                     安全模式
  --silent  Hide output on console                              无日志输出

使用hexo init hexo-demo初始化

初始化完成之后使用hexo server进行调试,通过4000端口可以看到效果

hexo 目录结构

├── _config.yml
├── package.json
├── scaffolds
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source
│   └── _posts
│       └── hello-world.md
└── themes
    └── landscape
        ├── _config.yml
        ├── Gruntfile.js
        ├── languages
        ├── layout
        ├── LICENSE
        ├── package.json
        ├── README.md
        ├── scripts
        └── source

1. scaffolds ：模板文件夹，新建文章时，Hexo 会根据 scaffold 来建立文件。Hexo 有三种默认布局： post 、 page 和 draft ，它们分别对应不同的路径。新建文件的默认布局是 post ，可以在配置文件中更改布局。用 draft 布局生成的文件会被保存到 source/_drafts 文件夹。
2. source ：资源文件夹是存放用户资源的地方。
3. source/_post ：文件箱。（低版本的hexo还会存在一个 _draft ，这是草稿箱）除 _posts 文件夹之外，开头命名为 _ (下划线)的文件/ 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去
4. themes ：主题 文件夹。Hexo 会根据主题来生成静态页面。
5. themes/landscape ：默认的皮肤文件夹
6. _config.yml ：全局的配置文件，每次更改要重启服务。

全局配置

可以在_config.yml中修改：

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 站点配置
title: Hexo-demo #网站标题
subtitle: hexo is simple and easy to study #网站副标题
description: this is hexo-demo #网栈描述
author: pomy #你的名字
language: zh-CN #网站使用的语言
timezone: Asia/Shanghai #网站时区
# URL #可以不用配置
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com #网址，搜索时会在搜索引擎中显示
root: / #网站根目录
permalink: :year/:month/:day/:title/ #永久链接格式
permalink_defaults: #永久链接中各部分的默认值
# Directory 目录配置
source_dir: source #资源文件夹，这个文件夹用来存放内容
public_dir: public #公共文件夹，这个文件夹用于存放生成的站点文件
tag_dir: tags #标签文件夹
archive_dir: archives #归档文件夹
category_dir: categories #分类文件夹
code_dir: downloads/code #Include code 文件夹
i18n_dir: :lang #国际化文件夹
skip_render: #跳过指定文件的渲染，您可使用 glob 来配置路径
# Writing 写作配置
new_post_name: :title.md # 新文章的文件名称
default_layout: post #默认布局
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0 #把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false #显示草稿
post_asset_folder: false #是否启动资源文件夹
relative_link: false #把链接改为与根目录的相对位址
future: true
highlight: #代码块的设置
enable: true
line_number: true
auto_detect: true
tab_replace:
# Category & Tag 分类 & 标签
default_category: uncategorized #默认分类
category_map: #分类别名
tag_map: #标签别名
# Date / Time format 时间和日期
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination 分页
## Set per_page to 0 to disable pagination
per_page: 10 #每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page #分页目录
# Extensions 扩展
## Plugins: http://hexo.io/plugins/ 插件
## Themes: http://hexo.io/themes/ 主题
theme: landscape #当前主题名称
# Deployment #部署到github
## Docs: http://hexo.io/docs/deployment.html
deploy:
type:

主题下一般有一个languages文件夹,用于对应language配置项。比如在ejs中有：

<%= __('tags') %>

language 的配置项是zh-CN,则会在 languages 文件夹下找到zh-CN.yml文件中对应的项来解释。
修改全局配置时,注意缩进,同时注意冒号后面要有一个空格。

主题配置

主题的配置文件在/themes/主题文件夹/_config.yml,一般包括导航配置(menu)，内容配置(content)，评论插件，图片效果(fancybox)和边栏(sidebar)。
Hexo提高了大量的主题，可以在全局配置文件中更改主题：

# Extensions 扩展
## Plugins: http://hexo.io/plugins/ 插件
## Themes: http://hexo.io/themes/ 主题
theme: 你的主题名称

主题的文件目录必须在themes目录下。

基本使用

写文章通过 new 命令新建一篇文章：

$ hexo new [layout] <title>    //等价于 hexo n

发表的文章会全部显示，如果文章很长，就只要显示文章的摘要就行了。在需要显示摘要的地方添加如下代码即可：

以上是摘要
<!--more-->
以下是余下全文

刷新，就能够看到只显示摘要了，同时会提供<Read More>的链接, 这个文字可以更改，在主题的配置文件themes/主题文件夹/_config.yml中,找到 Content ：

# Content
excerpt_link: Read More #可以更改成想要显示的文字
fancybox: true

在部署之前，需要通过命令把所有的文章都做静态化处理，就是生成对应的html,javascript,css使得所有的文章都是由静态文件组成的:

hexo generate //等价于hexo g

在本地目录下，会生成一个public的目录，里面包括了所有静态化的文件。

Hexo常用命令：

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

hexo 主意事项

• 编写文章是在source目录下的文件最好不要使用中文,使用中文可能对<!--more-->有影响,导致不能正确显示全文
• hexo生成html静态页面时,如果有使用html的table标签只能将所有的写在一行不能换行,否则hexo会自动添加空格
• 使用多说插件时,由于获取用户头像时使用的不是https协议,导致全站https失败,需要对第三方头像进行代理

  location ~ "^/proxy/(.*)$" {
          resolver 8.8.8.8;
          proxy_pass http://$1;
          proxy_redirect off;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $remote_addr;
          expires 7d;
  }

  搞定了代理服务器，接下来就是把评论框中的HTTP链接替换成我们的代理链接。embed.js是博客中唯一引用的多说文件，上面提到的非 HTTPS 资源都是由它插入到 DOM 树中的。
  首先从多说服务器下载embed.js到网站目录，然后进行编辑。先找头像地址变量avatar_url：

  return e.avatar_url || nt.data.default_avatar_url

  在return前面插入：

  if (e.avatar_url) {
      e.avatar_url = (document.location.protocol == "https:") ? e.avatar_url.replace(/^http:\/\//, "https://yourwebsite.com/proxy/") : e.avatar_url
  } else {
      nt.data.default_avatar_url = (document.location.protocol == "https:") ? nt.data.default_avatar_url.replace(/^http:\/\//, "https://yourwebsite.com/proxy/") : nt.data.default_avatar_url
  }
  return e.avatar_url || nt.data.default_avatar_url

  然后是表情链接，它存放在多说 API 接口中的message字段，所以需要对整个message进行替换。找到 713 行中的s.message，把它替换为：

  ((s.message.indexOf("src="http:\/\/") == -1) ? s.message : ((document.location.protocol == "https:") ? s.message.replace(/src="http:\/\//, "src="https://hack0nair.me/proxy/") : s.message))

  最后把多说评论框中ds.src路径改为你的本地路径，就大功告成了。