Hexo 入门指南(七) - 评论 & 分享

评论

hexo默认集成了disqus,但是在天朝明显多说更受欢迎一点。

首先到多说官网去注册一个账号。然后点击进入添加站点页面,填写所有信息。注意,多说域名的前缀就是站点的短网址,下面要用到,这里假设为short_name。

在_config.yml中添加多说的配置:

1
duoshuo_shortname: short_name

修改themes\\layout_partial\article.ejs,把第38行到41行的如下代码:

1
2
3
4
5
6
7
<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
<div id="disqus_thread">
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
<% } %>

替换成:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<% if (!index && post.comments && config.duoshuo_shortname){ %>
<section id="comments">
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- 多说公共JS代码 end -->
</section>
<% } %>

之后,找到第27到29行:

1
2
3
<% if (post.comments && config.disqus_shortname){ %>
<a href="<%- post.permalink %>#disqus_thread" class="article-comment-link">Comments</a>
<% } %>

替换成:

1
2
3
<% if (post.comments && config.duoshuo_shortname){ %>
<a href="<%- url_for(post.path) %>#comments" class="article-comment-link">留言</a>
<% } %>

分享

hexo默认提供的那四个在国内也被墙了。这里替换成百度一键分享。

找到themes\landscape\layout_partialarticle.ejs26行:

1
<a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link">分享</a>

替换成:

1
2
<a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link bdsharebuttonbox" data-cmd="more">分享</a>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"1","bdMiniList":false,"bdPic":"","bdStyle":"2","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

之后打开themes\landscape\source\js\script.js,35~86行全部注释掉。

后记

仅以此教程,悼念Aaron Swartz,RSS和Markdown的联合创始人。没有他,开源博客界就不会有今天。

Hexo 入门指南(六) - sitemap、rss 和部署

sitemap & rss

切换到blog根目录下,输入:

1
2
$ npm install hexo-generator-feed
$ npm install hexo-generator-sitemap

之后重启博客,访问/atom.xml和/sitemap.xml,会发现已经生成了。可以把sitemap提交到搜索引擎的站长平台来增加收录。

部署

首先按照前面教程(一)的gitcafe部分建立好代码仓库,这里假设你的用户名是your_name。由于ssh配置比较麻烦,这里采用https方式提交。

找到配置文件中# Deployment一节,修改:

1
2
3
type: github
repository: https://gitcafe.com/your_name/your_name.git
branch: gitcafe-pages

之后输入:

1
hexo deploy --generate

或者

1
$ hexo generate --deploy

hexo会自动生成并部署。

如果之前已经生成过了,直接输入:

1
$ hexo deploy

部署即可。

当然,这个命令还有一些bug,比如windows下不能用cmd而是用gitshell。我自己一般会手动敲git代码覆盖提交。

Hexo 入门指南(五) - 搬家 & 备份

搬入hexo

首先,需要拿到原博客数据的xml文件。

wordpress的话,后台“工具->导出”就可以生成。点点和lofter也支持类似操作。如果遇到不支持导出xml的博客,先用http://www.diandian.com/transfer/转到点点,再用http://www.diandian.com/backup导出XML文件。

之后,安装hexo-migrator-wordpress这个插件

1
npm install hexo-migrator-wordpress --save

运行

1
hexo migrate wordpress wordpress.xml

xml中的数据就导入到source中了。最后的工作是修复链接什么的。

搬出hexo

没有什么好的办法。可以写个脚本遍历public文件夹,之后post到指定目录或者制作成xml文件。

备份

有句话说得好,数据恢复的最佳方案永远是“备份备份再备份”。

个人建议,分别备份站点配置和文章。站点配置包括blog根目录除了source和public文件夹的所有内容,文章就是source文件夹的全部内容。站点配置不经常变的话可以不用经常备份。

Hexo 入门指南(四) - 页面、导航、边栏、底栏

页面

命令行键入:

1
$ hexo new page about

会在source/about中生成index.html。这个就叫做页面,不在文章列表显示,可以通过http://localhost/about浏览。

页面支持文章的大部分属性,除了分类和标签。

导航

打开主题中的设置文件,即themes\_config.yml(其中是当前主题的名字,默认为landscape,下同),找到menu:,在列表的末端添加About: 关于。刷新页面,导航栏上就出现了关于链接。

边栏

进入themes\\layout_widget目录中,创建about.ejs文件,模仿其他文件中的模版,输入以下内容:

1
2
3
4
5
6
7
8
9
<% if (site.tags.length){ %>
<div class="widget-wrap">
<h3 class="widget-title">About</h3>
<div class="widget">
邮箱:xxx@xxx.com<br />
微博:@xxxxx
</div>
</div>
<% } %>

打开themes\_config.yml,找到#Sidebar,在最后面添加- about。刷新页面。

底栏

打开themes\\layout_partial\footer.ejs修改。

打开themes\\source\css\images,把banner.jpg换掉。

Hexo 入门指南(三) - 文章 & 草稿

文章

命令行中输入:

1
$ hexo new "new article"

之后在source/_posts目录下面,多了一个new-article.md的文件。

打开之后我们会看到:

1
2
3
4
5
---
title: new article
date: 2014-11-01 20:10:33
tags:
---

文件的开头是属性,采用统一的yaml格式,用三条短横线分隔。下面是文章正文。

文章的正文支持markdown格式,建议你先学习一下它的语法。markdown不像html似的一大堆标签,很简单,只有几个符号。

新建、删除或修改文章后,不需要重启hexo server,刷新一下即可预览。

属性

文章可以拥有如下属性:

