hexo NeXt的設置(持續更新)

發表於 | 分類於

hexo 網誌框架 + github Page

install hexo

1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server # 啟動

Choose theme

  • 很多人使用NeXt
1
git clone https://github.com/iissnan/hexo-theme-next themes/next

也可以下載穩定版本zip，解壓縮後重新命名成next，放到blog/themes 底下，自己新增themes資料夾。
我自己也使用NeXt

參考配置
參考配置2
參考配置3

我的配置

  • 去_config.yml(./_config.yml)
    1
    2
    3
    4
    5
    theme: next # landscape
    language: zh-tw
    url: https://a920604a.github.io
    root: /blog/

    1
    hexo server # 啟動

我的 themes下的配置文件(.theme/next/_config.yml)

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

menu:
  home: /home/|| home
  目錄: /archives/|| archive
  分類: /categories/|| th
  標籤: /tags/|| tags
  關於我: /about/|| user
# /|| 中間不能有空格

scheme: Mist


canvas_nest: true # 文章摘要

social:
  GitHub: https://github.com/a920604a || github
  E-Mail: mailto:a920604a@gmail.com || envelope
  FB Page: https://www.facebook.com/yu.an.1800 || facebook
  Instagram: https://instagram.com/yuan3509 || instagram
  
avatar: /images/animal3.jpg


auto_excerpt:
  enable: true
  
highlight_theme: night eighties 

# 拜訪流量計算
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>訪問人數
  site_uv_footer: 次
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>總訪問量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>瀏覽
  page_pv_footer: 次



# 搜尋功能 必須安裝 npm install hexo-generator-searchdb --save
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false


# npm install --save hexo-symbols-count-time 
字數統計以及閱讀時間

新增 pags, categories, about資料夾

hexo g會編譯並產生public目錄，底下為之後要部署的網誌

  • 新增 pags, categories, about資料夾
    用命令方式新增，會自動在source 目錄底下新增該目錄並在目錄底下新增index.md，如下。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    hexo new page "home"
    hexo new page "archives"
    hexo new page "categories"
    hexo new page "tags"
    hexo new page "about"
    # INFO  Validating config
    # INFO  Created: ~/Desktop/project/blog/source/categories/index.md

    # hexo new [layout] <title>
    # 佈局	路徑
    # post	source/_posts
    # page	source
    # draft	source/_drafts
    在手動至
    1
    2
    3
    4
    /source/categories/index.md
    + type: "categories"
    /source/tags/index.md
    + type: "tags"

做了哪些事

  • 搜尋功能 npm install hexo-generator-searchdb --save
  • 上傳github npm install hexo-deployer-git --save
  • 加載進度條
    $ git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace
    修改 next/_config.yml
    pace = true
  • 網站運行時間
    修改 next/_config.yml
    1
    2
    3
    4
    footer:
      # Specify the date when the site was setup.
      # If not defined, current year will be used.
      since: 2022
  • sidebar 近期文章
  • 顯示當前瀏覽進度
    修改 next/_config.yml
1
2
3
4
back2top:
  enable: true
  sidebar: false
  scrollpercent: true  #  瀏覽頁面時，顯示當前瀏覽紀錄
  • 側邊欄移至左邊
    Muse 和 Mist 則需要深度修改source code才能實現改變側邊欄位置
    修改themes/next/source/css/_custom/custom.styl
    1
    2
    3
    4
    5
    6
    7
    8
    .sidebar-toggle {
      left: 30px;
    }

    .sidebar {
      left: 0px;
    }

    修改themes/next/source/js/src/motion.js
    1
    2
    3
    4
    5
    -     {paddingRight: SIDEBAR_WIDTH},
    +     {paddingLeft: SIDEBAR_WIDTH},

    -   NexT.utils.isDesktop() && $('body').velocity('stop').velocity({paddingRight: 0});
    +   NexT.utils.isDesktop() && $('body').velocity('stop').velocity({paddingLeft: 0});
  • 添加文章字數與所需閱讀時間

TODO

  • 更改背景顏色

  • 更改blog背景

  • 人數統計

  • 評論系統npm install --save gitment

  • 網站地圖 npm install hexo-generator-sitemap --save

  • 點擊愛心功能

  • 鑲嵌音樂

  • 請我喝一杯咖啡XD

  • 下拉式選單

  • 整理layout

佈署至GitHub Pages

安裝git套件
npm install hexo-deployer-git --save
至github新增repo

至_config.yaml

1
2
3
4
5
deploy:
  type: "git"
  repo:
    github: https://github.com/a920604a/a920604a.github.io.git
  branch: main

hexo g生成網誌至public目錄
上傳至github hexo d
public in
https://a920604a.github.io/a920604a.github.io