同為部落格,不同風格 ——Hexo另類搭建

哈哈哈hh發表於2022-04-28

一 、透過雲開發平臺快速建立初始化應用

1.建立相關應用模版請參考連結:

2.完成建立後就可以在github中檢視到新增的Hexo倉庫

file

二 、 本地編寫《賽博朋克風格》個人部落格

1.將應用模版克隆到本地

● 首先假定你已經安裝了Git、node,沒有安裝請移步node官網進行安裝。克隆專案:

git clone + 專案地址

● 進入專案檔案

cd hexo

● 切換到feature/1.0.0 分支上

git checkout feature/1.0.0

● 使用一下命令全域性安裝 Hexo CLI :

npm install -g hexo-cli

● 進階安裝和使用

對於熟悉 npm 的進階使用者,可以僅區域性安裝 hexo 包。

npm install hexo

● 安裝依賴包

npm install

● 啟動服務

npm run server

這裡開啟瀏覽器4000埠,並出現預設頁面。

2.案例效果預覽

file

3.更換為 lcarus 主題

更換主題也非常簡單,我們檢視 Icarus 文件。更換主題主要有兩種方式,一種是使用npm安裝主題的方式,另一種是下載原始碼放到 theme 資料夾的方式。簡單起見,我們先採用npm 的方式:

$ yarn add hexo-theme-icarus

使用 hexo 命令修改主題為 lcarus:

$ npx hexo config theme icarus

啟動伺服器,很不幸,報錯了:

file

提示很清楚,缺少依賴,我們新增依賴:

$ yarn add bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3

再次嘗試構建並啟動,成功出現 Icarus 主題了:

file

迫不及待嘗試賽博朋克風格主題了,非常簡單,在 _config.icarus.yml 檔案中修改:

# Icarus theme variant, can be "default" or "cyberpunk"
variant: cyberpunk

再次嘗試構建並啟動,賽博朋克風格主題出現:

file

具體程式碼詳見這個 Commit。

4.自定義配置

下面我們修改配置檔案 _config.yml 和 _config.icarus.yml ,配置網站相關資訊。

主要包括 logo、favicon、navbar 的 menu 和 links、footer、donates(贊助資訊,註釋掉沒用的支付渠道)、widgets。

這裡詳細說一下 widgets,widgets 就是頁面上的各個區域的掛件,可以透過配置靈活改變其位置和具體資訊,根據喜好決定佈局採用 3 欄還是 2 欄佈局。

● profile widgets: 這塊是使用者資訊模組,把相關資訊改成你自己的就好啦,下面有一個 social_links,也可以自定義配置,如果沒有 Twitter 和 FaceBook,可以把相關資訊註釋掉,也可以新增其他連結,注意圖示是基於 fontawesome 的。

● subscribe_email、adsense 都用不上,可以刪掉

具體修改細節可以參考這個 Commit。

修改完的效果如下:

file

5.原始碼方式使用 lcarus 主題

剛才說到使用 Icarus 主題有兩種方式, npm 包的方式雖然簡便,但是如果想對 Icarus 主題有更深的配置就不太好弄了,尤其是過去 Icarus 一直都採用的是原始碼模式,很多 Issue 的解決方案都是修改原始碼的,而對應的 npm 包的方式則很少提及,所以我們也改為使用原始碼方式,方便後續配置。

首先刪掉 hexo-theme-icarus 依賴,在 Icarus 倉庫下載程式碼,解壓後複製到 theme 資料夾中。

詳見這個 Commit。

6.配置樣例文章

下面我們刪掉預設的 Hello World 文章,建立一個自己的文章。

注意頭部配置檔案相關資訊,在新版 Icarus 中頭圖需要額外配置 cover 選項,如下:

title: "【譯】下一代前端構建工具 ViteJS 中英雙語字幕"
date: 2021/03/08 11:12:25
categories:
- Front-End
- Tools
tags:
- Vite
- GitHub
- Translation
toc: true # 是否顯示目錄
thumbnail: '/images/vitet.png'  # 縮圖
cover: '/images/vitet.png' # 頭圖

詳見這個 Commit。

7.文章內容過長怎麼辦

首頁應該展示更多的文章,如果文章過長,使用者下滑就只會看到同一篇文章,我們如果只想讓使用者看一部分內容怎麼辦呢?非常簡單,在 md 檔案中新增 即可,新增完之後,就會出現“閱讀更多”的按鈕,首頁就能看到多篇文章了。

程式碼詳見這個 Commit。

8.怎麼樣讓文章兩欄展示

目前文章頁仍然和首頁一樣,是三欄佈局,為了有效利用空間,希望文章頁能夠兩欄佈局。此時我們需要在 Icarus 原始碼資料夾新增 _config.post.yml 檔案,並配置成兩欄佈局:

widgets:
    # Profile widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: right
        type: toc
        # Whether to show the index of each heading
        index: true
        # Whether to collapse sub-headings when they are out-of-view
        collapsed: false
        # Maximum level of headings to show (1-6)
        depth: 3

來看看效果:

file

三 、 雲端一鍵部署上線應用

1.上傳程式碼

git add . 
git commit -m '新增你的註釋'
git push

2.在日常環境部署

一鍵進行應用部署。在應用詳情頁面點選日常環境的「部署」按鈕進行一鍵部署,部署狀態變成綠色已部署以後可以點選訪問部署網站檢視效果。

file

3.配置自定義域名線上上環境上線

● 配置線上環境自定義域名。在功能開發驗證完成後要線上上環境進行部署,線上上環境的「部署配置」-「自定義域名」中填寫自己的域名。例如我們新增一個二級域名 company.workbench.fun 來繫結我們部署的前端應用。然後複製自定義域名下方的API閘道器地址對新增的二級域名進行CNAME配置。

file

● 配置CNAME地址。複製好 API閘道器域名地址後,來到你自己的域名管理平臺(此示例中的域名管理是阿里雲的域名管理控制檯,請去自己的域名控制檯操作)。新增記錄的「記錄型別」選擇「CNAME」,在「主機記錄」中輸入你要建立的二級域名,這裡我們輸入「company」,在「記錄值」中貼上我們之前複製的 API閘道器域名地址,「TTL」保留預設值或者設定一個你認為合適的值即可。

file

● 線上上環境部署上線。回到雲開發平臺的應用詳情頁面,按照部署的操作,點選線上環境的「部署按鈕」,部署完成以後就在你自定義的域名進行了上線。CNAME 生效之後,我們輸入 company.workbench.fun(示例網址) 可以開啟部署的頁面。至此,如何部署一個應用到線上環境,如何繫結自己的域名來訪問一個線上的應用就完成了,趕緊部署自己的應用到線上環境,用自己的域名玩起來吧 ;)

file

一鍵建立Hexo應用模版連結 :

參考文獻:


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70003733/viewspace-2889192/,如需轉載,請註明出處,否則將追究法律責任。

相關文章