用最簡單的方式架設Jekyll。
將純文本轉換為靜態BLOG網站。
簡單
不再需要數據庫,不需要開發評論功能,不需要不斷的更新版本——只用關心你的BLOG内容。
靜態
Markdown(或 Textile)、Liquid 和 HTML & CSS 構建可發布的靜態網站。
BLOG支持
支持自定義地址、BLOG分類、頁面、文章以及自定義的布局設計。
—以上內容摘自 Jekyll官網
其實官網都有架設+部署到Github的完整教程,但是這篇文章教的是最簡易的方式,不需要自己用Git命令push,只需要會用鼠標。
首先至 Jekyll Themes選擇你喜歡的主題並且Download下來。
如果你無法做抉擇,下面幾個可以供你參考:
一般主題資料夾內會包含以下檔案:
index.html
首頁的文件_config.yml
設置你的網站信息404.html
自定義404界面(這個一般都會有,如果沒有的話就會使用最“原始”的404頁面)README.md
作者一般會在這個文件中介紹如何配置模版。
同時,文件目錄下應該也會有這些文件夾:
_post
存放你的文章_layouts
網頁模版文件_includes
導航欄,頁腳等組件模版
Download之後解壓縮,用sublime Text打開_config.yml
。
修改BLOG的相關設定後保存。
這邊就不提如何創建Github帳號了,如果還是不會可以參考註冊教程。
新建一個repository,命名格式:用戶名.github.io
例如我的用戶名為YMUJ,我的repository name就應該輸入YMUJ.github.io
。
(我已經創建過了所以會提示已經存在)
將剛剛主題資料夾裡的所有檔案直接鼠標拖移到倉庫裡然後Commit changes
。
(預設是選master分支)
接著你能在倉庫裡看見剛剛push的檔案。
在倉庫上方導航欄找到Settings - GitHub Pages - 將GitHub Pages啟動,若是出現Your site is published at https://yourname.github.io/
代表啟動成功,你可以通過這個網址訪問你的部落格。
在本地的主題資料夾內,找到_posts
,裡頭放的md檔就是文章,你可以使用Sublime Text或是其他Markdown編輯軟體來寫作。
紅框處是文章的配置設定:
subtitle:文章的小標題
)-
換行分割。1 | catagories: |
[標籤1,標籤2]
。寫完文章之後,打開你的Github倉庫,將文章上傳到_posts
裡。
如果想要刪除文章,可以點進文章內,點擊右上方的垃圾桶刪除。
這是給新手的架設教程,如果要正規安裝的話可以在Jekyll官網查看教程,或是有空的話我再詳細寫一個吧。
]]>本篇文章用來紀錄本人使用Git遇到的錯誤以及最終解決辦法。
1 | remote origin already exists |
解決辦法:
1 | 删除远程分支 |
重新添加遠程分支:
1 | git remote add origin git@github.com:[your git name]/[your git repertory] |
解決辦法來源:武东10号
————————————————
產生原因:一般是没有初始化git本地版本管理倉庫,所以無法執行git命令
解决方法:操作之前執行以下命令行:git init
然后執行一下git status
查看狀態信息,good,問題解決。
解決辦法來源:水月沐风
————————————————
剛上傳代碼到 github 的時候,當我輸入 git push -u origin master
時,提示:
1 | fatal: 'origin' does not appear to be a git repository |
解决辦法:
1 | git remote add origin git@github.com:xxse/xx.git |
再次輸入
1 | git push -u origin master |
解決辦法來源:卩杉
————————————————
一、fatal: refusing to merge unrelated histories
今天在使用Git創建項目的时候,在兩個分支合併的時候,出現了下方錯誤。
1 | ~/SpringSpace/newframe on master ⌚ 11:35:56 |
這裡的問題關鍵在於:fatal: refusing to merge unrelated histories
你可能會在git pull或者git push中都有可能會遇到,這是因為兩個分支沒有取得關係。
二、解决方案
在你操作命令后面加--allow-unrelated-histories
例如:
1 | git merge master --allow-unrelated-histories |
1 | ~/SpringSpace/newframe on druid ⌚ 11:36:49 |
如果你是git pull或者git push報fatal: refusing to merge unrelated histories
同理:
1 | git pull origin master --allow-unrelated-histories |
等等,就是這樣完美的解决
解決辦法來源:向小凯同学学习
]]>由於是個人的學習筆記,因此有可能存在錯誤,若有發現錯誤之處煩請糾正或者一起討論!
分為單向與雙向連結串列。
概念圖如下圖所示
資料欄(Data)
與一個連結欄(Pointer)
組成。連結欄(Pointer)
指向其它節點(Node)的位置。陣列(Array) | 連結串列(Linked list) |
---|---|
占用連續的記憶體空間 | 可以非連續 |
各元素型態皆相同 | 各節點型態不必一定相同 |
新增/刪除資料很麻煩,費 O(n) (須挪移元素) | 新增/刪除資料較簡單,花費 O(1)(只更改指標) |
串列分裂、合併較難 | 串列分裂、合併容易 |
須事先宣告連續空間 | 不需預留空間 |
可支援隨機與循序存取 | 只能循序存取(因為必須先讀取指標) |
可靠性佳 | 可靠性差(因為指標斷裂,資料就遺失) |
沒有額外的Link空間需求 | 需要額外的Link空間需求 |
陣列(Array)優點
連結串列(Linked list)優點
動態記憶體配置(Dynamical Memory Allocation)主要是利用連結串列
的方法來解決一些無法事先預測處理資料多寡的問題。
【定義】
動態記憶體配置是在等到執行階段
,才向作業系統要求配置所需的記憶體空間。而靜態記憶體配置則是編譯階段
時就配置記憶體空間。
在靜態資料結構中,由於資料所佔用的空間大小及資料數目要事先宣告,因此,在執行時,空間的大小及資料數目是不會改變的(因為利用陣列結構)。
而在動態資料結構中,資料所佔用之空間大小及資料數目不必事先宣告,在執行時視實際需要而動態的增加或減少(因為利用串列結構)。
由於是個人的學習筆記,因此有可能存在錯誤,若有發現錯誤之處煩請糾正或者一起討論!
如果今天要計算全班20名同學的期中考英文成績總分,不使用陣列的話需要宣告20個變數(Score1,Score2…),為了解決大批的資料處理,使用Array只需要宣告一個一維陣列來存放20名同學的英文成績,如Score[20]。
下方是宣告陣列的程式碼
1 | int[] arr; // arr is a reference to int[] |
如果將陣列畫成圖就長這個樣子
從圖中能看出,陣列是由陣列名稱[陣列索引]
組成,arr[0]、arr[1]、arr[2]、arr[3]中的0,1,2,3便是索引(Index,也稱註標),
陣列提供索引值(index)存取陣列中個別元素,每個索引值對應唯一一個陣列元素,因此我們只要指定陣列與索引值就可存取陣列中指定的元素。
而陣列又可分為一維陣列、二維陣列、多維陣列,你可以這樣宣告二維陣列
1 | int arr[3][4] = { |
多維陣列也是以此類推,下圖是三維陣列的示意圖。
意思是宣告Score是由3個(0-2)二維陣列,每個二維陣列包含4列(0-3),5行(0-4)組合而成的整數三維陣列。
並且共計有3×4×5=60元素。
下面提提陣列的特性
假設今天我們需要插入一個元素
平均挪移次數 = (n+(n-1)+…+1)/n = n(n-1)/2 × 1/n = (n+1)/2 = O(n)
常使用的運算指令:
讀取(Read)
利用索引(Index)來讀取
1 | A={22,33,44,55} |
寫入(Write)
利用索引(Index)來寫入
1 | A={22,33,44,55} |
插入(Insert)
在指定的索引i的位置插入一項新元素,而原來索引i和之後的元素都必須往後挪一格。
刪除(Delete)
刪除指定的註標i位置的元素,原來註標i的元素被刪除,為了避免浪費記憶體空間,因此之後的元素都必須要往前挪一個位置。(沒資料就補0)
複製(Copy)
將來源陣列的元素內含值全部逐一copy到目的陣列。
1 | for(i=0;i<5;i++) |
陣列在記憶體中的儲存方式
令:Lo為起始位址;d為元素大小, 則A[i]之位置計算 = Lo + i*d
二維陣列分成以行為主(Column-Major)以及以列為主(Row-Major)。
以列為主
由上而下一列一列讀入一維陣列。
令Lo為起始位址
d為元素大小
則二維陣列A[i,j]位置會儲存到一維陣列的那一個位置呢?
公式:A[i,j] = Lo + (i * n + j) * d
以行為主
由左往右一行一行讀入一維陣列。
令Lo為起始位址
d為元素大小
則二維陣列A[i,j]位置會儲存到一維陣列的那一個位置呢?
公式:A[i,j] = Lo + (i + j * m )* d
二維陣列所探討的 二維陣列所探討的4個議題
Row-Major時,列數較大的元素 ⇒ 位址必較大
Row-Major時,列數較小的元素 ⇒ 位址必較小
Column-Major時,行數大的元素 ⇒ 位址必較大
Column-Major時,行數小的元素 ⇒ 位址必較小
範例:令A[3, 5] = 14, A[5, 3] = 22
比較位址及列數:14 < 22, 3 < 5 ⇒ Row-Major
範例:令A[3, 5] = 14, A[5, 3] = 10
比較位址及行數:14 > 10, 5 > 3 ⇒ Column-Major
範例:令A[3, 5] = 14, A[5, 7] = 33
比較位址、列數、行數:14 < 30, 3 < 5, 5 < 7 ⇒ 無法判斷
範例:A[1, 1]的位址是2,A[2, 3]的位址為18,A[3, 2]的位址為28,求A[4, 5]的位址
首先判斷是Row-Major或Column-Major:
2 < 3, 3 > 2, 18 < 28 ⇒ Row-Major
因為A[1, 1] = 2 , ∴ Lo=2
代入公式A[i,j] = Lo + [(i-1)×n + (j-1)]×d,求出n和d
a[2, 3] = 2 + [(2-1)×n + (3-1)]×d = 2 + nd + 2d = 18 ⇒ nd + 2d = 16
— (1)
a[3, 2] = 2 + [(3-1)×n + (2-1)]×d = 2 + 2nd + d = 28 ⇒ 2nd + d = 26
— (2)
(1)×2 - (2) = 3d =6 ⇒ d=2, n=6
將A[4, 5] 代入公式A[i,j] = Lo + [(i-1)×n + (j-1)]×d
a[2, 3] = 2 + [(4-1)×6 + (5-1)]×2 = 46
例: 若A[3,3]之位址為121, A[6,4]之位址為159,元素大小為 1, 求 A[4, 5]之位址.
先算Row-Major
:
將A[3,3]與A[6,4]代入以下公式,求解Lo 與行數n:
A[i, j] = Lo +[(i-1)×n+ (j-1)] ×d
得: n = 37/3 (∵非整數, ∴ 不是Row-Major)
再算Column-Major
:
將A[3,3]與A[6,4]代入以下公式,求解Lo 與行數n:
A[i, j] = Lo +[(i-1)+ (j-1) × m] ×d
得: n = 35, Lo = 49 (∵皆為整數, ∴ 是Column-Major)
得: A[4, 5] = 192.
例:A(1, 1)之address為2,A(2, 3)為18,A(3, 2)為28,求A(4, 5)之位址?
Sol:
由 A(2, 3) 與 A(3, 2) 及其兩個位置,可以判斷出是Row-major (不要用A(1, 1)和另兩者之一比,會不好判斷!!)
此時,假設元素大小為 d,行數為 n
A(2, 3) = A(1, 1) + [(2-1)×n +(3-1)] × d
18 = 2 + nd +2d ………(1)
A(3, 2) = A(1, 1) + [(3-1)×n +(2-1)] × d
28 = 2 + 2nd +d ………(2)
因此, (1) ×2 - (2) => 8 = 2 + 3d,∴ d = 2。
再將 d 代回公式 (1),可得 18 = 2 + 2n + 4,∴n = 6。
∴A(4, 5) = A(1, 1) + [(4-1) × 6 + (5-1)] × 2 = 46。
解答
1.陣列是一組變數的集合,而這些變數:
(A) 具有不同的資料型態,並且分散存在記憶體空間
(B) 具有相同的資料型態,並且分散存在記憶體空間
© 具有相同的資料型態,並且線性相鄰的存在記憶體空間
(D) 具有不同的資料型態,並且線性相鄰的存在記憶體空間
2.有關陣列下列那一項敘述有誤?
(A)佔用連續記憶體空間
(B)插入或刪除元素非常容易
©各元素的資料型態皆相同
(D)支援隨機存取(Random Access)與循序(Sequential Access)
3.存取陣列中的元素時,需指定要存取元素在陣列中的?
(A)記憶體位址
(B)索引編號
©元素值
(D)以上皆可
4.在一維陣列中,常使用的運算指令有五種,下列那一種不是?
(A)讀取(Read)
(B)寫入(Write)
©複製(Copy)
(D)貼上(Past)
5.在一維陣列中,那一個運算指令執行時,會往後挪一個位置?
(A)讀取(Read)
(B)寫入(Write)
©刪除(Delete)
(D)插入(Insert)
6.假設有n個整數利用陣列(Array)儲存,將存放於最前面及最後面的資料印出時,請問所需之時間複雜度以下列何者表示最為適當?
(A)O(1)
(B)O(log n)
©O(n)
(D)O(n^2)
7.假設有一陣列A儲存已排序的n個數字資料,刪除最大數值的資料需多少時間?
(A)O(1)
(B)O(log n)
©O(n)
(D)O(n^2)
8.假設有一陣列A儲存已排序好的資料(a1,a2,…,an),請問下列何者錯誤?
(A)找第k大的資料需要O(log n)
(B)刪除需要O(n)的時間
©插入需要O(n)的時間
(D)以上皆非
9.請問在陣列中「讀取」某一元素的時間複雜度為何?
(A)O(1)
(B)O(log n)
©O(n)
(D)O(n^2)
7.請問在陣列中「寫入」某一元素的時間複雜度為何?
(A)O(1)
(B)O(log n)
©O(n)
(D)O(n2)
8.假設有一陣列A儲存已排序的n個數字資料,請問「插入」某一元素的時間複雜度為何?
(A)O(1)
(B)O(log n)
©O(n)
(D)O(n^2)
9.假設有一陣列A儲存已排序的n個數字資料,請問「刪除」某一元素的時間複雜度為何?
(A)O(1)
(B)O(log n)
©O(n)
(D)O(n^2)
10.假設有一陣列A陣列的元素內含值欲全部逐一複製到B陣列中,請問時間複雜度為何?
(A)O(1)
(B)O(log n)
©O(n)
(D)O(n^2)
11.關於「變數宣告」與「陣列宣告」的敘述,下列何者有誤?
(A) 變數宣告時,會產生不連續的記憶體空間的配置
(B) 變數宣告時,會產生連續的記憶體空間的配置
© 陣列宣告時,會產生連續的記憶體空間的配置
(D) 變數宣告時,變數與變數之間都是個別獨立的記憶體空間。
12.在陣列宣告時,如果宣告int A[10];,請問陣列註標的範圍為多少?
(A) A[0]、A[1]、A[2],…,A[10]
(B) A[0]、A[1]、A[2],…,A[9]
© A[1]、A[2],…,A[10]
(D) A[1]、A[2],…,A[11]
13.有一整數陣列int A[0…29] ; (假設int資料型態佔用2個位元組),則此陣列共佔多少位元組?
(A) 40
(B) 30
© 4
(D) 60
14.陣列A[註標]中,註標不可為:
(A)整數
(B)運算式
©變數
(D)字串
答案:
CBBDD
AABAA
CCCBB
DD
將使用Google Fonts提供的思源宋體,並將googleapis.com
改為烧饼博客提供的镜像loli.net
網站字體的大小你可以在.\themes\next\source\css\_variables\base.styl
中修改
1 | // Font size |
至於網站字體顏色則是在BLOG根目錄\source\_data\styles.styl
加上
1 | //修改字體顏色 |
下載鏈結:Download
解壓縮至BLOG根目錄\source\fonts
,若是沒有fonts請自行新增。
修改.\themes\next\_config.yml
font處成下方內容
1 | font: |
接著修改 .\themes\next\source\css\_variables\base.styl
font-family-monospace成下方內容
1 | $font-family-monospace = consolas, Menlo, $font-family-base, monospace |
修改 .\themes\next\source\css\_variables\base.styl
font families處成下方內容
1 | // Font families. |
在 BLOG根目錄\source\_data\styles.styl
加上:
1 | @font-face { |
有興趣的話,你也可以在Google Fonts尋找喜歡的字體自行修改。
]]>PicGo是一款圖片上傳工具,支援多個圖床。
在這個部落格剛開始寫的時候我的圖片都是上傳到imgur上,後來擔心外鏈容易失連所以改用本地儲存,
但存在本地的話部署的速度會非常緩慢,找了一圈最後決定將圖片上傳到github圖床,本篇文章主要教各位如何使用PicGo上傳圖片到Github上。
PicGo目前支持了
macOS用戶請下載最新版本的dmg
文件,windows用戶請下載最新版本的exe
文件,linux用戶請下載AppImage
文件。
如果你是Arc類类的Linux用戶,可以直接通過aurman -S picgo-appimage
來安裝PicGo。
如果你和我一樣是Windows用戶,點此下載
選擇最新版本picgo-setup-2.1.2.exe
。
下載完畢之後安裝。
首先到Github頁面右上角找到+號 - New repository,填寫Repository name然後Create repository。
Github右上角頭像倒三角形 - Settings - Developer settings - Personal access tokens - Generate new token
(或者你可以直接點擊鏈接tokens)
填寫Note(隨意填寫 如:PicGo) 並且勾選repo
,拉到下方Generate token
就會生成token。
必須注意的是,這個token生成後只會顯示一次,你要把這個token複製保存備用。
打開PicGo左邊選擇圖床設置 - Github圖床
1.設定倉庫名: 用戶名/倉庫名 (例如我是ZENreal/picGo)
2.設定分支名: 一般是master
3.設定Token: 把剛剛複製的Token貼上
4.指定存儲路徑: (你可以隨意填寫,會自動幫你生成資料夾專門儲存圖片)
5.設定自定義域名: 格式https://raw.githubusercontent.com/用戶名/倉庫名/master
例如我是https://raw.githubusercontent.com/ZENreal/picGo/master
,我的圖片網址就會是https://raw.githubusercontent.com/ZENreal/picGo/master/img/picgo3.PNG
填寫完畢之後記得點擊確定
並且設置為默認圖床
。
接著你就可以在上傳區上傳圖片,並且記得在下方選擇你要的圖片鏈接格式。
點擊圖片左下方的圖示可以複製圖片網址。
回到Github你可以看見系統自動生成了img資料夾,並且你上傳的圖片都已經成功上傳至img。
至於其他的圖床設置方式,官方的配置手冊都已經說明得非常清楚,可以自行查閱。
由於github倉庫有容量限制並為了能更快的加載BLOG,建議將圖片壓縮後再上傳到圖床上,至於如何壓縮圖片,你可以使用:
TinyPNG
每次最多上傳20張圖片,大小限制5M,但要手動下載。
Imagine
可離線使用、跨平台、開源、方便操作
meowtec/Imagine
Squoosh
pngquant
目前我使用的是Imagine。
選擇Imagine-Setup-0.5.0.exe
安裝後就可以直接使用。
]]>效果圖
簡易版本或者進階版本擇一使用。
STEP 1
安裝 npm install --save hexo-helper-live2d
STEP 2
在站點配置文件 新增:
1 | # Live2D |
詳細請見live2d的使用手冊
若是想更換不同的模組,可以使用live2d-widget-models提供的模組。
STEP 1
使用npm install {packagename}
安裝
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01
(使用npm install --save - live2d-widget-model-haru
)live2d-widget-model-haru/02
(使用npm install --save - live2d-widget-model-haru
)live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
原本模組的預覽已經失效了,要嘛就上網搜索看看,要嘛就自己嘗試看看。
或者樣本集
左Tororo 右Hijiki
Nito
左Koharu 右Haruto
miku
chitose
epsilon
haru
wanko
unitychan
izumi
shizuku
hibiki
其他的請自行測試。
STEP 2
之後到站點配置文件修改你剛剛的設置,找到model裡頭的use:
將後面live2d-widget-model-wanko
改成你要換成的模組名稱。
1 | model: |
若是需要刪除,直接npm uninstall hexo-helper-live2d
,並將站點配置文件裡頭的設定刪除即可。
STEP 1
到stevenjoezhang/live2d-widget下載壓縮包。
STEP 2
將壓縮包解壓到themes/next/source
,並修改檔名為live2d-widget
STEP 3
修改 live2d-widget\autoload.js
將
1 | const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/"; |
修改成
1 | const live2d_path = "/live2d-widget/"; |
STEP 4
打開 .\themes\next\layout\_layout.swig
,在body上方加上
1 | <script src="/live2d-widget/autoload.js"></script> |
並在上方<head>
與</head>
之間加上
1 | <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> |
(因為進階版需要 jQuery 和 font-awesome 支援)
STEP 5
在 站點配置文件 加上
1 | live2d: |
themes\next\source\live2d-widget
裡的waifu.css
waifu-tips.js
和waifu-tips.json
用來修改看板娘大小、位置、格式、說的話。
前段時間使用過Disqus覺得不夠簡潔,而且有很多英文挺不方便的,在設置裡大致看過所有的評論系統,本來想使用Valine但是需要實名認證(需要有支付寶),沒法完成認證所以改用Gitalk,那這邊就說明一下如何使用Gitalk。
Demo: https://gitalk.github.io
官方中文說明:https://github.com/gitalk/gitalk/blob/master/readme-cn.md
STEP 1
首先前往Github - Settings - Developer settings - OAuth Apps - New OAuth App,或者直接點擊
Register a new OAuth application創建OAuth App。
Application name:必填,OAuth的名字
Homepage URL:必填,使用組件的網站網址(填寫你的BLOG網址即可)
Application description:選填,該OAuth的說明
Authorization callback URL:必填,授權成功後回調網址,跟Homepage URL參數保持一致就好
這些參數在註冊成功後是可以修改。
STEP 2
創建成功後進入OAuth
你可以在這裡找到 client_id / client_secret
請在主題配置文件設置
github_id 倉庫的創建者
repo 填你存放gitalk的倉庫名稱
client_id / client_secret 在你的OAuth裡頭可以找到
admin_user 你github倉庫的管理者(如是多人管理可以使用 ['admin_user1'],['admin_user2'] 這個格式)
language: zh-TW (也可設置其他 如:en | es-ES | fr | ru | zh-CN | zh-TW)
第一次Gitalk需要初始化評論,需要你先點擊使用GitHub登陸,然後刷新頁面才會初始化,
或者自己去倉庫里手動創建一個issues,並添加issues的labels值為Gitalk的labels參數和id參數的值。
Gitalk 評論是通過 issues 的 labels 來標示一篇文章的。
如果 labels 中存在相應文章的 label 標籤,那就說明該文章已經初始化過了。
例如
點擊評論右上方的鉛筆圖示可以管理評論。
可以對評論做reaction或是其他管理動作。
你也可以在右方設定通知方式
分別為
不訂閱: 僅當你參與了或者被@提及時才會收到通知
訂閱: 接收這個問題的所有通知
自訂: 有以下兩種
在右側可以管理issue
在issue頁面點擊New issue
設定issue
在issues頁面點擊Labels
點擊New Label
設定並創建Label
你可以在 .\themes\next\layout\_third-party\comments\gitalk.swig
管理文章id格式
NexT 7.4.1的預設為
1 | id: '{{ gitalk_md5(page.path) }}', |
更詳細的建議參考:
打開.\source\_data\styles.styl
加上
1 | body { |
參數
假設你有想使用unsplash上特定用戶的圖片,請將background-image:url
設定成下方格式:
https://source.unsplash.com/user/{USERNAME}
假設你有想使用特定用戶likes的圖片
https://source.unsplash.com/user/{USERNAME}/likes
假設你有想使用特定用戶收藏的圖片
https://source.unsplash.com/collection/{COLLECTION ID}
Randomhttps://source.unsplash.com/daily
Random from a userhttps://source.unsplash.com/user/erondu/daily
Random from a search termhttps://source.unsplash.com/weekly?water
隨機關鍵字搜索出來的圖片
https://source.unsplash.com/featured/?{KEYWORD},{KEYWORD}
ex:https://source.unsplash.com/1600x900/?nature,water
特定照片
https://source.unsplash.com/{PHOTO ID}/{WIDTHxHEIGHT}
ex:https://source.unsplash.com/WLUHO9A_xik/1600x900
請參考BLOG背景透明化
]]>由於是個人的學習筆記,因此有可能存在錯誤,若有發現錯誤之處煩請糾正或者一起討論!
以下內容參考何謂資訊?何謂資料?其兩者關系為何? - 奇摩知識+
指經過電腦處理後,對資料輸入者而言,具有特定意義的資料集合。
因此:資料(Data) -> 經過處理與整理 -> 資訊(Information)。
例如今天有一份表格記錄著班級的期中考試成績,這些成績就是資料,而總成績、平均成績、排名則是資訊。這些資訊可以提供我們判斷及做決策的依據。
程式設計 = 資料結構 + 演算法
因此我們需要選擇適當的"資料結構"設計出最有效率的"演算法",進而轉換成有效率的"程式"。
在電腦科學中,資料結構(英語:data structure)是電腦中儲存、組織資料的方式。 資料結構意味著介面或封裝:一個資料結構可被視為兩個函式之間的介面,或者是由資料類型聯合組成的儲存內容的存取方法封裝。 大多數資料結構都由數列、記錄、可辨識聯合、參照等基本類型構成。舉例而言,可為空的參照(nullable reference)是參照與可辨識聯合的結合體,而最簡單的鏈式結構連結串列則是由記錄與可空參照構成。 資料結構可透過程式語言所提供的資料類型、參照及其他操作加以實現。一個設計良好的資料結構,應該在儘可能使用較少的時間與空間資源的前提下,支援各種程式執行。 . . . ---維基百科
太生澀難懂了!有沒有更簡潔有力一點的解釋?
陣列的使用就是靜態資料結構的代表,而動態資料結構則以鏈結串列結構為代表。
…等,不只這些,其他的以後再說。
分為循序串列(如:陣列)以及連結串列,連結串列之後再說。
下方就是宣告陣列的程式碼:
1 | int[] data = new int[100]; //宣告陣列大小 |
常與另一種有序的線性資料集合 佇列 相提並論。
堆疊常用 一維陣列 或 連結串列 來實現。
依照圖來看它是一個上下顛倒的樹,其根部在上方,是資料的開頭,而下方的資料稱為葉子。
圖形很像樹狀結構,不同的地方是節點之間沒有父子關係。
請參考認識圖形結構
用於有限步驟內解決一個特定問題。
例如:
你可以稱之為「應對燈泡不亮的簡單演算法」。
一個演算法需要俱備的五個特性:輸入(Input)、輸出(Output)、明確性(Definiteness)、有限性(Finiteness)、有效性(Effectiveness)
不一定要有輸入,但至少要有一個輸出。
每一行指令都必須明確,不可模稜兩可。
今天有一個情境,需要判斷某數值是否為偶數。
(1)輸入一個正整數
(2)作餘數運算是否為0
(3)為0即為偶數
從演算法觀點來看,第二點並不符合明確性,因為並無說明餘數運算是如何運算。
應該改寫成:
(1)輸入一個正整數N
(2)除果N除以為其餘數為0
(3)則其N為偶數
演算法必須能終止執行,亦即必須在有限的步驟內完成。
必須說的是:真正的程式是可以有無窮迴路的動作,但演算法並非是真正可以執行的程式。
例如:Windows作業系統除非系統關機或當機,否則它會永遠執行「等待迴圈」,等待使用者從輸入設備輸入指令。
演算法的處理動作必須是有效且具體可行的,同時能讓使用者使用紙筆計算獲得答案。
因此,演算法是一個演算法是明確、有效、最終會結束的可執行步驟。
描述演算法的方法有:
利用「流程圖」來描述使用者登入帳號與密碼時,系統檢查的過程。
兼具文字描述及流程圖的優點,其方式是用文字摻雜程式語言,來描述解題步驟與方法。
1 | Input: UserName,Password |
資料結構中一般都是利用虛擬碼(Pseudo Code)來表示演算法。
循序 (Sequence) 結構
依先後順序,一個步驟接著一個步驟依序執行。
選擇 (Selection) 結構
依據不同的條件,選擇不同的解題步驟執行。
重複 (Iteration) 結構
部分解題步驟需要反覆執行,直到符合或是不符合某一條件式時,才會離開重複執行的部份。
重複結構也常被稱為「迴圈 (Loop)」 。
分析所要解決的問題(需求)
設計解題的步驟(演算法)
例如Binary Search(二分搜索算法)
編寫程式(程式碼)
上機測試,偵測錯誤(debug)
Programming Language Error:
例如以下的程式是正確的:
1 | System.out.println("Hello World"); |
以下的程式不正確:
1 | System.out.println(Hello World); |
第二個程式理論上要顯示的是叫作Hello World的變數,而不是Hello World這個字,且Java語言的變數名稱中不可有空白,因此會出現語法錯誤。
程式語法雖然正確但無法提供正確的功能。
例如用C語言計算平均數,以下程式雖然能夠通過編譯並執行,但結果是錯誤的。
1 | int average(int a, int b) |
Debug methods:
(1) Single steps
(2) Breaking Point Setting
演算法 VS 程式
演算法是以人為主,任何人都可以閱讀的程式碼,強調「可讀性」。
程式是以電腦為主,強調執行結果正確性(Correctness)、可維護性(Maintainable)及執行效率(Performance)。
評估演算法的三種方法:
最差狀況分析(Worst-case analysis) [最廣用]
在所有可能的輸入組合下最多所需要的時間(Upper bound),O(n)最常被使用來表示理論「上限」。
平均狀況分析(Average-case analysis)
在所有可能的輸入組合下平均所需時間(Average Time)。
最佳狀況分析(Best-case analysis)
分析演算法對何種輸入資料所需花費的時間最少(Lower bound)。
基本上時間複雜度的分析比空間複雜度來的重要,因為當資料量龐大時,時間複雜度會有較大的差異性,空間複雜度則差異較小,再加上目前的記憶體相當便宜,因此目前在資料結構所探討演算法之效率評估,都著重在時間複雜度方面。
定義:演算法執行時,所需花費的時間。
分析方法:統計演算法中指令執行的次數。(演算法有多快不是以秒衡量,而是以步驟次數。)
註解、括號、函式宣告及變數宣告不列入執行時間計算。
變數宣告時若有指派初始值,則視為1次。
函式呼叫視為1次。
不考慮指令本身的複雜度或實際執行時間,一個指令皆視為1次。
範例:
//假設某電腦執行加法要5微秒,減法要10微秒,乘法要20微秒。
不管實際執行時間A=0
、A++
、A--
、A=A*5
都視為執行一次。
範例:
1 | int sum(int[] data) // 0次 |
時間複雜度常用大O符號表述一個演算法在輸入 n 個東西時,總執行時間與 n 的關係。
時間複雜度的公式是: T(n) = O( f(n) )
,其中f(n) 表示每行代碼執行次數之和,這個公式的全稱是:算法的漸進時間複雜度。
如果一個演算法對於任何大小為n(必須比n0大)的輸入,它至多需要 5n^3 + 3n的時間執行完畢,那麼它的漸近時間複雜度是 O(n^3)。
取執行次數中最高次方或最大指數部分
O(1)
1 | function(int n){ |
O(n)
1 | function(int n){ |
O(n²)
1 | function(int n){ |
常見的六種時間複雜度與演算法
O(1):陣列讀取
O(n):簡易搜尋
O(log n):二分搜尋
O(nlogn):合併排序
O(n²):選擇排序
O(2^n):費波那契數列
時間複雜度的比較
定義:演算法執行時,所需花費的記憶體。
分析方法:統計演算法中所使用的固定空間(Fixed Space)和變動空間(Variable Space)。
固定空間(Fixed Space, C):非主要考量
變動空間(Variable Space, SP )
固定空間通常都是必要的,所以當有使用空間限制的需求時,只會考慮能否節省變動空間。
空間函式S(P)
:表示當輸入資料量為n時,演算法中指令所需執行的次數。
格式:S(P) = C + SP
O(1)
不會影響使用的變數數量。
1 | function(int n){ |
O(n)
會隨著丟進去的數字而影響變數的量。
1 | function(int n){ |
《演算法圖鑑》第一章:資料結構
演算法的表示–流程圖
【演算法】入門介紹-什麼是演算法 What’s Algorithm?
初學者學演算法|從時間複雜度認識常見演算法(一)
資料結構筆記(一):演算法、時間複雜度、空間複雜度
初學者學演算法|談什麼是演算法和時間複雜度
Second Round 目錄:演算法與資料結構
程式語言的控制結構
[資料結構] 演算法評估與資料型別
算法的时间与空间复杂度(一看就懂)
基礎電腦科學:演算法概要
主題改為NexT之後發現能玩的功能實在太多了,要修改的地方也很多,搗鼓一番後決定寫這篇文章來記錄我個人的NexT主題優化歷程,順便分享給大家最新版本的修改方式。
NexT主題更新到v7.3.0+
這一版之後的主題簡化自定義內容的添加方法,刪除了以前版本所用的custom.styl自定義css樣式文件
新版的使用方法,主題配置文件中:
1 | # Define custom file paths. |
1 | #style: source/_data/styles.styl |
將注釋刪除(就是刪除前方#),然後在 BLOG根目錄/source/_data/
裡新增文件styles.styl
,在該文件中添加自定義內容。
同樣,如果需要在head中添加內容,需要新建head.swig文件,在其中添加自定義內容即可。 在post.swig中添加的文章結尾樣式,可以直接添加在post-body-end.swig文件中。
兩種辦法:
- 前往NexT版本發布頁面(~最新v7.4.0)、NexT版本發布頁面(~v5)
- 選擇需要的版本點Source code(zip)下載到本地
- 解壓縮之後放到
./themes/
並將解壓後的文件夾名稱(hexo-theme-next-版本號)更改為next
。
1 | cd hexo |
文本居中引用效果
1 | {% cq %} |
有HTML方式或是直接使用標籤
default
1 | <div class="note default"><p>default html</p></div> |
Content (md partial supported)
1 | {% note class_name %} Content (md partial supported) {% endnote %} |
其中,class_name 可以是以下列表中的一個值:
在主題配置文件中可修改note樣式。
1 | # Note tag (bs-callout) |
使用方法:
1 | {% label [class]@Text %} |
[class] : default | primary | success | info | warning | danger.
效果:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1 | Lorem {% label @ipsum %} {% label primary@dolor sit %} amet, consectetur {% label success@adipiscing elit, %} sed {% label info@do eiusmod %} tempor incididunt ut labore et dolore magna aliqua. |
在主題配置文件將tabs改成true。
1 | # Tabs tag |
代碼:
1 | {% tabs 標籤頁, 1 %} |
標籤頁後面的,1 代表預設開啟的標籤頁數,若改成-1代表隱藏。
1 | {% button url, text, icon [class], [title] %} |
範例:
1 | {% btn #, Text %}{% btn #, Text & Title,, Title %} |
1 | <div>{% btn #,, home fa-5x %}{% btn #,, home fa-5x %}{% btn #,, home fa-5x %}</div> |
1 | <p>{% btn #, Text & Icon (buggy), home %} |
Text & Icon (buggy) Text & Icon (fixed width)
1 | <div class="text-center"><div>{% btn #,, header %}{% btn #,, edge %}{% btn #,, times %}{% btn #,, circle-o %}</div> |
1 | <div class="text-center">{% btn #, Previous Chapter, arrow-left fa-fw fa-lg, Previous Chapter (Full Image) %} {% btn #, Next Chapter, arrow-right fa-fw fa-lg, Next Chapter (Label) %}</div> |
後方是font awesome的class id 。
使用方法:
1 | {% grouppicture [group]-[layout] %}{% endgrouppicture %} |
1 | {% grouppicture 6-3 %} |
NexT 中 RSS 有三個設置選項,滿足特定的使用場景。更改主題配置文件,設定 rss 字段的值:
hexo-generator-feed
插件。安裝方式:在BLOG根目錄Git Bash
1 | npm install hexo-generator-feed --save |
在站點配置文件,中加入
1 | feed: |
將favicon放到BLOG根目錄\source
裡,主題配置文件找到favicon處直接改成:
1 | favicon: |
1 | # Local Search |
此功能需要安裝 hexo-generator-search
和 hexo-generator-searchdb
1 | npm i hexo-generator-search |
1 | # Search |
1 | # Use icon instead of the symbol # to indicate the tag at the bottom of the post |
1 | powered: |
將以下代碼放source/_data/styles.styl
1 | //自定義NOTE |
1 | <div class="alert alert-success"><i class="fa fa-lightbulb-o"></i> success</div> |
1 | <div class="alert alert-info"><i class="fa fa-info"></i> info</div> |
1 | <div class="alert alert-warning"><i class="fa fa-bell"></i> warning</div> |
1 | <div class="alert alert-danger"><i class="fa fa-bug"></i> danger</div> |
將以下代碼放source/_data/styles.styl
1 | //自定義文字色塊 |
1 | <span id="inline-blue">主題配置文件</span> |
主題配置文件
1 | <span id="inline-purple">主題配置文件</span> |
主題配置文件
1 | <span id="inline-yellow">主題配置文件</span> |
主題配置文件
1 | <span id="inline-green">主題配置文件</span> |
打開.\source\_data\styles.styl
加上
1 | /*修改h1前面圖標*/ |
請到 https://fontawesome.com/ 尋找喜歡的圖示替換。
效果見本站
打開.\themes\next\layout\_partials\sidebar\site-overview.swig
找到:
1 | {%- if theme.links %} |
在上方加上以下代碼:
1 | {% if theme.recent_posts %} |
然後打開站點配置文件,加上:
1 | recent_posts_title: 近期文章 |
效果
打開.\source\_data\styles.styl
加上
1 | //list |
在 CSS 中常見的清單 (list) 屬性有以下幾種:
1 | <ul style='list-style-type:square;'> |
1 | <ul style='list-style-type:upper-roman;'> |
1 | list-style-image:url([image_url]); |
1 | <ul style='list-style-position:inside;'> |
1 | <ul style='list-style-position:outside;'> |
以上提到的這三個 (list-style-style、list-style-position、及 list-style-image) 屬性可以被簡化為一個 list-style 屬性。這種做法稱為捷徑 (shortcut)。在這裡,屬性的順序並不重要。
你也可以這樣寫:
1 | ul { |
來源:CSS語法教學
將鼠標.cur檔放在blog\source\images
裡,然後打開.\source\_data\styles.styl
加上
1 | /* 鼠標樣式 */ |
打開.\themes\next\layout\_marco\post.swig
搜索
1 | <footer class="post-footer"> |
上方找到
1 | {%- if theme.creative_commons.license and theme.creative_commons.post %} |
刪除整段並加上:
1 | <div> |
打開.\themes\next\layout\_marco\
新建檔案passage-end-tag.swig
加入:
1 | {% if theme.passage_end_tag.enabled %} |
P.S.若是不需要文章結束提示文字,請把那段div刪除。
效果
打開.\themes\next\source\css\_variables\Pisces.styl
找到$border-radius-inner
與$border-radius
照下方格式修改:
1 | $border-radius-inner = 0 0 16px 16px; |
打開.\themes\next\source\css\_schemes\Pisces\_layout.styl
在最下方加入
1 | .sidebar { |
打開.\source\_data\styles.styl
加上
1 | // 文章内鏈接文本樣式 |
第一個color指的是鏈接顯示的顏色,第二個color是移上去顯示的顏色。
將背景圖片放在 BLOG根目錄\source\images
打開.\source\_data\styles.styl
加上
1 | @media screen and (min-width:1200px) { |
若是對隨機背景有興趣的可以參考我的另一篇文:Hexo 搭建系列 - BLOG隨機背景切換。
打開.\source\_data\styles.styl
加上
1 | // page-opacity |
若是使用上方代碼使得note也變得透明,可以在.\source\_data\styles.styl
加上
1 | //自定義note樣式 |
打開.\source\_data\styles.styl
選擇性加上自己要修改的部分代碼。
1 | //改掉題頭顏色 |
兩種風格,一種normal一種night eighties。
效果
1 | TEST |
打開.\source\_data\styles.styl
加上
1 | // mac panel |
然後記得在主題配置文件修改highlight主題。
1 | highlight_theme: night eighties |
根據個人需要修改參數即可。
如果你想使用
1 | highlight_theme: normal |
打開.\source\_data\styles.styl
加上
1 | // mac panel |
若是你有開啟code copy功能(default風格),可能會造成樣式跑掉,
你可以打開.\themes\next\source\css\_common\scaffolding\highlight\copy-code.styl
找到
1 | else { |
將top改為-31px;
。
在 themes\next\source\css\_schemes\Pisces\_layout.styl
最下方加上
1 | header{ width: 80% ; } |
自行修改參數
效果見本站。
打開.\source\_data\styles.styl
加上
1 | //標題特效 |
是使用這篇文章的方法为您的Hexo博客添加Hitokoto一言功能,文章內有很多詳細的代碼解釋。
根據放置位置的不同需要修改的檔案也不同:
選擇一、文章目錄+本站概要下方
在 .\themes\next\layout\_custom\sidebar.swig
適當位置加入下方代碼
選擇二、本站概要下方
在 themes\hexo-theme-next-7.4.1\layout\_partials\sidebar\site-overview.swig
適當位置加入下方代碼
1 | <!-- hitokoto --> |
然後打開.\source\_data\styles.styl
加上
1 | //hitokoto |
效果 這個就是效果~
在.\source\_data\styles.styl
加上:
1 | // Custom styles. |
在.\source\_data\styles.styl
加上:
1 | /*去掉圖片邊框*/ |
請自行在本站選取文字查看效果。
在.\source\_data\styles.styl
加上:
1 | // 修改選中文字底色 |
1 | {% video url %} |
Examples:
1 | {% video https://example.com/sample.mp4 %} |
其他請參考Hexo 搭建系列 - 插入音樂與影片
安裝hexo-footnotes
插件
1 | npm install hexo-footnotes --save |
打開 .\themes\next\layout\_partials\sidebar\site-overview.swig
找到
1 | {%- if theme.avatar.url %} |
下方加上
1 | <a href="/"> |
完整程式碼如下
1 | {%- if theme.avatar.url %} |
還有很多功能我沒用到我就沒介紹…可以自行摸索。
下方是我在文章中都沒有提到的功能,都是很簡單的小插件,可以自行摸索。
I’m from the Earth. Water Planet!
終於還是從Butterfly轉成Next主題了,每次爬文發現大家都使用next主題做教程,有些檔案在我的主題裡名稱不一樣甚至格式也不一樣導致code寫法不同,找尋這些花了不少時間,最終決定也合流使用next主題了(畢竟懶…)。
但是在我安裝next主題之後打開網頁卻是空白的,搞了半天發現是motion設置的問題,修改成false之後就可以正常開啟了。
安裝/換成 next 主題"有可能"遇到以下問題:
我猜測可能是頁面動畫導致網頁顯示空白,因此我將它設置成false就能正常顯示了。
我倒是沒遇到這個問題,有這個問題的可以參考:
Hexo next 主题显示全白是什么原因?
请问hexo next主题deploy到GitHub后不显示内容只显示框架这个问题怎么解决?
注意格式必須為以下:
1 | theme: next |
theme:後方必需要有一個半形空格,且theme前方不能有別的東西。
1 | hexo clean |
hexo clean用來清除快取檔案 (db.json) 和已產生的靜態檔案 (public)。
每次安裝完主題記得要clean。
]]>🍑 🍇 🍐 🍓 🍌 🍉 🍍 🍋 🍎
HEXO預設的markdown渲染器是hexo-renderer-marked
,這個渲染器並不支援插件擴展,所以我們需要卸載它改裝hexo-renderer-markdown-it
。
而hexo-renderer-markdown-it 原裝包含了以下插件:
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
並不包含emoji插件,因此我們還要安裝markdown-it-emoji
來插入表情。
STEP 1
首先卸載hexo-renderer-marked然後再安裝hexo-renderer-markdown-it。
1 | npm uninstall hexo-renderer-marked --save |
STEP 2
安裝markdown-it-emoji:
1 | npm install markdown-it-emoji --save |
STEP 3
打開 config.yml 加入以下內容:
1 | markdown: |
STEP 4
使用方法:在 emoji-cheat-sheet 中查找想貼上的表情,例如 💥
則直接在文章中對應編碼 :boom:
就能顯示。
首先嘗試在google搜索 site:你的域名
,來確認你的BLOG有沒有被收錄,能搜索到代表有被收錄,若無則沒有。
請參考:Hexo 搭建系列 - Hexo-Abbrlink插件 永久鏈接
這是反垃圾鏈接標籤,用於指示搜尋引擎不要抓取網頁上帶有nofollow標籤的任何出站鏈接,減少垃圾鏈接分散網站權重。
你可以使用 hexo-filter-nofollow 插件。
在./source新建robots.txt 填寫以下內容:
1 | User-agent: * |
User-agent: *
表示運行所有的搜尋引擎,你也可以設定只允許特定的搜尋引擎爬取,例如User-agent: Googlebot
Allow
表示允許被訪問的,Disallow
是不允許的意思。Disallow
不添加任何路徑就表示運行爬取任何內容。
(若要Disallow多個資料夾或檔案,需要分成多行來寫,一行只能寫一個)
在\scaffolds\post.md
中添加如下代碼,用於生成的文章中添加關鍵字和描述。
1 | keywords: |
您可以透過下列幾種方式讓 Google 存取您的 Sitemap:
Search Console Sitemap
工具向 Google 提交 Sitemaprobots.txt
檔案中任一處插入以下這一行字元,指定 Sitemap 的路徑。1 | Sitemap: http://example.com/sitemap.xml |
1 | http://www.google.com/ping?sitemap=<complete_url_of_sitemap> |
例如:
1 | http://www.google.com/ping?sitemap=https://example.com/sitemap.xml |
STEP 1
安裝hexo-sitemap-generator外掛可以自動幫你的BLOG產生Sitemap.xml,你只需要打開BLOG根目錄Git Bash輸入以下指令:
1 | npm install hexo-generator-sitemap --save |
安裝完後瀏覽你的 網址/sitemap.xml,就會發現已經生成了。可以把sitemap提交到GSC來增加收錄。
STEP 2
設定config.yml。
1 | sitemap: |
STEP 3
註冊Google Search Console https://search.google.com/search-console/about?hl=zh-tw
使用google帳號登陸即可。
貼上BLOG網址點擊「繼續」,因為我已經加入Google Analytics到我的BLOG,所以我可以通過Google Analytics帳號來驗證。
你也可以在 [設定 - 擁有權驗證 - 其他驗證方法] 使用其他方法驗證。
STEP 4
到 [Google Search Console後台 - Sitemap - 新增Sitemap] 填寫sitemap.xml
。
等待幾天就能夠在google上搜尋到自己的網站了。
我剛開始提交sitemap的時候試了無數次發現總是出現
無法讀取 Sitemap ,一般的 HTTP 錯誤
這個錯誤,為此我在google上查找了許久都沒有找到解決方式,於是我開始閱讀 google的sitemap說明,在Sitemap 格式處發現了問題所在。
若你跟我有一樣的問題,你可以打開 你的網址/sitemap.xml
查看你的時間格式是否為 <lastmod>2019-09-29T09:52:32Z</lastmod>
你能發現跟官方的<lastmod>2018-06-04</lastmod>
差在多了後面多了T時分秒Z…等一些沒必要的格式,我猜這就是問題所在,
於是google搜尋了解決辦法,參考Convert an ISO date to the date format yyyy-mm-dd in JavaScript
找到了解決辦法。
以下是解決方式:
打開 .\node_modules\hexo-generator-sitemap\sitemap.xml 在
1 | post.updated.toISOString() |
後方加上
1 | .substring(0, 10) |
substring(Start,End) 意思是擷取從0開始到9位數(End位數不會擷取),本來是2019-09-29T09:52:32Z,就只會擷取到2019-09-29,這樣就是官方所要求的格式。
重新提交sitemap之後等待一會就會顯示成功了。
現在已經能在google搜尋到我的網站了。
hexo-generator-sitemap
Hexo 优化:提交 sitemap 及解决百度爬虫无法抓取 GitHub Pages 链接问题
Hexo做SEO优化遇到的坑
Hexo Seo优化让你的博客在google搜索排名第一
管理您的 Sitemap,建立並提交 Sitemap
Convert an ISO date to the date format yyyy-mm-dd in JavaScript
STEP 1
到Disqus官網選擇GET STARTED 然後註冊一個帳號(在此省略註冊過程)。
STEP 2
登入Diqcus之後選擇[I want to install Disqus on my site]。
STEP 3
填入網站資料(沒重複的話,Website name就是你的shortname)。
STEP 4
到Admin - Settings - General - shortname,確認一下你的shortname。
注意:若你的Websit Name重複,shortname則將與Websit Name不同,請務必注意。
STEP 5
打開config.yml加入以下內容:
大於5.1.1版本:
1 | #Disqus |
小於5.1.1版本 則設定shortname值即可:
1 | #Disqus |
大部分HEXO主題都可以設定是否開啟disqus功能(如NexT,Butterfly…等),打開主題的配置文件搜索disqus試試吧。
效果演示:
Admin - Settings - Reactions - Enable Reactions on your site.
若想要關閉Reactions功能則點擊下方[Turn reactions off]即可。
Reactions功能效果:
]]>EZGIF
網址:https://ezgif.com/video-to-gif
格式:MP4, WebM, AVI, MPEG, FLV, MOV, 3GP and other video files | 大小限制:100MB
STEP 1
在Twitter上找到想轉換成GIF的影片,在影片上點擊右鍵-複製影片地址
STEP 2
貼到Video to GIF converter 點擊upload video即可。
EZGIF提供了簡單的功能,例如畫面裁剪、影片裁剪、旋轉、縮放、修改速度、加字、自行選擇FPS和大小…等。
轉換後直接在GIF上點擊右鍵儲存圖片。
此方法適用於 開發者已下架或是遭官方下架無法從擴充商店安裝的擴充功能,但你能在其他地方找到.CRX檔或資料夾。 教程以 Listen 1作為範例。
STEP 1
打開Chrome瀏覽器的擴充功能頁面 ( 或者在網址輸入 chrome://extensions/
)。
STEP 2
在右上角打開[開發人員模式] 左邊選擇[載入未封裝項目]。
STEP 3
選擇擴充功能資料夾。
STEP 4
開啟擴充功能即可在瀏覽器右上方看見,並且使用。
若擴充功能非資料夾而是.CRX檔,請使用7-ZIP解壓縮放進資料夾後按以上步驟載入。
在BLOG根目錄使用GIT BASH 輸入下方指令安裝HEXO-ADMIN,並開啟本地測試。
1 | npm install --save hexo-admin |
但這樣還不算完成,我們還需要在BLOG根目錄新建檔案hexo-generate.bat
,寫入hexo g -d
。
然後打開config.yml,新增:
1 | admin: |
若不添加則會出現Error: Config value "admin.deployCommand" not found
或者Error: spawn hexo ENOENT
之類的報錯。
你還可以在設定後台帳號和密碼。
Settings - Setup authentification here.
輸入帳號密碼,下方Admin Config Section會自動產生相對應的code,你只需要複製貼上到剛剛config.yml的admin處即可。
後台 - Deploy - 直接點擊Deploy鍵,若無出現錯誤就是部署成功了。
在blog根目錄右鍵->Git Bash 輸入指令:
1 | npm i hexo-tag-color-block |
直接在文章中加入語法:
1 | {% colorblock [color hex code] [width] [height] %} |
DEMO:
#E6E6FA在config.yml中加入:
1 | code_block: |
Default:
1 | code_block: |
打開_config.yml 可以看到預設的永久鏈接是依照日期來產生的。
1 | permalink: :year/:month/:day/:title/ |
假設hello world.md
原路徑為/source/_posts/hello world.md
按照預設的鏈接來生成靜態文件後路徑會變成
/public/2019/09/23/hello world/index.html
但是這樣的缺點是 鏈接太長,所以在這邊推薦一個插件abbrlink來調整,abbrlink的概念是對標題+時間進行md5然後再轉base64,保存在front-matter中。
在blog根目錄下git bash 輸入指令 npm install hexo-abbrlink --save
安裝abbrlink
接著在_config.yml 的permalink後面改成如下格式:
1 | permalink: posts/:abbrlink/ |
接著在下方隨機處加上:
1 | abbrlink: |
有兩種設置:
alg(算法):crc16(默認)或crc32
rep(表示):dec(默認,十進制)或hex(十六進制)
crc16 & hex
https://post.zz173.com/posts/66c8.html
crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html
crc32 & dec
https://post.zz173.com/posts/1690090958.html
只要打開文章.md就能在配置區看到自動產生的 abbrlink: 編號 啦!