Hexo+NexT博客搭建笔记

remain to be updated…

部署

前期准备

安装git

1
apt-get install git

安装Node.js

1
2
3
curl https://raw.github.com/creationix/nvm/master/install.sh | sh
# 重启终端
nvm install stable

安装

npm

设置 语言
编辑 站点配置文件, 将 language 设置成你所需要的语言。建议明确设置你所需要的语言,例如选用简体中文,配置如下:

language: zh-Hans

增加Tag页面

在终端窗口下,定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面,命名为 tags :

1
2
$ cd your-hexo-site
$ hexo new page tags

编辑刚新建的页面,将页面的类型设置为 tags ,主题将自动为这个页面显示标签云。同时设置comment字段,对此页面禁用评论。页面内容如下:

1
2
3
4
title: 标签
date: 2014-12-22 12:39:04
type: "tags"
comments: false

在菜单中添加链接。编辑 主题配置文件 , 添加 tags 到 menu 中,如下:

1
2
3
4
menu:
home: /
archives: /archives
tags: /tags

添加Category页面

在终端窗口下,定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面,命名为 categories :

$ cd your-hexo-site
$ hexo new page categories

编辑刚新建的页面,将页面的 type 设置为 categories ,主题将自动为这个页面显示分类。页面内容如下:

title: 分类
date: 2014-12-22 12:39:04
type: “categories”

comments: false

在菜单中添加链接。编辑 主题配置文件 , 添加 categories 到 menu 中,如下:

menu:
home: /
archives: /archives
categories: /categories

模版(Scaffold)

在新建文章时,Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件,例如:
$ hexo new photo "My Gallery"
在执行这行指令时,Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md,并根据其内容建立文章。
将内容修改为

1
2
3
4
5
6
---
title: {{ title }}
date: {{ date }}
tags:
categories:
---

即可实现生成的md文件中自带Tag和Category

增加自定义打赏文字(NexT主题)

/themes/next/layout/_macro/reward.swig中添加HTML代码:

1
2
<p>bitcoin: 1MzWVQ2Jw2qa5aZDTDWfJrPLWvqecMuC9U</p>
<p>ETH coin: 0x134A702A850a5612a0C060d29858f2f208d1C4a1</p>

自定义全站页面header标签中的内容

  • 实践:Google AdSense 初审
    .../hexo/themes/next/layout/_partials/head/custom-head.swig中添加代码:
    1
    2
    3
    4
    5
    6
    7
    8
    <!-- Google Adsense -->
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-7998544039824891",
    enable_page_level_ads: true
    });
    </script>

侧栏中增加网易云音乐

在侧栏插入这首歌的音乐播放器,修改 blog\themes\next\layout_macro的sidebar.swig文件,添加刚刚复制的外链代码

1
2
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=[SongID]&auto=1&height=66">
</iframe>

SongID为歌曲ID,可通过歌曲的分享链接获得。
其中auto设为1可实现自动播放。0为不自动播放。

设置背景

把你挑选的背景图片命名为:background.jpg,放在blog\themes\next\source\images里,在blog\themes\next\source\css_custom文件的custom.styl首部添加:
body {
background:url(/images/background.jpg);
background-attachment: fixed;
}
background-attachment: fixed;是固定背景图片。
这是设置一张静态图片作为背景,其实Next主题自带有动态的背景效果,修改主题配置文件中的canvas_nest: false为canvas_nest: true即可。

置顶文章

1
2
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

在文章的Front-matter中添加top: true即可置顶。
再添加sticky: [number]可以实现在文章标题前增加一个顶针图标,这是NexT主题原先置顶方案(已被废除)的残留。[number]为一个具体数字。
扩展:设置top [num]:数字越大置顶为止越前

请作者喝咖啡~