技 - 技術工具 / blog發表更新14 分鐘讀完 (大約2064個字)0次訪問

[Blog] 使用 Hexo 撰寫部落格 02- 更換主題編寫與個人化設定

上一篇已經建立好基本網站架構了，這篇收集本站所有更改主題為 NextT 及更換的個人化設定．

主題呈現效果

更換主網站設定檔

主網站設定檔位置：/your folder/_config.yml，可以在此編輯基本網站說明．

1
2
3
4
5
6
7
8
title: '程式筆記
subtitle: ' Ｍemo '
description: ''
keywords:
author: xxx
language: zh-TW
語言可以改為繁體中文，但對應顯示語言可以在以下位置修改：
/your folder/themes/next-reloaded/languages/zh-TW.yml

更換主題

  • Hexo 預設主題是 landscape

  • 想要更換主題依下列步驟即可：

  1. 在 hexo 網站上挑選主題：https://hexo.io/themes/
  2. 然後依照教學 clone 對方的主題到自己的 theme 資料夾(通常都有 git 指令，在自己資料夾照下即可)
  • 20220405 更新 使用 fork 對方的主題庫到自己的庫，然後用 submodule 進 theme 資料夾
  1. 修改主網站設定_config.yml 來更換
部署修改紀錄 （可跳至最後一步）

  • 本部落格採用 Next，它是一個相當熱門的主題,且有很多中文文檔說明，我也是看了範例網站，真的太喜歡才決定架 hexo 的，紀錄操作步驟如下．

  • (嘗試1:啟動失敗)失敗 更換主題

    1. git clone https://github.com/iissnan/hexo-theme-next themes/next:

    2. config.yml 換成 theme：next，但是啟動 hexo s 後，開啟的網站卻是亂碼參數頁面＠＠
      啟動畫面也出現以下訊息：

1
2
3
4
5
6
WARN  ========================= ATTENTION! ==========================
  ===============================================================
WARN   NexT repository is moving here: https://github.com/theme-next
  ===============================================================
WARN   It's rebase to v6.0.0 and future maintenance will resume there
 ===============================================================

原因應該是找到的文章教學，clone 來源太舊了？改參考官方更新步驟从 NexT v5.1.x 更新

  • （嘗試2:啟動成功 但曾經部署網站成功後來失敗)>label danger@失敗 %} 試著更換主題
  1. Clone v7.8.0 最新的倉庫（如放在 next-reloaded）：
    $ git clone https://github.com/theme-next/hexo-theme-next themes/next-reloaded
    （v.5.1.4）
  2. 在 Hexo 的主配置文件中设置主题：
    theme: next-reloaded
  3. 重新開啟就正常了
  • 嘗試3:成功 2022 04 發現部署後 網站一直沒有更新，部署上傳後會跑部署流程，正常會有綠色勾勾，但某次之後都是紅色勾勾，點擊發現一直沒有辦法找到 submoudule themes/next-reloaded
  • 排查過程：蠻奇怪的，不太懂沒有用到 submoudule，不知道是不是殘留，部署的源碼也有看到 theme/next-reloaded 的連接．
  1. 決定用 fork 方式一份自己的主題my-hexo-theme-next)，並用 submoudule 加入
1
git submodule add https://github.com/xxx/my-hexo-theme-next.git themes/my-hexo-theme-next
  1. 然後砍掉其他不要的主題，另外發現.deploy_git 裡面有殘留 theme/next-reloaded…等東西，就直接把.deploy_git 資料夾整個砍掉，重新跑就部署成功了． （這時會發現.deploy_git 跟上傳的檔案裡面都沒有 theme 中奇怪的 next-reloaded 的連接）

之後想更換別的主題也是這樣喔

主題設定

主題設定位置：/hexo-web/themes/next-reloaded/_config.yml

更換 NexT 版面風格

1
2
3
4
NextT 提供不同風格可以更換
#scheme: Muse 選單在上方
#scheme: Mist 選單在上方
scheme: Pisces 選單在側邊

新增文章標籤與分類

  1. 新增標籤與分類頁面
1
2
3
4
5
6
7
8
9
hexo new page tags
hexo new page categories
=====
index.md
---
title: categories
date: 2021-01-11 17:25:08
type: "categories"

  1. 為文章加上 Tag 與 categories
    在_posts/xxx.md 文章上方新增，差別在於標籤是並行的標示，而分類會有階層式關係．
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: 使用Ｈexo 撰寫部落格
tags:
  - Testing
  - Another Tag

比較特別以下這種寫法代表階層關係Web->blog
categories:
  - Web
  - blog

或是多分類表示法：代表Diary->Food...
categories:
- [Diary, Food]
- [Diary, Games]
- [Life]
---
  1. 開啟 menu 頁面(側邊欄)
_config.yml
1
2
3
4
5
6
7
8
# Usage: `Key: /link/ || icon`
# icon 也可以自由置換 https://fontawesome.com/v4.7.0/icons/
menu:
  home: / || fa fa-home
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  tags: /tags/ || fa fa-tags
  about: /about/ || fa fa-user

