使用 Statiq 在Github Page 部屬靜態部落格網站 2 添加Blog樣式 使用 Statiq 在Github Page 部屬靜態部落格網站、根據Clean Bolg主題調整基礎設定

Published on Wednesday, February 8, 2023

Clean Bolg

承接上一篇: 使用 Statiq 在Github Page 部屬靜態部落格網站 1

在我們添加完Theme資料夾後發現雖然樣式有改變,但是部落格相關的功能卻沒有出現
這邊翻了一下好像沒有找到比較詳細的說明文件,看來只能先參考官方Repo裡的README.md了,我列出幾項比較基礎的重點

  • Blog 首頁預設會顯示最新發布的三篇post
  • 如果專案沒有任何post則不會自動生成index.html(!)
  • 如果要自訂首頁可以自行在input資料夾新增index.cshtml或在theme資料夾修改index.cshtml
  • 首頁右側會列出10個最常用的tags
  • tags以下的空間留給使用者自行運用,可以在input資料夾新增_sidebar.cshtml或在theme資料夾修改_sidebar.cshtml來使用此空間
  • 要新增post需要先在input資料夾裡新增一個posts資料夾,例如:input/posts/example.md
  • 與Markdown的Front Matter用法相同 --- 以上的內容為yaml設定檔,用來設定標題等內容
  • 最好幫每一篇文章都設定Published,設定發布日期
  • 類似about me等不屬於post的靜態頁面需要先在input資料夾裡新增一個pages資料夾,例如:input/pages/about.md

那麼根據文檔的說明需要讓Blog能正常使用,我們最好先在input裡新增posts與pages資料夾,並且新增我們的第一篇post與about頁面

cd input
mkdir posts
mkdir pages
touch posts/example.md
touch pages/about.md

在example.md新增以下內容

Title: This Is An Example Post
Lead: Yay for examples!
Published: 2023/02/08
Tags:
  - Examples
  - Tag with spaces
---
This is my example blog post content.

在about.md新增以下內容

NavbarTitle: About
Order: 1
Title: About me
Description: The life and times of James D. Author
---
Hi there, I'm James and this is my blog.

Short bio; why I opened a blog; miscellaneous yada yada.

這邊因為已經新增一篇post那麼根據說明,框架此時會自動幫我們生成預設的首頁,但是先前的範例我們有自己建立了index.md這個動作會產生自定義的首頁, 我們這邊使用官方自動生成的首頁就好所以先刪除index.md

rm index.md

到此為止我們已經依照說明建立了基礎的文件
那麼直接將專案運行起來看看成果

dotnet run preview
http://localhost:5080

首頁使用自動產生,左側為最新post區,右側為tag區,右上有框架幫我們產生的頁面可以進行轉跳
StatiqCleanBolg-FrontPage

此頁面是根據about.md裡的內容產生的,如果不想要叫做About可以在NavbarTitle進行修改
StatiqCleanBolg-About

此頁面是根據posts裡的內容產生的,會根據Published的日期自動分類
StatiqCleanBolg-Posts

此頁面是根據posts裡Tags的Front Matter產生的,框架會自動幫忙統計有多首頁面在使用此Tag,點擊也會自動關連到對應的文章
StatiqCleanBolg-Tags


Summary

我們根據官方的說明建立了我們第一個Blog,此Blog已經具備了基礎功能已經可以用來發布文章了
下一篇會嘗試看看如何發布到github page上讓大家能看到你所寫的文章。

可以在Github Repo查看今天的進度