标签归档:hexo

放弃Hexo,重回WP

Hexo唯一缺点就是麻烦!文章插入图片要上传到图库,发表文章要deploy。太麻烦了。这不,今天本来打算发一篇文章的。结果上传图库的时候出现bug。也懒得再折腾。索性趁着奖学金发放,买个便宜主机,彻底放弃Hexo,重回WP怀抱。

管他臃肿不臃肿,对我这只小菜来说,目前来说是好用的。

又是一次搬家,不过这次应该会简单许多了。但是鉴于我已经开学,且事情很多。所以只能在慢慢来了。其实也是为自己的拖延症找借口吧。

文章搬家慢,但是友情链接怎么办?所以先把友情链接处理了。

为hexo添加说说、微博模板

缘由

平时没什么好写的。但是每天总有那么一两句话想说出来。一篇博客只写那短短的几句话,未免有些“大材小用”。是时候派上“微博”或者“说说”出场了。所以我就在我的主题上添加一个shuoshuo模板。
需求简单,解决办法也简单。只要求能在首页上显示出“微博”(或者说说)就好了。至于评论嘛,这里都没什么人来。

添加微博模板

\themes\verynice\layout\_partial下添加shuoshuo.ejs文件
添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="blog-post container">
<div class="row">
<div class="lead text-center shuoshuo">
<h1>✏</h1>
<%- item.content %>
</div>
<div class="text-center">
<br><br>
<%= item.date.format('YY,MM,DD') %>
</div>
</div>
</div>

修改首页模板

修改hexo\themes\verynice\layout下的index.ejs文件

1
2
3
4
5
6
7
8
9
<% page.posts.each(function(item){ %>
<% if(item.layout== "shuoshuo"){%>
<%- partial('_partial/shuoshuo', {item: item}) %>
<%}%>
<% if(item.layout != "shuoshuo"){%>
<%- partial('_partial/article-excerpt', {item: item}) %>
<%}%>
<% }); %>
<%- partial('_partial/pagination') %>

添加上判断语句。对不同类型的文章做出不同的渲染。文章类型通过layout来区别。

CSS设计

基本用了Bootstrap的样式。但是还添加了padding

1
2
3
4
.shuoshuo {
padding-left: 5%;
padding-right:5%;
}

展示

效果还是OK的。
shuoshuo

hexo添加markdown-it-responsive插件

【阅前指南:这是一个失败的教程!】

咳咳~ 可以开始了~ 😘

markdown-it-responsive

第一步当然先看看官方说明啦~

安装

C:\Users\Petter\Documents\hexo\very9s\node_modules\hexo-renderer-markdown-it\node_modules
npm install markdown-it-responsive
install_markdown-it-responsive
于是乎文件夹下多了markdown-it-responsive

_config.yml配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
- markdown-it-emoji
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
- markdown-it-responsive //添加markdown-it-responsive插件
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSymbol: ¶

此方法有错 💣
error
原因是该插件需要传入设置参数~
可是我采用了多种方法,都不行。不懂了~

谢谢阅读

到此就结束了~可谓“见光死”。如果你会,希望可以教教我 👍

Hexo添加emoji

为Hexo添加emoji表情,同时表情使用twitter的twemoji。

使用markdown-it渲染

markdown-it

安装markdown-it

1
2
$ npm un hexo-renderer-marked --save
$ npm i hexo-renderer-markdown-it --save

把原来的hexo渲染换成基于markdown-it的渲染。

安装markdown-it-emoji插件

hexo-renderer-markdown-it原装只有5个插件,分别是:

  • markdown-it-abbr
  • markdown-it-footnote
  • markdown-it-ins
  • markdown-it-sub
  • markdown-it-sup

没有emoji的表情插件,因此要安装 markdown-it-emoji 该插件
markdown-it-emoji
进入到markdown-it的node-modules目录下安装该插件
..hexo\very9s\node_modules\hexo-renderer-markdown-it\node_modules

1
npm install markdown-it-emoji --save

配置_config.yml文件

在hexo的配置文件下添加markdown-it配置代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
- markdown-it-emoji //用emoji插件
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSymbol: ¶

基本配置到此结束

基本的emoji表情测试如下:

Classic markup: 😉 😢 😆 😋

Shortcuts (emoticons): 😃 😦 😎 😉


使用twemoji表情

twemoji
仍然是在markdown-it插件目录下clone twemoji

1
git clone git@github.com:twitter/twemoji.git

于是目录下多了twemoji文件夹。

配置markdown-it-emoji插件

要使用twemoji还没有结束,还需要配置markdown-it-emoji的index.js
修改index.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
28
29
'use strict';


var emojies_defs = require('./lib/data/full.json');
var emojies_shortcuts = require('./lib/data/shortcuts');
var emoji_html = require('./lib/render');
var emoji_replace = require('./lib/replace');
var normalize_opts = require('./lib/normalize_opts');
var twemoji = require('twemoji') //添加twemoji


module.exports = function emoji_plugin(md, options) {
var defaults = {
defs: emojies_defs,
shortcuts: emojies_shortcuts,
enabled: []
};

var opts = normalize_opts(md.utils.assign({}, defaults, options || {}));

md.renderer.rules.emoji = emoji_html;

md.core.ruler.push('emoji', emoji_replace(md, opts.defs, opts.shortcuts, opts.scanRE,
opts.replaceRE));

md.renderer.rules.emoji = function(token, idx) { //修改规则
return twemoji.parse(token[idx].content);
};
};

重新渲染

重新渲染hexo g
一切OK! 😎

twemoji样式