新增個人頁面

  1. 新增關於我頁面
1
hexo new page about
  1. 編輯頁面內容
    [your folder]/source/about/index.md
1
2
3
4
5
---
title: About Me
date: 2020-09-06 13:53:06
---
bla bla bla bla...
  1. 開啟頁面
1
2
3
4
5
6
7
8
9
_config.yml
# Usage: `Key: /link/ || icon`
# icon 也可以自由置換 https://fontawesome.com/v4.7.0/icons/
menu:
  home: / || fa fa-home
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  tags: /tags/ || fa fa-tags
  about: /about/ || fa fa-user

文章中顯示引言 (標籤外掛（Tag Plugins）)

1
2
3
4
5
6
7
8
9
10
11
12
13
有分號的上下引言，兩種皆可
<!-- 标签 方式，要求版本在0.4.5或以上 -->
>centerquote %}blah blah blah>endcenterquote %}
<!-- 标签别名 -->
blah blah blah

單純的置中引言
<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
<blockquote class="blockquote-center">blah blah blah</blockquote>

顯示效果在本文開頭喔

文章中程式碼區塊

更改主題

/themes/next-reloaded/_config.yml

1
2
3
4
5
6
7
8
highlight_theme: night
# Add copy button on codeblock
copy_button:
  enable: true
  # Show text copy result.
  show_result: true
  # Available values: default | flat | mac
  style: default
標籤外掛（Tag Plugins）
1
2
3
4
5
6
7
8
9
10
依序為 語言 左上標題 右上網址 網址名稱
>(% codeblock lang:go terminal https://minilabmemo.github.io/ 完整程式碼 %}
go xxx
> {% endcodeblock %}

\\ Backtick Code Block
```go  terminal https://minilabmemo.github.io/ 完整程式碼
```diff
-
+

  • codeblock 效果

    terminal完整程式碼
    1
    2
    > go xxx
    >

  • Backtick Code Block 效果

terminal完整程式碼
1
go xxx
  • diff 效果
1
2
- go xxx
+ go xxx

文章開頭標記

1
2
>Content (md partial supported)
其中class_name可不設或是改成下方關鍵字

Content (不設定) 淡灰色

主題_config 文件配置关键字：note，可修改成想要的風格

1
2
3
4
5
6
7
8
9
10
11
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: flat
  icons: true
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

標籤標注

1
2
3
4
> {% label info@標示藍色底色 %} > {% label warning@標示黃色底色 %} > {% label danger@標示 danger 底色 %}
> {% label info@標示藍色底色 %}
> {% label warning@標示黃色底色 %}
> {% label danger@標示danger底色 %}

文章中貼上圖片

1
2
3
4
5
6
7

放置圖片在/your folder/themes/next-reloaded/source/images
貼上相對路徑
![my](/images/avatar_memo.png)
或是用html寫法，可以控制大小
<img src="/images/avatar_memo.png" width="150px" />

開啟文章與網站訪問數字

1
2
3
4
5
6
7
8
9
10
11
12
13
主題內建不蒜子計數器
_config.yml
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye

本地預覽時底部訪問人數與總訪問的數字會異常大，這是正常现象
只需要部署至雲端即可恢復正常

在標頭放上可愛的 git 連結

1
2
3
4
_config.yml
github_banner:
  enable: true
（本部落格右上角範例）

顯示部落格作者照片

1
2
_config.yml
avatar：圖片網址

放上個人社群連結

1
2
social
可自由新增

顯示閱讀進度百分比

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false 顯示在右下角 true代表顯示在側邊欄
  # Scroll percent label in b2t button.
  scrollpercent: true 顯示百分比

個人化設定

預設新增文章模板

修改 /scaffolds/post.md 新增自己預設內容

1
2
3
4
5
6
7
8
---
title: {{ title }}
date: {{ date }}
tags:
categories:
---
blabla..... 前言
<!--more-->

意外發現的方法，藉由這樣修改 hexo new post 時就可以把基本的設定加好了

參考文章

deploy

[Blog] 使用 Hexo 撰寫部落格 02- 更換主題編寫與個人化設定

https://minilabmemo.github.io/2022/05/01/blog-hexo-02-themes/

作者

Mini Lab Memo

發表於

2022-05-01

更新於

2023-07-09

許可協議

#

評論

最新文章

標籤

Babel1
CLI4
GUI1
GitHub1
Grafana1
IDE1
IDEA1
JSX1
Kubernetes1
Material-ui1
Memory1
MinIO1
Prometheus1
SQA1
aws-s31
blog9
chrome-extension1
cleanCode1
cloud1
command1
create-react-app1
css2
css-in-js1
deploy1
docker4
docusaurus1
elasticSearch1
file1
gitbook1
golang10
google_analytics1
heroku1
hexo6
html1
hugo1
ing3
java2
javascript1
jest1
jmeter1
kibana1
lint1
linux1
map1
modules1
mongo1
monitor1
note1
npm1
python1
ramda1
react9
recharts1
scss1
spring1
storage1
test4
tool2
typescript1
vscode5

分類

×