Antonio's blog

前端小蝦米

建立自己的部落格(3)：修改Hexo設定檔中Site，查看其變化

發表於 更新於 分類於 Disqus：
1.9k 2 分鐘
今天的你跟我都是部落格工程師，我們一起來將網頁做一些小小的改變，有一天匯集在一起就會讓你的部落格變的與眾不同。

Blog背景圖

查看Hexo設定檔

Hexo資料夾

  • 使用記事本打開的情況(看起來就很不容易修改吧…..)

記事本打開

  • 這時候需要搬出編輯器工具美化它

編譯器工具推薦

推薦工具1-Vscode

Vscode官方下載圖片

  • 安裝上都按照預設點選下一步直至完成即可

Vscode打開資料夾

  • 使用Vscode編譯器將資料夾打開吧(File -> Open Folder)

Vscode資料夾檢視畫面

  • 左邊是資料夾的結構樹狀圖(點擊即可查看該檔案)
  • 登登登登~看起來五顏六色的漂亮多了吧，這樣好編譯多了(加上#就變成綠色的註解寫法)

推薦工具2-Sublime Text

Subline官方下載圖片

  • 安裝上都按照預設點選下一步直至完成即可

Subline打開資料夾

  • 使用Subline編譯器將資料夾打開吧(File -> Open Folder)

Subline資料夾畫面

  • 左邊是資料夾的結構樹狀圖(點擊即可查看該檔案)
  • 質感不太一樣，有些人更喜歡這種感覺(加上#就變成灰色的註解寫法)

兩者當然有各自優缺點，且均有免費的版本可以使用，只是Subline免費版本會很偶爾的跳出來問你要不要購買，就看大家的喜好挑選囉。

認識Hexo設定檔的第一步

  • 打開資料夾下的_config.yml檔案
  • 認識第一區塊的設計目的

Hexo Site設定

  • 先試著使用剛剛說的#註解說明文字幫助自己更加了解這些參數特性吧!

Hexo Site備註

  • title：網站標題
  • subtitle：網站副標題
  • description：網站描述(SEO優化相關)
  • keywords：網站的關鍵字(SEO優化相關)
  • author：網站作者的名字
  • language：網站使用的語系(會跟顯示內容相關)
  • timezone：網站使用的時區(預設電腦系統的時區)

調整根目錄下_config.yml的Site參數

  • 複製以下的內容更換原先的Site參數
1
2
3
4
5
6
7
title: Tech Explorer's Diary #網站標題
subtitle: 'Journey through the world of technology' #網站副標題
description: 'A blog dedicated to exploring the latest trends, discoveries, and innovations in the tech world.' #網站描述(SEO優化相關)
keywords: technology, innovation, programming, software, hardware, reviews #網站的關鍵字(SEO優化相關)
author: John Doe #網站作者的名字
language: en #網站使用的語系(會跟顯示內容相關)
timezone: '' #網站使用的時區(預設電腦系統的時區)
  • 打開cmd介面輸入以下指令編譯並生成對應靜態網站
    (如果不知道cmd介面如何開啟請看Day2的介紹)
1
hexo g
  • 打開cmd介面輸入以下指令啟動本地服務器預覽修改的畫面
    (如果不知道cmd介面如何開啟請看Day2的介紹)
1
hexo s

調整Site參數-title、subtitle成果展示

  • 根據模板(Theme)的不同，顯示的位置會有些此不同。

  • title、subtitle
    Hexo title&subtitle修改成果

  • author
    Hexo author修改成果

  • description(因為預設版面沒有顯示這部分改以我的版面進行說明)
    Antonio Hexo版面

  • 這部分關於網站的敘述也會在搜尋時被大家看到喔!!!
    網站Google搜尋結果

調整Site參數-language成果展示

  • 試著將language的參數從en(英文)修改成zh-TW(中文)
1
2
3
4
5
6
7
title: Tech Explorer's Diary #網站標題
subtitle: 'Journey through the world of technology' #網站副標題
description: 'A blog dedicated to exploring the latest trends, discoveries, and innovations in the tech world.' #網站描述(SEO優化相關)
keywords: technology, innovation, programming, software, hardware, reviews #網站的關鍵字(SEO優化相關)
author: John Doe #網站作者的名字
language: zh-TW #網站使用的語系(會跟顯示內容相關)
timezone: '' #網站使用的時區(預設電腦系統的時區)
  • 別忘了編譯網站指令跟啟動本地服務器預覽指令
    (只要有調整設定檔案建議都要重新編譯過比較保險)
1
hexo g
1
hexo s

Hexo 語系變更中文

  • 剛剛右邊區塊的英文都變成中文

結尾

雖然今天只有做出小小的改變，但每個部落格都是從小地方開始慢慢修改成自己喜歡的模樣。

參考資料

[1] Hexo官方文件-配置