天天看點

hexo+NexT部落格最新定制記錄1 增加clustrmaps2 視訊播放3 pdf預覽4 增加天氣卡片5 主題自定義設計6 月曆雲功能7 右上角Fork me改版8 Valine擴充郵件通知9 将部落格同時部署到國内伺服器10 DaoVoice線上聊天功能

最近對hexo和NexT部落格又做了一次定制。

1 增加clustrmaps

這回在部落格裡增加一個clustrmaps的地球點選效果,之前嘗試了下,失敗了,這回成功顯示了。這個功能需要先在這個

網頁

注冊。效果如圖:

hexo+NexT部落格最新定制記錄1 增加clustrmaps2 視訊播放3 pdf預覽4 增加天氣卡片5 主題自定義設計6 月曆雲功能7 右上角Fork me改版8 Valine擴充郵件通知9 将部落格同時部署到國内伺服器10 DaoVoice線上聊天功能

後面隻需要把對應的代碼添加到檔案中。有人推薦放到這個路徑下:themesnextlayout_partialsfooter.swig。這個是放在底部的,最後我是放在了側邊欄下。側邊欄的路徑為themesnextlayout_customsidebar.swig。也有人放在themesnextlayout_partialsheader.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 增加天氣卡片

增加了一個右上角的天氣卡片。效果如圖。

hexo+NexT部落格最新定制記錄1 增加clustrmaps2 視訊播放3 pdf預覽4 增加天氣卡片5 主題自定義設計6 月曆雲功能7 右上角Fork me改版8 Valine擴充郵件通知9 将部落格同時部署到國内伺服器10 DaoVoice線上聊天功能

首先在這個

頁面

注冊。然後在這裡輸入名稱生成代碼。

hexo+NexT部落格最新定制記錄1 增加clustrmaps2 視訊播放3 pdf預覽4 增加天氣卡片5 主題自定義設計6 月曆雲功能7 右上角Fork me改版8 Valine擴充郵件通知9 将部落格同時部署到國内伺服器10 DaoVoice線上聊天功能

最後放到themesnextlayout_customheader.swig中。

5 主題自定義設計

主要是做了背景圖切換之類的設定,比較簡單。參照以下的這個修改的。檔案為themesnextsourcecss_customcustom.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檔案請放在themesnextlayout_third-party中,第二個styl檔案請放在themesnextsourcecss_commoncomponentsthird-party中,加下來在themesnextsourcelib裡建立一個檔案夾CloudCalendar,然後把剩下兩個js檔案放在該檔案夾下。

下一步在檔案themesnextsourcecss_commoncomponentsthird-partythird-party.styl的最後加入:

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

在檔案themesnextlayout_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>           

我是放在側邊欄。也就是themesnextlayout_macrosiderbar.swig的檔案夾中,具體位置如下圖。

hexo+NexT部落格最新定制記錄1 增加clustrmaps2 視訊播放3 pdf預覽4 增加天氣卡片5 主題自定義設計6 月曆雲功能7 右上角Fork me改版8 Valine擴充郵件通知9 将部落格同時部署到國内伺服器10 DaoVoice線上聊天功能

并且根據這個我調整了詞雲的大小,使得側邊欄會舒服一些。效果如下:

hexo+NexT部落格最新定制記錄1 增加clustrmaps2 視訊播放3 pdf預覽4 增加天氣卡片5 主題自定義設計6 月曆雲功能7 右上角Fork me改版8 Valine擴充郵件通知9 将部落格同時部署到國内伺服器10 DaoVoice線上聊天功能

7 右上角Fork me改版

這個網址

找到最新的版本,替換原來的代碼。效果如圖。

hexo+NexT部落格最新定制記錄1 增加clustrmaps2 視訊播放3 pdf預覽4 增加天氣卡片5 主題自定義設計6 月曆雲功能7 右上角Fork me改版8 Valine擴充郵件通知9 将部落格同時部署到國内伺服器10 DaoVoice線上聊天功能

8 Valine擴充郵件通知

這裡在前文Valine的基礎上擴充郵件通知。這裡使用的是國内大神擴充的

Valine-admin

首先進入到leancloud的應用頁面裡,點選雲引擎→設定。填寫這個倉庫名:

https://github.com/DesertsP/Valine-Admin.git
hexo+NexT部落格最新定制記錄1 增加clustrmaps2 視訊播放3 pdf預覽4 增加天氣卡片5 主題自定義設計6 月曆雲功能7 右上角Fork me改版8 Valine擴充郵件通知9 将部落格同時部署到國内伺服器10 DaoVoice線上聊天功能

接下來設定雲引擎的環境變量,這個變量說明請參照

文檔

QQ的授權碼設定見

官方說明

163郵箱的設定也是類似,提醒:請選用用于注冊leancloud的郵箱。

并且設定二級域名和注冊管理者賬戶。

hexo+NexT部落格最新定制記錄1 增加clustrmaps2 視訊播放3 pdf預覽4 增加天氣卡片5 主題自定義設計6 月曆雲功能7 右上角Fork me改版8 Valine擴充郵件通知9 将部落格同時部署到國内伺服器10 DaoVoice線上聊天功能

注冊管理者賬戶即在二級域名後面加/sign-up,如果無法跳轉,删除user裡的所有賬戶即可。

hexo+NexT部落格最新定制記錄1 增加clustrmaps2 視訊播放3 pdf預覽4 增加天氣卡片5 主題自定義設計6 月曆雲功能7 右上角Fork me改版8 Valine擴充郵件通知9 将部落格同時部署到國内伺服器10 DaoVoice線上聊天功能

切換到部署标簽頁,點選git源碼部署,分支選master。接着經曆過一段時間,出現如下頁面。

hexo+NexT部落格最新定制記錄1 增加clustrmaps2 視訊播放3 pdf預覽4 增加天氣卡片5 主題自定義設計6 月曆雲功能7 右上角Fork me改版8 Valine擴充郵件通知9 将部落格同時部署到國内伺服器10 DaoVoice線上聊天功能

後面設定個定時任務既可以。參照上面的文檔即可。

hexo+NexT部落格最新定制記錄1 增加clustrmaps2 視訊播放3 pdf預覽4 增加天氣卡片5 主題自定義設計6 月曆雲功能7 右上角Fork me改版8 Valine擴充郵件通知9 将部落格同時部署到國内伺服器10 DaoVoice線上聊天功能
hexo+NexT部落格最新定制記錄1 增加clustrmaps2 視訊播放3 pdf預覽4 增加天氣卡片5 主題自定義設計6 月曆雲功能7 右上角Fork me改版8 Valine擴充郵件通知9 将部落格同時部署到國内伺服器10 DaoVoice線上聊天功能

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的配置檔案。

hexo+NexT部落格最新定制記錄1 增加clustrmaps2 視訊播放3 pdf預覽4 增加天氣卡片5 主題自定義設計6 月曆雲功能7 右上角Fork me改版8 Valine擴充郵件通知9 将部落格同時部署到國内伺服器10 DaoVoice線上聊天功能

然後啟動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.

18.

19.

Hexo部落格Next主題DaoVoice實作線上聯系

20.

Hexo部落格添加線上聯系功能

21.

hexo的next主題個性化教程:打造炫酷網站

22.

Hexo NexT主題美化2.0