本站代碼修改

Hexo 原始碼

Hexo 主題採用zhaoo:

Hexo-theme-zhaoo

更改過的代碼

HexoBackUp

引入iconmoon css

為了在網站footer加入linkedin icon

在theme/zhaoo/source/css 加上fonts.css 這個css是iconmoon的css 並且更更改theme/zhaoo/_config.yml裡的custom

1
2
3
4
5
custom:
head:
foot:
css: css/fonts.css
js:

要注意的是fonts.css裡面,路徑要加../

1
2
3
4
5
6
7
8
9
10
11
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?kp3fdv');
src: url('../fonts/icomoon.eot?kp3fdv#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?kp3fdv') format('truetype'),
url('../fonts/icomoon.woff?kp3fdv') format('woff'),
url('../fonts/icomoon.svg?kp3fdv#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}

因為theme/zhaoo/_config.yml 裡面的被layout/_partal/component/footer.ejs讀取時,會加入iconfont在字串前,所以要移除iconfont,以下是未移除

1
2
3
4
5
6
7
8
9
socialList += 
`<a
href="${url}"
target="_blank"
class="footer-social-item"
onMouseOver="this.style.color=${color}"
onMouseOut="this.style.color='${theme.color.text}'">
<i class="iconfont ${iconfont}"></i>
</a>`;

然後在theme/zhaoo/_config.yml 加入iconfont

1
2
3
4
5
6
7
8
social:
#qq: tencent://message/?Menu=yes&uin=894519210 || iconQQ || '#12B7F5'
#wechat: javascript:; || iconwechat-fill || '#09BB07'
#instagram: https://www.instagram.com/izhaoo/ || iconinstagram || '#DA2E76'
github: https://github.com/YuWeiKuo || iconfont icongithub-fill || '#9f7be1'
email: mailto:adppss90045@hotmail.com || iconfont iconmail
#leetcode: https://leetcode.cn/u/yuweikuo/ || icon-leetcode
linkedin: https://www.linkedin.com/in/昱煒-郭-a90641166/ || icon-linkedin-with-circle

在關於頁面加入計時器

因為在markdown文件直接寫javascript有時候不會執行,所以改為引入clock.js檔,此檔為事先寫好的計時器,計算建站日期

1
2
3
4
5
<body>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<div class="time"></div>
<script src="./clock.js"></script>
</body>

clock.js 代碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var showTime = document.querySelector('.time');
getDate();
window.setInterval(getDate,1000);

function getDate(){
var date2 = + new Date();
var date4 = + new Date(2021, 03, 16, 18, 40, 41);

var date_count = date2 - date4
; var t_second = date_count/1000;
var d = parseInt(t_second/60/60/24);
var h = parseInt(t_second/60/60%24);
var m = parseInt(t_second/60&60);
var s = parseInt(t_second%60);

d = d < 10 ? '0'+d : d;
h = h < 10 ? '0'+h : h;
m = m < 10 ? '0'+m : m;
s = s < 10 ? '0'+s : s;
showTime.innerText = '建站時至今日: ' + d + '天' + h + '時' + m + '分' + s + '秒';
}

引入bootstrap

在theme/zhaoo/layout/partial/head.ejs 加上

1
2
3
<% if (theme.vendors.bootstap_css) { %>
<%- css(theme.vendors.bootstap_css) %>
<% } %>

_config.yml 加上

1
bootstap_css: https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css

修改文章右側目錄的邊框

/theme/zhaoo/source/css/_page/post/toc.styl 將overflow scroll改為overflow auto

1
2
3
4
5
6
7
8
.toc-wrap
position fixed
top 70px
background-color var(--color-background)
z-index 10
padding 20px
height calc(100vh - 140px)
overflow scroll

解決grid模式照片點開後消失

修改 theme/zhaoo/gallery.ejs gallery.ejs 第15行,三元表達式加上 target = blank

1
images += `<a data-fancybox="images" style=${ theme.galleries.type === 'waterfall' ? `width:${(100 / (theme.galleries.columns || 3))}%` : `"target="_blank""`}

2023.08.21 轉移到阿里雲

因為github上傳有限制2G大小,而我的博客有很多照片,所以超出限制無法上傳,轉移到阿里雲。 在阿里雲部署的教程

教你如何將hexo博客部署到阿里雲服務器

目前服務器採用Intel Xeon CPU E5-2682 v4 @ 2.50GHz 1核心, 2G記憶體,5M 頻寬

git 倉庫位置 /home/git/blog.git,要常常執行Git 的垃圾回收命令,容量會滿

1
2
git gc

加入hexoc.sh

因為每一次要部署到伺服器上要打

1
2
3
4
>> hexo clean
>> hexo g
>> hexo d

很麻煩,所以寫入shell中,創建hexoc.sh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#!/bin/bash

if [ $1 = 's' ]
then
echo localhost
echo after generate hexo data, deploy localhost and open it at browser
hexo g && hexo s -o
elif [ $1 = 'd' ]
then
echo deploy
echo after generate hexo data, deploy localhost and open it at browser
hexo g && hexo d

fi

指令s

1
./hexoc.sh s

會一次性執行

1
hexo clean && hexo g && hexo s -o

指令d

1
./hexoc.sh d

則會一次性執行

1
hexo clean && hexo g && hexo d 

加入update時間跟修改時間格式

在根目錄/scaffolds/post.md中,加入updated: { { date } }

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

修改根目錄/_config.yml,改為updated_option: 'date'

1
2
3
4
5
6
7
8
9
10
meta_generator: true

# 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: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'date'

在theme/zhaoo/layout/_partial/post/head.ejs 裡加入一行page.updated,在加入首發跟修改字樣 而外將“MMMM DD, YYYY”改為“MM-DD, YYYY”,如果格式是MMMM,月份會顯示中文,MM的話顯示數字

1
2
<span class="post-info-item"> 首發 <i class="iconfont iconcalendar"></i><%= date(page.date, "MM-DD, YYYY") %></span>
<span class="post-info-item"> 修改 <i class="iconfont iconcalendar"></i><%= date(page.updated, "MM-DD, YYYY") %></span>


順便更改頁面的文章顯示,修改以下theme/zhaoo/layout/_partial/index/item.ejs

1
<span class="post-info-item"><i class="iconfont iconcalendar"></i><%= date(post.date, "MM-DD, YYYY") %></span>

自動修改update時間

參考文章

加入參考文章中的writeupdatetime.js 跟 updateFileTime.js

因為參考文章是架設在github上,而我是架設在阿里雲,所以不同的是,我是修改我的hexoc.sh

但是後來發現,執行updateFileTime.js後,每一個md 檔的修改時間都會被改為updateFileTime.js執行的時間,因為用此程式讀取md檔的時候,電腦會判定md檔被修改,以至於writeupdatetime.js 會將每一個md檔案寫入最新的時間。

只要有fs.writeFile就會修改到mtime(檔案修改時間),以至於每一個檔案的mtime都被改到。

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
#!/bin/bash

if [ $1 = 's update' ]
then
echo localhost and update time
echo after generate hexo data, deploy localhost and open it at browser
#hexo clean && ./source/_posts/updateFileTime.js
#hexo clean && ./source/_posts/writeupdatetime.js
hexo clean && ./source/_posts/writeupdatetime.js && ./source/_posts/updateFileTime.js && ./source/about/writeupdatetime.js && ./source/about/updateFileTime.js && hexo g && hexo s -o
elif [ $1 = 'd update' ]
then
echo deploy and update time
hexo clean && ./source/_posts/writeupdatetime.js && ./source/_posts/updateFileTime.js && ./source/about/writeupdatetime.js && ./source/about/updateFileTime.js && hexo g && hexo d
elif [ $1 = 's' ]
then
echo localhost
echo after generate hexo data, deploy localhost and open it at browser
hexo g && hexo s -o
elif [ $1 = 'd' ]
then
echo deploy
echo after generate hexo data, deploy localhost and open it at browser
hexo g && hexo d

fi

執行

1
2
3
. hexoc.sh s update

. hexoc.sh d update

會多執行

1
./source/_posts/writeupdatetime.js && ./source/_posts/updateFileTime.js

相對路徑問題

writeupdatetime.js跟updateFileTime.js 裡的代碼應該由

1
file = files[i]

改為

1
file=path.join(__dirname,files[i]); 

還要改

1
2
3
4
5
6
var localfile = path.join(__dirname,'./');

fs.readdir(localfile,function(err,files){
...
});

這樣才不會有執行路徑上的問題

正則表達式 RegExp

writeupdatetime.js跟updateFileTime.js 裡的代碼有用到正則表達式(Regular Expression) 可以參考一下視頻 【正则表达式RegExp】

Lazyload

Lazyload 的 threshold 從200改為50

1
2
3
4
5
6
lazyload: function () {
$("img.lazyload").lazyload({
effect: "fadeIn",
threshold: 50,
});
},

文章隱藏

因為hexo-blog-encrypt 不能被使用,無法將一些文章加密,所以目前先將一些文章隱藏,以提高頁面整潔性 參考來源:Hexo 如何隐藏文章

hexo-hide-post 安裝

輸入

1
npm install hexo-hide-posts --save

然後在根目錄的_config.yml裡加上

1
2
3
4
5
6
7
8
9
10
# hexo-hide-posts
hide_posts:
# 可以改成其他你喜欢的名字
filter: hidden
# 指定你想要传递隐藏文章的位置,比如让所有隐藏文章在存档页面可见
# 常见的位置有:index, tag, category, archive, sitemap, feed, etc.
# 留空则默认全部隐藏
public_generators: []
# 为隐藏的文章添加 noindex meta 标签,阻止搜索引擎收录
noindex: true

在文章裡加入

1
hidden: true

使用者统计

目前用第三種方法 1.百度统计 2.【hexo】基础教程-六-添加百度统计和Google统计 3.Hexo NexT主题添加百度统计

阿里雲端硬盤擴容

因為擴容的是系統硬盤,所以你OS要重新裝,博客也要重新部署