发现表情巨大,于是修改样式。按照markdown-it-emoji的官方说明
在我的模板中添加样式:

1
2
3
.emoji {
height: 1.2em;
}

这下一切都OK啦~

😎 给点评论鼓励我把~

Lofter搬家到Hexo Github Pages

独白: 本来想搬去腾讯云的,因为有学生优惠。可是6.1居然告诉我恭喜我大学毕业,将停止优惠。我才刚买一个月(虽然只有1元),就夭折了。++ ++ 可是我都准备了快要一周了,于是只好搬Github去了。搬家过程一切顺利,这都是因为前期的准备到位。唯一不高兴的是在试七牛的云存储的时候,浪费了10元。因为没有备案的域名不能绑定,而他们的二级域名那么丑。所以最后选择了又拍云。


Lofter文章搬家

先将lofter的文章导出。在用上自己编的python程序,自动生成.md文章,并且下载文章中的图片。同时文章中的图片链接也改成新的链接。
lofter-download

Episode-小插曲

  1. 导出的文章.xml是有问题的。我怀疑是lofter编辑器的问题。
    xml-error
    我的解决办法就是自己去xml中,把乱码删除。问题就解决了。好在只有一处有问题。
  2. 导出的文章生成网页格式混乱。解决办法是用Notepad++把所有文章的 “< p >” 标签一次性全删除。

创建Hexo

接下来就是创建新的hexo了,用上自己第一次制作的hexo主题。直接部署上github。
这个过程很简单,现在写文章稍有麻烦。主要是因为图片的插入很麻烦。这个问题慢慢解决吧。

github-pages绑定域名

第一次设置。官方文档已经说的很清楚了,所以也没遇上什么问题。好像也没什么好记录的。
Using a custom domain with GitHub Pages

竣工

一切都好了。虽然相比图片问题,现在的解决方案比在lofter麻烦,但是几乎是除了这点,其他方面都比lofter好。

回归

折腾了整整一个礼拜。这个礼拜很爽。是时候回归最核心的内容了。少折腾点了。

Python下载Lofter图片

现在文章已经能够迁移到Hexo了。但是文章里面的图片链接依旧是LOFTER上的,所以也要把图片搬出来。

1-下载图片

在原来的程序基础上添加下载图片的代码。

很直接,很单纯。。。直接用urlopen然后write。可是才下载一张就被服务器无情地拒绝了。

2-伪装

我就这么裸奔的跑过去,当然被拒绝了。

查找python的官方文档,发现一句话。解决办法就在这里了。

headers should be a dictionary, and will be treated as if add_header() was called with each key and value as arguments. This is often used to “spoof” the User-Agent header, which is used by a browser to identify itself – some HTTP servers only allow requests coming from common browsers as opposed to scripts. For example, Mozilla Firefox may identify itself as “Mozilla/5.0 (X11; U; Linux i686) Gecko/20071127 Firefox/2.0.0.11”, while urllib‘s default user agent string is “Python-urllib/2.6” (on Python 2.6).

——

《urllib.request》

所以我要伪装成浏览器。所以修改代码:

通过添加header来实现


3-大功告成

终于可以快速的下载图片了。图片搬家问题也解决了一大半了。


oh~对了,关于解析博文,由于XML中保持的是HTML数据,所以博文中图片的链接,我是用Beautiful Soup 4.2.0来解析的。

下一步,就是修改XML文件,把博文中的图片链接换成自己的图片链接。

嗯~剩下的下次再来吧。

Lofter搬家Hexo前期工作

搬家的工作,慢慢进行着。不知不觉搬家的主体实验已经做了一大半了。基本上验证了搬家方案的可行性。目前已经成功实验搬到自己的centos7虚拟机上。

1-python编程

文章那么多,手动搬家时不可能的了。所以我用python编程,帮我解析Lofter的XML文件,自动生成文章。


目前只是实验性,功能没有完全达到目标。还有实现将Lofter文章中的图片下载到本地上。否则出现这种情况:

生成的文章


2-PSCP上传

用PSCP上传到虚拟机服务器上


嗯,在虚拟机上怎么乱码了?无所谓了,反正文件名也无关紧要
3-Hexo重新生成
访问服务器,发现确实多了多篇文章,但是没有全。只有几篇。还有文章出现乱码。
4-Hexo文章乱码解决

配置 _config.yml


重新生成。。。。。
啊哟,出错了?什么情况?找了有一段时间。原来,官方文档有说冒号之后要有空格。

重新修改配置 _config.yml

重新生成。。。。。


OK没问题。可是乱码的问题还是存在。再看文章编码,原理是文章编码的问题。

于是修改python程序,用UTF-8编码方式保存文章


于是,乱码问题解决了。 5-解决文章不全问题

文章不全是因为中文的文件名,虚拟机无法识别。所以把文件名都改成数字就可以读取所有文章了。

OK了,这些全部都能显示了

////////////////////////////////////////////////////////////////

嗯,差不多了。有时间再补全其他功能吧。

Centos7搭建Hexo全过程

在搭建好Nginx后,安装Hexo过程相比就简单很多了。完全跟着官网教程来。

1-安装Git

yum install git-core

2-安装Node.js
安装Node.js的最简单方式是用 nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash


然后就是按照Node.js

nvm install 4

3-安装Hexo

最后一步npm install -g hexo-cli


4-建站

现在一切都准备好了,可以开始建站了。

$ hexo init <folder>


$ cd <folder>

$ npm install

最后的最后就是生成网页了

然后就是把pulic下的网页复制到Nginx的网站root目录下。默认是/usr/share/nginx/html/

再然后就可以访问了。