hexo+NexT博客最新定制记录

最近对hexo和NexT博客又做了一次定制。

1 增加clustrmaps

这回在博客里增加一个clustrmaps的地球点击效果,之前尝试了下,失败了,这回成功显示了。这个功能需要先在这个网页注册。效果如图:

image

后面只需要把对应的代码添加到文件中。有人推荐放到这个路径下:themes\next\layout_partials\footer.swig。这个是放在底部的,最后我是放在了侧边栏下。侧边栏的路径为themes\next\layout_custom\sidebar.swig。也有人放在themes\next\layout_partials\header.swig。但这个路径不适合我目前这个NexT的样式。

2 视频播放

增加了一个视频播放的功能,首先先安装dplayer。

npm install hexo-tag-dplayer --save

然后使用方法如下,给一个样例。详细文档参见官方地址

{% dplayer key=value ... %}

3 pdf预览

以防以后展示ppt和论文等功能,这里添加一个pdf预览功能。也是先安装插件。

npm install --save hexo-pdf

使用方法如下:

正常的pdf(有直链)。

{% pdf http://xxx.pdf %}

或者

{% pdf ./xxx.pdf %}

此外也可以用google drive和slideshare。

4 增加天气卡片

增加了一个右上角的天气卡片。效果如图。

image

首先在这个页面注册。然后在这里输入名称生成代码。

image

最后放到themes\next\layout_custom\header.swig中。

5 主题自定义设计

主要是做了背景图切换之类的设置,比较简单。参照以下的这个修改的。文件为themes\next\source\css_custom\custom.styl。

https://github.com/reuixiy/reuixiy.github.io/blob/master/custom.styl

6 日历云功能

需要先安装插件。

npm install --save git://github.com/icecory/theme-next-calendar#hexo

由于我是参考YouForever的博客进行修改的,外加我的NexT是在5.X版本,所以这里就没有直接从icecory的Github仓库git clone。我使用的日历云文件请从这里下载

接着就是修改配置文件。文件夹里一共四个文件。分别是CloudCalendar.swig,CloudCalendar.styl,CloudCalendar.js,languages.js。第一个swig文件请放在themes\next\layout_third-party\中,第二个styl文件请放在themes\next\source\css_common\components\third-party\中,加下来在themes\next\source\lib里新建一个文件夹CloudCalendar,然后把剩下两个js文件放在该文件夹下。

下一步在文件themes\next\source\css_common\components\third-party\third-party.styl的最后加入:

@import "CloudCalendar" if hexo-config('CloudCalendar.enable');

在文件themes\next\layout_layout.swig的最后加入:

{% include '_third-party/CloudCalendar.swig' %}

在主题配置文件config.yml 中加入:

# 日历云
CloudCalendar:
  enable: true
  language: zh-CN
  single: true
  root: /calendar/

在以上工作完成后,最后一步就是把日历云放在指定位置。这个倒是比较泛。根据需求放置。

<!-- CloudCalendar -->
<div class="widget-wrap" style="width: 90%;margin-left: auto;margin-right: auto; opacity: 0.97;">
    <div class="widget" id="CloudCalendar"></div>
</div>

我是放在侧边栏。也就是\themes\next\layout_macro\siderbar.swig的文件夹中,具体位置如下图。

image

并且根据这个我调整了词云的大小,使得侧边栏会舒服一些。效果如下:

image

7 右上角Fork me改版

这个网址找到最新的版本,替换原来的代码。效果如图。

image

8 Valine扩展邮件通知

这里在前文Valine的基础上扩展邮件通知。这里使用的是国内大神扩展的Valine-admin

首先进入到leancloud的应用页面里,点击云引擎→设置。填写这个仓库名:https://github.com/DesertsP/Valine-Admin.git

image

接下来设置云引擎的环境变量,这个变量说明请参照文档

QQ的授权码设置见官方说明
163邮箱的设置也是类似,提醒:请选用用于注册leancloud的邮箱。

并且设置二级域名和注册管理员账户。

image

注册管理员账户即在二级域名后面加/sign-up,如果无法跳转,删除user里的所有账户即可。

image

切换到部署标签页,点击git源码部署,分支选master。接着经历过一段时间,出现如下页面。

image

后面设置个定时任务既可以。参照上面的文档即可。

image
image

9 将博客同时部署到国内服务器

首先先配置服务器上git环境。

apt-get install git

然后设置Linux上一个账号为git,进行配置。

useradd git
password git #设置密码,自己输入
mkdir /home/git #创建git文件夹
chown git:git /home/git #设置git权限
su git #切换git账户
cd /home/git #切换路径
mkdir -p projects/blog #创建项目的目录
mkdir repos && cd repos #创建并切换至仓库的目录
git init --bare blog.git #创建仓库
vim ./blog.git/hooks/post-receive #用vim创建钩子函数

vim编辑器基本操作,需要先按i,进入插入编辑模式,然后即可开始编辑。编辑结束后,需要先按esc键,然后输入:wq表示保存并退出。输入内容如下。

#!/bin/sh
git --work--tree=/home/git/projects/blog --git-dir=/home/git/repos/blog.git checkout -f

接着添加各类权限。

chmod +x ./blog.git/hooks/post-receive #添加执行权限
exit #回到根目录
chown -R git:git /home/git/repos/blog.git #添加权限

以上做完后,在电脑上找一个文件夹,测试是否能从服务器上拉下来文件。

git clone git@server_ip:/home/git/repos/blog.git

利用这个语句测试,如果能拉下来空的文件夹,说明成功了。

接下来先部署nginx,nginx的安装和基本配置见我之前的博客:阿里云安装nginx配置网站

这里弄下nginx的配置文件。

image

然后启动nginx。

后续的操作参照这几篇博客:优化hexo访问速度-将hexo部署到云主机VPS,Hexo博客部署到阿里云服务器,Hexo + Github/Vps部署你的个人博客

10 DaoVoice在线聊天功能

这个需要现在这个网站注册,但是需要邀请码,邀请码请去参考链接后面查看。接着利用app id做些配置即可以实现在线聊天功能。但是我目前觉得评论就够了,所以这块我后面放弃了。如果有需要的同学可以参考后面的链接。

参考链接:

1.reuixiy.github.io

2.hexo 添加视频播放功能

3.HEXO建站备忘录

4.Website FAQ

5.hexo 添加插入 pdf 功能

6.Hexo next主题下添加天气插件

7.给hexo博客的NEXT主题添加一个云日历

8.Hexo日历插件

9.分享一个精致实用的HEXO博客小插件:日历云

10.添加日历云挂件-hexo小书

11.theme-next-calendar

12.hexo-next 主题添加日历云

13.Hexo 优化 --- Valine 扩展之邮件通知

14.zhaojun1998/Valine-Admin

15.Valine Admin 配置手册

16.hexo 博客添加 Valine 评论系统

17.Hexo + Github/Vps部署你的个人博客

18.Hexo博客部署到阿里云服务器

19.Hexo博客Next主题DaoVoice实现在线联系

20.Hexo博客添加在线联系功能

21.hexo的next主题个性化教程:打造炫酷网站

22.Hexo NexT主题美化2.0

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,198评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,663评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,985评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,673评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,994评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,399评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,717评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,407评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,112评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,371评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,891评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,255评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,881评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,010评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,764评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,412评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,299评论 2 260

推荐阅读更多精彩内容