iT邦幫忙

2021 iThome 鐵人賽

3
Modern Web

MacOS新手操作指令學習紀錄,成為裝B前端工程師之路系列 第 32

[Day32] Hexo - 修改主題樣式及一些問題排除

雖然 Hexo 要完成架設 Blog 僅僅是幾秒鐘的時間就完成,但是在細部調整時還是會遇到不少困難,以下記錄了一些問題排除,也簡介該如何運用 Hexo 的主題做出個人化的配置修改。


1. 啟動本地伺服器(hexo server)時出現告警

  • 使用版本:
    Hexo: 5.4.0

  • 錯誤訊息:

    $ hexo -s                              
    (node:87224) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
    (Use `node --trace-warnings ...` to show where the warning was created)
    (node:87224) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
    (node:87224) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
    (node:87224) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
    (node:87224) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
    (node:87224) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
    
  • 參考資料:爬了一些文章,大概從 2020 年起就有相關的資訊,後續改版會不會修正不得而知,最後參考好一則博部落格的文章解決。

  • 發生原因:Hexo 依賴的 nib@1.1.2 套件指定使用較舊版本的 stylus,這個套件已經停止維護,所以需要自己修改解決。

  • 解決方式:

    1. 編輯 package.json 專案設定檔,加入以下設定指定最新的 stylus 版本:
    "resolutions": {
      "stylus": "^0.54.8"
    }
    
    1. 執行指令 yarn install 安裝完就完成了。(** npm install 無效 **)
  • 注意事項:如果透過指令安裝了其他的主題,該設定可能會被覆蓋,再次出現告警,只要再次執行 yarn install 應該就能修復。


2. 讓 Hexo 在 Github Page 專案中與其他檔案共存

  • 問題說明:在 Hexo 發佈到 Github 時會覆蓋掉整個專案目錄,如果想要在裡面放自己寫好的其他靜態頁面,或是專案根目錄存放 README.md 來打造華麗的頁面(可以參考Will 保哥 的 Github)都會因為 deploy 這個動作被蓋掉。

  • 解決方式:

    1. 先將要跟著一起部署到 Github 的檔案放到 source 資料夾裡面。
    2. 修改 _config.yml 設定檔,找到 skip_render 這個字眼,並加入檔名或是資料夾名稱
    skip_render: 
      # 單檔案
      - README.md
      # 整個資料夾(包含底下所有檔案)
      - mypage/*
    

3. Hexo 套用主題

  1. Hexo Themes 尋找喜歡的版型。
    (如果點進去發現連結已經失效,就換一個吧!)

  2. 範例頁面通常有這個主題的 Github 連結,本次以 Hueman 這個主題為例,找到小貓的圖示就可以順利到達他的 Github 專案

  3. 接著就來找他的說明文件(Hueman 是放在 Github 首頁的最底下),每個主題因為撰寫人不同,擺放位置都不太一樣。

  4. 找到安裝方式(有些主題可能放在首頁,有些是寫在文件裡)。

  5. 開始安裝,有些主題是用 git clone 的方式讓你將專案複製下來,有些可以使用 npm install 的方式安裝,就看文件怎麼寫,還要注意以下幾點:

    • 使用 git clone 的方法可能會需要在終端機切換當前目錄位置,需看清楚文件說明。
    • 安裝步驟可能還有其他的額外設定,請將文件看完確保沒有遺漏。
  6. 修改 Hexo 裡面的 _config.yml 設定檔,把 theme 的內容改成主題的名稱。

    thene: hueman
    
  7. 完成修改後可以先執行一次 hexo cl && hexo g && hexo s 來重建頁面並啟動本地伺服器檢查是否成功。


4. Hexo 個人化樣式設定

  1. 佈景主題的設定方式大致有兩種:

    • 編輯在 themes/主題名稱 的 _config.yml 檔案(通常是使用 git clone 下載的主題)。
    • 在網站根目錄建置 _config.主題名稱.yml 來編輯(部分使用 npm 安裝的主題),這種類型的主題在安裝完後網站資料夾不會新增任何檔案,而是整個套件都被放在 node_modules 裡面,可以到裡面找到主題的_config.yml 檔案,複製到自己網站根目錄,並變更檔名為 _config.主題名稱.yml 來做修改。
  2. 本次介紹的 Hueman 主題屬於前者,所以可以開啟 themes/hueman/_config.yml 這個檔案來修改,至於修改方式當然就是參考專案文件啦!

  3. 如果有些顏色想改掉,但是配置裡面沒有,可以在主題的資料夾裡面搜尋關鍵字 variable,通常會用這個名稱來存放各種顏色、單位樣式,以 Hueman 為例,可以找到 _variables.styl 這個檔案,應該大部分的顏色都能在這邊更改了!

  4. 如果是版面配置想要做顏色以外的調整,可以搜尋關鍵字 style,以 Hueman 為例,可以找到 style.styl 這個檔案,來加入自己想設定的樣式了(需要具備自行撰寫 css 的能力)。


上一篇
[Day31] Hexo x GitHub Pages 打造個人部落格
下一篇
[Day33] Hexo x NexT - 顯示最新文章、導入Google Analytics 的坑
系列文
MacOS新手操作指令學習紀錄,成為裝B前端工程師之路33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言