Setting Description Default
layout Layout post或page
title 文章的标题
date 创建日期 文件的创建日期
updated 修改日期 文件的修改日期
comments 是否开启评论 true
tags 标签
categories 分类
permalink url中的名字 文件名

动态博客中通过发布文章页面设置的各种属性,在hexo里要这样设置。

分类和标签

例如:

1
2
3
4
5
categories:
- 日记
tags:
- Hexo
- node.js

摘要

同wordpress一样,

更多内容

Hexo 入门指南(二) - 安装、初始化和配置

安装和初始化

linux下打开bash,win下面打开cmd,输入:

1
2
3
4
5
$ npm install hexo -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server

访问http://localhost:4000,会看到生成好的博客。

同时,在blog文件夹中,文件如下:

1
2
3
4
5
6
7
8
9
10
11
2014/11/01  19:45    <DIR>          .
2014/11/01 19:45 <DIR> ..
2014/11/01 11:16 68 .gitignore
2014/11/01 17:33 13,767 db.json
2014/11/01 11:16 <DIR> node_modules
2014/11/01 11:17 186 package.json
2014/11/01 11:23 <DIR> public
2014/11/01 11:16 <DIR> scaffolds
2014/11/01 17:31 <DIR> source
2014/11/01 11:16 <DIR> themes
2014/11/01 11:38 1,844 _config.yml

配置

站点的配置文件是_config.yml,如果你不小心改花了,这里提供了一份默认的:

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle:
description:
author: John Doe
email:
language:

# 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/
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
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 2
category: 2
tag: 2

# Server
## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
server_ip: localhost
logger: false
logger_format: dev

# 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: 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:

# Extensions
## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
## Themes: https://github.com/hexojs/hexo/wiki/Themes
theme: landscape
exclude_generator:

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type:

官方的页面上也提供了每一项详细的解释。

我们需要修改的只有Site部分,以及URL部分的url。Site部分每一项依次是标题、副标题、描述、作者、邮箱和语言(天朝大陆填zh-CN)。url改成网站的网址,如果你的网站放在某个子目录下,比如http://yoursite.com/child,root改成/child。

Server部分,如果之前你的服务器没有运行起来,则可能是端口被占了。把port改成别的数字,或者强行关掉占着端口的进程。

其它设置项先不用管,将会在接下来的文章中解释。

注意

如果页面中出现中文,应以UTF-8无BOM编码格式,所以不要用win自带的记事本,而是用notepad++这种支持编码转换的编辑器。

由于google在天朝大陆被墙,进入themes\landscape\layout_partial,打开head.ejs,删掉第31行fonts.googleapis.com的链接。

下载下来jquery-2.0.3.min.js,放到themes\landscape\source\js文件夹中。之后进入themes\landscape\layout_partial,打开after-footer.ejs,将第17行的路径替换为/js/jquery-2.0.3.min.js。

至此大功告成。

Hexo 入门指南(一) - 简介 & 准备

Hexo是一个开源的静态博客生成器,用node.js开发,作者是台湾大学生tommy351。

为什么是博客

对于个人网站来说,没有比博客更合适的形式了。在博客中,文章才是最主要的,一切都显得主次分明,干净利落。相比之下,论坛中主题和回复鱼龙混杂,阅读体验非常差。同时,博客比论坛的数据库小很多,便于维护。

为什么是静态博客

很多人选择在虚拟主机或vps上面搭建动态博客。但是这些主机商通常“免费的不稳定,稳定的不免费”。前一段时间,我观察了我的个人博客友链上面的几个站点,一部分在十几天之后就销声匿迹了。独立博客如此麻烦的维护工作,能不能减轻一些呢?正如阮一峰前辈所说,blogger分为三个阶段。最开始,是门户博客。之后,是独立博客。最后,觉得独立博客自己管理起来费劲,便找个别人来管的空间,自己负责写就好。如果我们能够找到这样的空间,在自己保留最大控制权前提下,由别人托管,会省去不少事情。

静态博客编译之后是纯html页面,优点就是支持它的环境十分好找,例如github、gitcafe、七牛云存储等站点都支持静态页面托管,自然是我们的首选了。由于github page在国内访问较慢,这篇文章用gitcafe做示范。gitcafe是天朝本地化的github,同样提供展示页和域名绑定功能,不需要备案,就是爽。

但是静态博客并非没有缺点。动态博客更新文章时,脚本是不变的,只需要更新数据库。静态博客要频繁改动文件,不支持增量式上传的东西,比如ftp,就难于管理。此外,还要十分熟悉git各种命令,才能部署页面。

准备工作

  • git
  • node.js
  • markdown编辑器
  • gitcafe
  • 域名

markdown编辑器是非必须的,只要你熟悉语法,随便一个编辑器来写都不是问题。

域名也是非必须的,gitcafe pages服务提供免费的二级域名。注册域名的教程这里就不写了。

安装 git

git的客户端,本人推荐git-scm。

linux下面,在bash中键入:

(Ubuntu, Debian)

1
$ sudo apt-get install git

(Fedora, Red Hat, CentOS)

1
$ sudo yum install git

windows或mac下,直接到git-scm官网下载安装。

安装 node.js

linux下:

1
2
$ sudo apt-get install nodejs
$ sudo apt-get install npm

yum同理。

windows或者mac下,直接到node.js官网下载安装。
windows还要设置环境变量,把node.js安装路径写进path里面,用半角分号分隔。

markdown 编辑器

windows下推荐markdown pad

mac下推荐mou

gitcafe

首先注册一个账号,之后点击查看如何使用pages服务

相关网页