該主題是Yue Yang的Dream主題的升級版本,並包含許多新功能,例如:
該主題可用於兩個目的:
該項目遵守貢獻者盟約行為準則。通過參加,您應該維護此代碼。請向[email protected]報告不可接受的行為。
安裝
入門
文件
快要完成了
貢獻
執照
可以通過在Hugo網站文件夾中運行以下命令來安裝該主題。
cd themes
git submodule add https://github.com/UtkarshVerma/hugo-dream-plus dream-plus
git submodule update --init --recursive一旦成功安裝了主題,您就必須對主題進行一些調整才能滿足您的口味。
在exampleSite文件夾中,您會發現配置文件, cards.toml和posts.toml ,可用於調整主題。
您必須將這些配置文件用作您的網站的基礎,因為它們要照顧必要的變量聲明,您可以根據需要進行編輯。
通過author表下方的params中的以下config變量來定義自己,如下所示:
[ params . author ]
author = " <name of the author> "
description = " Short description of the site "
motto = " author's motto or short description "
# Leaving the avatar variable unset displays svg avatars
avatar = " <absolute path to avatar> "之後,在配置文件末尾填寫社交變量。此主題支持以下社交網站:(給出了示例)
| 社會聯繫 | 多變的 | 示例初始化 |
|---|---|---|
| github | github | github = "username" |
| 電子郵件 | 電子郵件 | email = "[email protected]" |
| 嘰嘰喳喳 | 嘰嘰喳喳 | twitter = "username" |
facebook = "username" | ||
| Youtube | youtube | youtube = "username" |
| 中等的 | 中等的 | medium = "username" |
linkedin = "username" | ||
| stackoverflow | stackoverflow | stackoverflow = "number/username" |
| codepen | codepen | codepen = "username" |
reddit = "username" |
這些變量必須在[ config.toml的[social]表中,或與YAML或JSON等效物。
[ social ]
github = " UtkarshVerma "完成此操作後,按照此處的指示,在Markdown中寫下您網站的“關於我”部分:錯誤和頁面。
如前所述,此主題具有兩個視圖,卡視圖和帖子視圖。視圖渲染的類型取決於您將內容的內容類型歸為Dream Plus 。所以:
/content文件夾中具有cards文件夾會激活卡視圖。/content夾中有posts文件夾會激活Post View 。
contentType變量現在已棄用。
兩種視圖之間的一個明確的區別是,卡視圖不支持帖子,而是將其重定向到指定的鏈接,而後視圖確實。您可以通過訪問我的網站(上面說)來對其進行測試。同樣,對於兩種視圖,郵政/卡創建都有不同的作用。如下:
hugo new cards/example.md # Card creation
hugo new posts/example.md # Post creation之後,只需打開您的降價卡/帖子,並提供卡/帖子的參數即可。
有兩種不同的方法來配置此主題的背景。這些設置彼此相互排斥。
要設置特定的背景顏色,請通過color變量進行操作。如果要將顏色的隨機組合設置為背景,只需將顏色變量放置不設置即可。
[ params . background ]
color = " #13547A " # Provide a color as hex or rgb equivalent 通過images數組指定要設置為背景的圖像。如果您喜歡單個圖像背景,則只需為數組提供一個值。例如:
[ params . background ]
images = [ " /images/bg1.jpeg " ] # Single image as background
images = [ " /images/bg1.jpeg " , " <some other image> " ] # Multiple images as background為images陣列提供多個圖像啟用Dream Plus的隨機圖像背景功能,該功能每次重新加載站點時都會在給定數組中循環背景。您也可以通過blur變量在一定程度上模糊背景。
所有背景配置變量都應放置在
params下的backround表中
[ params . background ]
# Random backgrounds
images = [ " /images/bg1.jpeg " , " /images/bg2.jpeg " , " /images/bg3.jpeg " ]
# Blur the background
blur = " 0.2 "每張明信片或卡的封面都是通過Dream Plus使用Hugo Image處理來處理更快的網站加載時間的。封面文件的查找路徑如下所述:
/content/cards/<card>/cover.<any-extension>/content/posts/<post>/images/cover.<any-extension>
通過前磨牙指定封面圖像現已棄用。現在,可以通過cover鍵通過前肌來定義卡蓋。但是,圖像處理不適用於此類封面。同樣,前材料封面優先於圖像資源,因此,為了使圖像資源覆蓋渲染,您必須首先從前材中刪除封面鍵。
您也可以通過[params.features]中的coverArgs變量修改圖像處理過程。通過的參數必須用於.Resize功能,因為那是夢想加上的用途。例如,
[ params . features ]
coverArgs = " 400x300 q50 " # Specify resolution and quality of output image您可以使用isMobile JS變量根據客戶端設備配置網站。當客戶端設備是移動設備時, true ,反之亦然。
此主題支持關於和錯誤頁面的總自定義。這些頁面可以通過about.md和404.md文件進行自定義。 Dream Plus將上述文件讀取為普通的Markdown文本,然後將其呈現。完成文件並根據您的需求進行修改後,將它們粘貼到Hugo網站的content文件夾中。如果您不希望這些頁面由Hugo構建,並提供了自己的鏈接,例如<website>.<domain>/about Or <website>.<domain>/404 。然後,您可以告訴Hugo通過config.toml文件中的ignoreFiles變量忽略它們,如下所示:
ignoreFiles = [ " content/404.md " , " content/about.md " ]您也可以通過params下的favicon Config變量為您的網站設置自定義Favicon。例如,
[params]
favicon = "/images/defaultFav.ico"
Short.st網站腳本已在此主題中實現。要使用它,您必須通過params下的shortest表進行配置。
[ params . shortest ]
enabled = true # Enable shorte.st
apiToken = " " # The API Token you received from shorte.st
domains = [ " " ] # The domains you want to define如果您想控制頁面具有的帖子/卡的數量,則可以使用paginate Config變量進行操作。
paginate = 4 # Defaults to 10另外,啟用標籤不會默認情況下顯示在標題和側邊欄上。在此處僅顯示前8個標籤(文章計數)以避免交通擁堵。但是,可以使用[params.tag]表的tagLimit變量覆蓋它。
[ params . tag ]
enabled = true
tagLimit = 10 # Top 10 tags will be displayed
# or
tagLimit = 0 # Display all tags還有其他一些次要配置。您可以通過參考配置文件中的註釋來設置它們。
該存儲庫的文檔目前正在工作,並將其添加到該存儲庫的Wiki中。 Wiki貢獻是最歡迎的。請隨時向我詢問此主題的功能。
完成配置後,您很高興。因此,使用以下方式測試您的網站:
hugo server現在,您的網站應在本地可通過http:// localhost:1313用於測試目的。
要測試示例站點,您必須將配置文件明確指定為Hugo。如下所示:
# For posts view demo
hugo server --config posts.toml
# For cards view demo
hugo server --config cards.toml發現一些有趣的東西可以添加到此主題中,還是一個錯誤?通過問題跟踪器讓我知道這一點。也歡迎拉動請求。有關如何貢獻的更詳細的說明,請參閱貢獻。
該主題是根據麻省理工學院許可發布的。