So Simple 是一個簡單的 Jekyll 主題,適合您的文字和圖片。旨在提供:
查看變更日誌中的新增內容。 v2 文檔。
描述 | ||
---|---|---|
帶有大英雄圖片的貼文。 | 預覽 | 來源 |
包含各種常見 HTML 元素的帖子,展示了主題如何設定它們的樣式。 | 預覽 | 來源 |
發布顯示突出顯示的程式碼。 | 預覽 | 來源 |
顯示具有多種對齊方式的圖像的貼文。 | 預覽 | 來源 |
所有帖子均按年份分組。 | 預覽 | 來源 |
所有貼文均按類別分組。 | 預覽 | 來源 |
所有貼文均按標籤分組。 | 預覽 | 來源 |
類別頁面。 | 預覽 | 來源 |
網格視圖中的文件清單。 | 預覽 | 來源 |
可以在演示網站上查看其他範例貼文。這些(以及整個演示站點)的來源檔案可以在/docs
資料夾中找到。
如果您執行 Jekyll v3.5+ 並自架,您可以快速將主題安裝為 Ruby gem。如果您使用GitHub Pages託管,則可以安裝為遠端主題或直接將所有主題檔案(請參閱下面的結構)複製到您的專案中。
將這一行加入 Jekyll 網站的Gemfile
(或建立一個):
gem "jekyll-theme-so-simple"
將此行新增至 Jekyll 網站的_config.yml
檔案:
theme : jekyll-theme-so-simple
然後運行 Bundler 安裝主題 gem 和依賴項:
bundle install
GitHub Pages 增加了對任何 GitHub 託管主題的全面支援。
將gem "jekyll"
替換為:
gem "github-pages" , group : :jekyll_plugins
執行bundle update
並驗證所有 gem 是否正確安裝。
將remote_theme: "mmistakes/[email protected]"
加入您的_config.yml
檔案中。刪除任何其他theme:
或remote_theme:
條目。
注意:您的 Jekyll 網站應該可以立即在 http://USERNAME.github.io 上查看。如果不是,您可以透過將空提交推送到 GitHub 來強制重建(有關更多詳細信息,請參閱下文)。
如果您在相同 GitHub 使用者名稱下託管多個基於 Jekyll 的站點,則必須使用專案頁面而不是使用者頁面。本質上,您將儲存庫重新命名為USERNAME.github.io以外的名稱,並在master
上建立gh-pages
分支。有關其工作原理的更多詳細信息,請查看 GitHub 的文檔。
如果您分叉或下載瞭so-simple-theme
存儲庫,您可以安全地刪除以下文件和資料夾:
.github
docs
example
.editorconfig
.gitattributes
banner.js
CHANGELOG.md
Gemfile
jekyll-theme-so-simple.gemspec
package.json
Rakefile
README.md
README-OLD.md
screenshot.png
如果您使用的是 Ruby Gem 或 So Simple 的遠端主題版本,升級相當輕鬆。
要檢查您目前使用的版本,請查看您建立的網站的源代碼,您應該會看到類似以下內容:
<!--
So Simple Jekyll Theme 3.0.0
Copyright 2013-2018 Michael Rose - mademistakes.com | @mmistakes
Free for personal and commercial use under the MIT license
https://github.com/mmistakes/so-simple-theme/blob/master/LICENSE
-->
這將位於每個.html
檔案/assets/css/main.css
和/assets/js/main.js
的頂部。
如果您使用 Bundler (有Gemfile
),則只需執行bundle update
即可;如果沒有,則執行gem update jekyll-theme-so-simple
。
驗證您在_config.yml
中分配了最新版本
remote_theme: "mmistakes/[email protected]"
注意:如果省略@xxx
則將使用主題的目前master
分支。建議將remote_theme
“鎖定”在特定版本,以避免對您的網站引入重大變更。
下一步需要重建您的 GitHub Pages 站點,以便它可以下載最新的主題更新。這可以透過將提交推送到 GitHub 儲存庫來實現。
如果您目前沒有任何內容要推送,則空提交也可以完成工作:
git commit --allow-empty -m "Force rebuild of site"
如果您想充分利用 Jekyll + GitHub Pages 工作流程,那麼您需要使用 Git。若要手動下載主題更新,您必須先確保有上游遙控器。如果您分叉了主題的儲存庫,那麼您很可能就可以開始了。
要仔細檢查,請執行git remote -v
並驗證您是否可以從origin https://github.com/mmistakes/so-simple-theme.git
取得。
要新增它,您可以執行以下操作:
git remote add upstream https://github.com/mmistakes/so-simple-theme.git
現在您可以使用以下命令提取對主題的master
分支所做的任何提交:
git pull upstream master
根據分叉後您進行的自訂數量,可能會出現合併衝突。處理任何衝突的文件 Git 標誌,暫存您希望保留的更改,然後提交它們。
處理更新的另一種方法是下載主題——手動用新的佈局、包含內容和資源替換佈局、包含內容和資源。為了確保您不會錯過任何更改,請查看主題的提交歷史記錄以查看發生了什麼更改。
以下是您需要注意的重要資料夾/文件的快速清單:
姓名 | |
---|---|
_layouts | 全部更換。如果您自訂了任何佈局,請套用編輯。 |
_includes | 全部更換。如果您自訂了任何包含內容,則套用編輯。 |
assets | 全部更換。如果您自訂了樣式表或腳本,則套用編輯。 |
_sass | 全部更換。如果您自訂了 Sass 部分,則套用編輯。 |
_data/navigation.yml | 安全保存。驗證是否沒有重大的結構變化或添加。 |
_data/text.yml | 安全保存。驗證是否沒有重大的結構變化或添加。 |
_config.yml | 安全保存。驗證是否沒有重大的結構變化或添加。 |
注意:如果您沒有看到最新版本,請務必刷新瀏覽器和 CDN 快取。根據您的託管環境,舊版的/assets/css/main.css
、 /assets/js/main.min.js
或*.html
檔案可能會被快取。
佈局、包含、Sass 部分和資料檔案都放置在其預設位置。樣式表和腳本可以在assets
中找到,以及專案根目錄中的一些開發相關文件。
請注意:如果您透過 Ruby Gem 或遠端主題方法安裝了 So Simple,則/_layouts
、 /_includes
、 /_sass
和/assets
中找到的主題檔案將從您的專案中遺失。這是正常的,因為它們與jekyll-theme-so-simple
gem 捆綁在一起。
├── _data # data files
| ├── navigation.yml # navigation bar links
| └── text.yml # theme text
├── _includes # theme includes
├── _layouts # theme layouts (see below for usage)
├── _sass # Sass partials
├── assets
| ├── css
| | └── main.scss
| └── js
| └── main.min.js
├── _config.yml # sample configuration
└── index.md # sample home page (recent posts/not paginated)
建立Gemfile
並安裝主題後,您需要新增和編輯以下檔案:
_config.yml
/_data/navigation.yml
/_data/text.yml
index.md
注意:請參閱下面的分頁文檔,以了解如何在主頁上啟用它的說明。
jekyll new
開始使用jekyll new
命令將使您能夠以最快的速度啟動並運行。
按照上面的安裝指南和下面的設定指南編輯Gemfile
和_config.yml
文件,然後按照前面的說明建立_data/text.yml
。
網站範圍的元素( locale
、 title
、 description
、 url
、 logo
、 author
等)的配置發生在專案的_config.yml
中。請參閱此儲存庫中的範例配置以取得更多參考。
姓名 | 描述 | 例子 |
---|---|---|
locale | 網站的主要語言。 | "en-us" |
title | 網站的標題。 | "My Awesome Site" |
description | 簡短的描述。 | "This is my site, it is awesome." |
baseurl | 用於在將部署到的相同基本 URL 下測試網站。 | /my-base-path |
url | 您網站的完整 URL。 | "https://your-site.com" |
logo | 標頭中使用的網站範圍標誌的路徑。 | /images/your-logo.png |
三種皮膚(預設、淺色和深色)可用於更改主題的調色板。
default.css | light.css | dark.css |
---|---|---|
skin : " /assets/css/skins/default.css "
skin : " /assets/css/skins/light.css "
skin : " /assets/css/skins/dark.css "
要使用除提供的皮膚之外的自訂皮膚:
/assets/css/skins/default.scss
複製並重新命名到您的本機儲存庫。_config.yml
中的skin
路徑以引用這個新的皮膚.css
檔案。site.locale
用於聲明網站內每個網頁的主要語言。
範例: locale: "en-US"
將網站的 lang 屬性設定為美國英語風格,而en-GB
將設定為英國英語風格。國家/地區代碼是可選的,並且較短的locale: "en"
也是可以接受的。若要尋找您的語言和國家/地區代碼,請查看此參考表。
正確設定區域設定對於關聯文字資料檔案中找到的本地化文字非常重要。
注意:主題預設為英文文字( en
、 en-US
、 en-GB
)。如果將_config.yml
中的語言環境變更為其他內容,請務必將對應的語言環境鍵和翻譯後的文字新增至_data/text.yml
。
您網站的基本主機名稱和協定。如果您使用 GitHub Pages 託管,則這將類似於url: "https://github.io.mmistakes"
或url: "https://your-site.com"
(如果您有自訂網域)。
GitHub Pages 現在對新網站強制使用https://
,因此在設定 URL 時請注意這一點,以避免出現混合內容警告。
注意:在開發中本機執行jekyll serve
時,Jekyll 會使用http://localhost:4000
覆寫url
的值。如果您想避免此行為,請設定JEKYLL_ENV=production
以強制環境進入生產環境。
這個選項在 Jekyll 社群中引起了各種混亂。如果您沒有將您的網站託管為 GitHub 專案頁面或子資料夾(例如/blog
),那麼就不要搞亂它。
對於So Simple演示網站,它託管在 GitHub 上:https://mmistakes.github.io/so-simple-theme。為了正確設定此基本路徑,我將使用url: "https://mmistakes.github.io"
和baseurl: "/so-simple-theme"
。
有關如何按照 Jekyll 維護者的意圖正確使用site.url
和site.baseurl
更多信息,請查看 Parker Moore 關於該主題的帖子。
注意:使用baseurl
時,請記住將其包含在內容中的連結和資產路徑中。 url:
和baseurl: "/blog"
的值將使您的本地網站在 http://localhost:4000/blog 上可見,而不是在 http://localhost:4000 上可見。您可以在所有資產和內部連結路徑前面加上{{ site.baseurl }}
或使用 Jekyll 的relative_url
。
若要使用下列影像路徑上方的範例值{{ '/images/my-image.jpg' | relative_url }}
將正確輸出為http://localhost:4000/blog/images/my-image.jpg
。
如果沒有relative_url
過濾器,資產路徑將遺失/blog
,並且頁面上的圖像會損壞。
您可以透過在_config.yml
中指定date_format
來變更預設日期格式。它接受任何標準 Liquid 日期格式。
例如"%B %-d, %Y"
的預設值可以這樣更改:
date_format : " %Y-%m-%d "
使用read_time: true
啟用站點範圍內的估計閱讀時間片段。 200
已設定為每分鐘的預設字數值 - 可以透過_config.yml
檔案中的words_per_minute
進行更改。
read_time : true
words_per_minute : 200
在網站範圍內啟用MathJax (數學的 JavaScript 顯示引擎)
mathjax :
enable : true
combo
選項可讓您選擇 MathJax 組件組合 - 預設為“tex-svg”。而且, tags
選項可讓您控制方程式編號——選項有「ams」(預設)、「all」和「none」。
設定範例:
mathjax :
enable : true # MathJax equations, e.g. true, false (default)
combo : " tex-svg " # "tex-svg" (default), "tex-mml-chtml", etc.
tags : " ams " # "none", "ams" (default), "all"
透過相應地替換字體name
和weights
,可以在整個網站中輕鬆使用Google 字體。建議的字體配對如下:
google_fonts :
- name : " Source Sans Pro "
weights : " 400,400i,700,700i "
- name : " Lora "
weights : " 400,400i,700,700i "
注意:如果使用其他字體系列,請務必新增,然後使用 Google 提供的font-family
值覆蓋/assets/css/main.scss
中的以下 SCSS 變數。
$serif-font-family : " Lora " , serif ;
$sans-serif-font-family : " Source Sans Pro " , sans-serif ;
$monospace-font-family : Menlo, Consolas, Monaco, " Courier New " , Courier ,
monospace ;
$base-font-family : $sans-serif-font-family ;
$headline-font-family : $sans-serif-font-family ;
$title-font-family : $serif-font-family ;
$description-font-family : $serif-font-family ;
$meta-font-family : $serif-font-family ;
有關覆蓋主題預設變數的更多信息,請參閱下面的樣式表文件。
透過啟用分頁,將主頁上的主要貼文清單分解為多個頁面。
將jekyll-paginate
外掛程式包含在您的Gemfile
中。
group :jekyll_plugins do
gem "jekyll-paginate"
end
將jekyll-paginate
加入_config.yml
檔案中的外掛plugins
(以前是gems
)以及以下分頁設定:
paginate : 10 # amount of posts to show per page
paginate_path : /page:num/
在專案的根目錄中建立index.html
(或重新命名index.md
)並新增以下前面的內容:
layout : home
paginate : true
若要對文件的完整內容建立索引以在搜尋頁面中使用,請在_config.yml
中將search_full_content
設為true
:
search_full_content : true
注意:大量貼文會增加搜尋索引的大小,影響頁面載入效能。將search_full_content
設為false
(預設值)會將索引限制為正文內容的前 50 個字。
預設情況下,新增至貼文的類別和標籤不會連結到分類存檔頁面。若要啟用此行為並連結至包含按類別或標籤分組的貼文的頁面,請新增以下內容:
category_archive_path : " /categories/# "
tag_archive_path : " /tags/# "
這些路徑應該模仿用於類別和標籤存檔頁面的永久連結。末尾的#
對於定位頁面上正確的分類部分是必需的。
例如,如果您要建立具有以下標題的categories.md
:
title : Categories Archive
layout : categories
permalink : /foo/
您需要將category_archive_path
更改為"/foo/#
以使類別連結正常運作。
注意:您可以使用layout: category
和layout: tag
手動建立專用的類別和標籤頁面。或使用jekyll-archives或jekyll-paginate-v2等外掛程式自動產生它們。
如果您有Disqus帳戶,您可以在每篇貼文下方顯示評論部分。
若要啟用 Disqus 評論,請將您的 Disqus 短名稱新增至專案的_config.yml
檔案:
disqus :
shortname : my_disqus_shortname
只有在使用以下環境值建置時,註解才會出現在生產中: JEKYLL_ENV=production
,以避免localhost
內容污染您的 Disqus 帳戶。
如果您不想顯示特定貼文的評論,可以透過在該貼文的前言中新增comments: false
來停用它們。
若要啟用Google Analytics ,請將您的追蹤 ID 新增至_config.yml
中,如下所示:
google_analytics : UA-NNNNNNNN-N
與上面的 Disqus 評論類似,Google Analytics 追蹤腳本僅在使用以下環境值時才會出現在生產環境中: JEKYLL_ENV=production
。
如需更多設定選項,請務必查閱下列文件: jekyll-seo-tag 、 jekyll-feed 、 jekyll-paginate和jekyll-sitemap 。
主題提供了以下佈局,您可以透過在每個頁面上設定layout
前事項來使用這些佈局,如下所示:
---
layout : name
---
layout: default
此佈局處理將頁面內容放置在標頭和頁腳元素之間的所有基本頁面腳手架。所有其他佈局都繼承此佈局,並在{{ content }}
區塊內提供額外的樣式和功能。
layout: post
此佈局包含以下前面的內容:
姓名 | 類型 | 描述 |
---|---|---|
image | 細繩 | 與帖子相關的大圖像的路徑。也用於 OpenGraph、Twitter 卡和網站提要縮圖(如果啟用)。建議的圖像尺寸。 |
image.path | 細繩 | 與上面相同。當thumbnail 或caption 也需要指派給image 物件時使用。 |
image.caption | 細繩 | 描述圖像或提供信用。允許降價。 |
author | 物件或字串 | 指定貼文的作者name 、 picture 、 twitter 、 links 等。 |
comments | 布林值 | 使用comments: false 禁用評論。 |
share | 布林值 | 使用share: true 將社交分享連結新增至貼文。 |
發布圖片範例:
image :
path : /images/post-image-lg.jpg
thumbnail : /images/post-image-th.jpg
caption : " Photo credit [Unsplash](https://unsplash.com/) "
注意: image.feature
front Matter 已被棄用,以完全支援 jekyll-seo-tag。如果您不使用thumbnail
或caption
則可以將貼文圖片更簡潔地指定為image: /images/your-post-image.jpg
。
帖子作者範例:
# post specific author data if different from what is set in _config.yml
author :
name : John Doe
picture : /images/john-doe.jpg
twitter : johndoe
注意:作者資訊可以透過在文件的前面進行以下操作集中在_data/authors.yml
:
author : johndoe
使用_data/authors.yml
中對應的作者金鑰:
johndoe :
name : John Doe
picture : /images/john-doe.jpg
twitter : johndoe
注意: author.picture
建議尺寸為150 x 150
像素。
要定義作者側欄中顯示的鏈接,請使用_config.yml
或/_data/authors.yml
中的authors.links
鍵。
姓名 | 描述 |
---|---|
title | 描述連結。不可見,用於輔助目的。 |
url | 連結指向的 URL。 |
icon | 對應於 Font Awesome 圖標,例如fab fa-twitter-square 。 |
例子:
author :
links :
- title : Twitter
url : https://twitter.com/username
icon : fab fa-twitter-square
- title : Instagram
url : https://instagram.com/username
icon : fab fa-instagram
- title : GitHub
url : https://github.com/username
icon : fab fa-github-square
注意:要完全停用作者鏈接,請使用:
author :
links : false
layout: page
從視覺上看,此佈局的外觀和行為類似於layout: post
,但有以下差異。
頁面版面配置構成了其他幾種版面的基礎,例如home
、 posts
、 categories
、 tags
、 collection
、 category
、 tag
和search
。
layout: home
此佈局包含與layout: page
,並添加了以下內容:
paginate : true # enables pagination loop, see section above for additional setup
entries_layout : # list (default), grid
未啟用分頁時,頁面預設顯示最新 10 篇貼文。若要變更顯示的貼文數量,請透過將以下內容新增至頁面的首頁來指派限制值。
posts_limit : 5
預設情況下,貼文顯示在清單檢視中。若要變更為網格視圖,請將entries_layout: grid
新增至頁面的前面。
layout: posts
此版面配置顯示按發布年份分組的所有貼文。它容納與layout: page
。
預設情況下,貼文顯示在清單檢視中。若要變更為網格視圖,請將entries_layout: grid
新增至頁面的前面。
layout: categories
此版面配置顯示所有分組類別的貼文。它容納與layout: page
。
預設情況下,貼文顯示在清單檢視中。若要變更為網格視圖,請將entries_layout: grid
新增至頁面的前面。
layout: tags
此版面配置顯示按標籤分組的所有貼文。它容納與layout: page
。
預設情況下,貼文顯示在清單檢視中。若要變更為網格視圖,請將entries_layout: grid
新增至頁面的前面。
layout: collection
此版面配置顯示按特定集合分組的所有文件。它容納與layout: page
,並添加了以下內容:
collection : # collection name
entries_layout : # list (default), grid
show_excerpts : # true (default), false
sort_by : # date (default) title
sort_order : # forward (default), reverse
要建立一個顯示recipes
集合中所有文件的頁面,您需要在專案的根目錄中建立recipes.md
並新增以下前言:
title : Recipes
layout : collection
permalink : /recipes/
collection : recipes
預設情況下,文件以清單視圖顯示。若要變更為網格視圖,請將entries_layout: grid
新增至頁面的前面。如果您想要按標題對集合進行排序,請新增sort_by: title
。如果要反向排序,請新增sort_order: reverse
。如果您只是尋找顯示食譜標題(無摘錄)的列表,請新增show_excerpts: false
。
layout: category
此版面配置顯示按特定類別分組的所有貼文。它容納與layout: page
,並添加了以下內容:
taxonomy : # category name
entries_layout : # list (default), grid
預設情況下,貼文顯示在清單檢視中。若要變更為網格視圖,請將entries_layout: grid
新增至頁面的前面。
要建立一個顯示分配給類別foo
所有貼文的頁面,您需要在專案的根目錄中建立foo.md
並新增以下前言:
title : Foo
layout : category
permalink : /categories/foo/
taxonomy : foo
layout: tag
此版面配置顯示按特定標籤分組的所有貼文。它容納與layout: page
,並添加了以下內容:
taxonomy : # tag name
entries_layout : # list (default), grid
預設情況下,貼文顯示在清單檢視中。若要變更為網格視圖,請將entries_layout: grid
新增至頁面的前面。
要建立一個顯示分配給標籤foo bar
所有貼文的頁面,您需要在專案的根目錄中建立foo-bar.md
並新增以下前言:
title : Foo Bar
layout : tag
permalink : /tags/foo-bar/
taxonomy : foo bar
layout: search
此佈局顯示搜尋表單並根據查詢顯示相關頁面。
頁面內容索引: title
、 excerpt
、 content
(啟用時)、 categories
、 tags
和url
。
如果您想從搜尋索引中排除特定頁面/帖子,請將其前文中的搜尋標誌設為false
。
search : false
若要索引文件的完整內容,請在_config.yml
中將search_full_content
設為true
:
search_full_content : true
注意:大量貼文會增加搜尋索引的大小,影響頁面載入效能。將search_full_content
設為false
(預設值)會將索引限制為正文內容的前 50 個字。
建議的影像尺寸(以像素為單位)如下:
影像 | 描述 | 尺寸 |
---|---|---|
site.logo | 標頭中使用全站標誌。 | 200 x 200 |
page.image.path | 大型全角文檔影像。 | 高的圖像會將內容向下推到頁面上。 1600 x 600 是一個很好的中間尺寸。 |
page.image | 單獨使用時page.image.path 的簡寫(不含thumbnail 、 caption 或其他變數)。 | 與page.image.path 相同 |
page.image.thumbnail | 網格視圖中使用的小文件影像。 | 400 x 200 |
author.picture | 作者圖片在貼文側邊欄。 | 150 x 150 |
若要變更整個主題中的文本,請複製以下/_data/text.yml
檔案並根據需要進行自訂。
新增文字時,請確保鍵與這些語言/國家/地區代碼相匹配,這些代碼可用於site.locale
。
要定義頂部導覽中連結的頁面:
建立/_data/navigation.yml
檔案。
按照您希望頁面顯示的順序新增頁面:
- title : Posts
url : /posts/
- title : Categories
url : /categories/
- title : External Page
url : https://whatever-site.com/page.html
- title : Search
url : /search/
注意:長標題或許多連結可能會導致導覽列分成多行,尤其是在較小的螢幕上。在開發網站的主要導航時請記住這一點。
作者資訊用作「按行」貼文的元數據,並透過_config.yml
中的以下前面內容傳播 Twitter 摘要卡的creator
欄位:
author :
name : John Doe
twitter : johndoetwitter
picture : /images/johndoe.png
網站範圍內的作者資訊可以透過相同的方式在文件的前文中被覆蓋:
author :
name : Jane Doe
twitter : janedoetwitter
picture : /images/janedoe.png
或透過在文件的前面指定site.data.authors
中存在的對應鍵。例如,文件的前面有以下內容:
author : megaman
_data/authors.yml
中有以下內容:
megaman :
name : Mega Man
twitter : megamantwitter
picture : /images/megaman.png
drlight :
name : Dr. Light
twitter : drlighttwitter
picture : /images/drlight.png
目前, author.picture
僅在layout: post
中使用。建議尺寸為150 x 150
像素。
頁腳連結和版權文字都可以自訂。
頁腳連結在_config.yml
中的footer_links
鍵下設定。
姓名 | 描述 |
---|---|
title | 描述連結。不可見,用於輔助目的。 |
url | 連結指向的 URL。 |
icon | 對應於 Font Awesome 5 圖標,例如fab fa-twitter-square 。 |
範例:
footer_links :
- title : Twitter
url : https://twitter.com/username
icon : fab fa-twitter-square
- title : GitHub
url : https://github.com/mmistakes
icon : fab fa-github-square
- title : Feed
url : atom.xml
icon : fas fa-rss-square
注意:要完全停用頁腳鏈接,請使用footer_links: false
。
預設情況下,版權會插入當前年份、 site.title
以及"Powered by Jekyll & So Simple."
若要變更此設置,請將copyright
新增至您的_config.yml
中,如下所示(允許使用 Markdown):
copyright : " This site is made with <3 by *me, myself, and I*. "
您可以將這些 Jekyll 助手視為短代碼。由於 GitHub Pages 不允許大多數外掛程式 --- 自訂標籤已被淘汰。相反,主題利用include來做類似的事情。
嵌入 YouTube/Vimeo 的影片或任何其他可回應調整大小以適合其父級寬度的iframe
內容。
範圍 | 必需的 | 描述 |
---|---|---|
url | 是的 | 影片或 iframe 的 URL,例如https://www.youtube.com/watch?v=-PVofD2A9t8 |
ratio | 選修的 | 影片或 iframe 內容的比率。 21:9 16:9 4:3 1:1 。如果未指定比率,則使用16:9 。 |
例子:
{% include responsive-embed url="https://www.youtube.com/watch?v=-PVofD2A9t8" ratio="16:9" %}
若要包含自動產生的貼文和頁面目錄,請在您希望顯示的位置新增以下說明程式。
{% include toc %}
所以Simple 3是整個主題的重大重寫。下面總結了最顯著的變化,然後是更具體的變化。
可以肯定地說,您可能想要放棄 v2 中的所有_layouts
、 _includes
、 _sass
、 .css
和.js
文件,並使用 Ruby gem 或遠端主題安裝選項。
_layouts
、 _includes
、 _sass
和 JavaScript 均已重建。relative_url
和absolute_url
過濾器正確使用site.url
和site.baseurl
。/_includes/open-graph.html
替換為jekyll-seo-tag 。tags
和posts
),以便於使用。404.md
頁面。atom.xml
feed 檔案替換為jekyll-feed 。favicon.ico
和favicon.png
檔。float
的佈局的回退,因此在不支援顯示的瀏覽器中,事情看起來不會太糟糕display: grid
和彈性盒。格式已從en_US
(帶下劃線)更改為en-US
(帶連字號)。
site.owner
現在是site.author
,以更好地支援 jekyll-seo-tag 和 jekyll-feed。
v2 | v3 |
---|---|
site.owner.name | site.author.name |
site.owner.avatar | site.author.picture |
site.owner.email | site.author.email |
site.owner.twitter | site.twitter |
site.owner.google.analytics | 已棄用,替換為 jekyll-seo-tag |
site.owner.bing-verify | 已棄用,替換為 jekyll-seo-tag |
site.owner.google.analytics
現在是site.google_analytics
。請參閱文件以取得更多資訊。
site.owner.disqus-shortname
現在是site.disqus.shortname
。請參閱文件以了解更多資訊。
若要停用對特定貼文的評論,請將comments: false
新增至其前面的內容。
search_omit
已重新命名為search
。若要從搜尋中排除貼文或頁面,請在其前面新增search: false
。
當為site.logo
、 page.image.path
、 author.picture
等分配圖像路徑時,它們現在需要完整的相對或絕對路徑。
在 So Simple v2 中,影像全部放置在/images/
中,並僅使用檔案名稱分配在最前面。為了正確載入圖像,您現在需要在所有路徑前添加/images/
... 如果您在那裡儲存圖像,例如/images/your-image.jpg
。
為了更好地支援 Jekyll 外掛程式(如 jekyll-seo-tag、jekyll-feed 和 jekyll-sitemap),大多數image
鍵已被重新命名。相應地調整所有貼文和頁面中的首頁內容。
v2 | v3 |
---|---|
image.feature | image.path |
image.thumb | image.thumbnail |
image.credit | image.caption (允許使用 Markdown) |
image.creditlink | 不建議使用**image.caption** 代替 |
具有以下 v2 標題的貼文:
image :
feature : feature-image-filename.jpg
thumb : thumb-image-filename.jpg
credit : Michael Rose
creditlink : https://mademistakes.com
將轉換為以下 v3 front Matter:
image :
path : /images/feature-image-filename.jpg
thumbnail : /images/thumb-image-filename.jpg
caption : " [Michael Rose](https://mademistakes) "
將現有的 So Simple v2 分支(不做任何更改)遷移到最新版本的大致步驟。
刪除_includes/
、 _layouts/
、 _sass/
、 jshintrc
、 Gruntfile.js
和search.json
。
編輯Gemfile
以取得 Ruby gem 或 GitHub Pages 安裝方法並按照這些說明進行操作。
將以下 Google 字型加入_config.yml
:
google_fonts :
- name : " Source Sans Pro "
weights : " 400,400i,700,700i "
- name : " Lora "
weights : " 400,400i,700,700i "
編輯_config.yml
密切注意那些已重新命名或具有新相對路徑要求的鍵。 locale
、 logo
和owner
是很好的起點。
重新命名帖子/頁面中image.feature
、 image.thumb
和image.credit
的所有實例,遵循上述圖像更改。
刪除index.html
中的body內容並將layout: page
改為layout: home
。如有必要,請配置分頁。
刪除/search/index.md
中的正文內容,並將layout: page
變更為layout: search
。
刪除/tags/index.md
中的正文內容,並將layout: page
變更為layout: tags
。
刪除/articles/index.md
中的正文內容並將layout: page
變更為layout: category
並新增taxonomy: articles
。
刪除/body/index.md
中的正文內容,並將layout: page
變更為layout: category
並新增taxonomy: blog
。
將貼文/頁面中modified
前文重命名為last_modified_at
以提高與支援它的插件的一致性。
將tag_archive_path: "/tags/#"
新增至_config.yml
以啟動帖子元側邊欄中的標籤連結。
將avatar
重新命名為_data/authors.yml
中的picture
(以及任何帖子/頁面的首頁),並編輯遵循上面圖像路徑更改的路徑。
當安裝為Ruby gem或遠端主題時,專案中將不存在核心主題檔案( _layouts
、 _includes
、 _sass
、 assets
等)。
可以透過以下兩種方式覆蓋和自訂該主題的預設結構、樣式和腳本:
可以透過將同名檔案放入專案的_includes
或_layouts
目錄中來覆寫主題檔案。例如:
_includes/social-share.html
,請在專案中建立一個_includes
目錄,將_includes/social-share.html
從 So Simple 的 gem 資料夾複製到<your_project>/_includes
並編輯該文件。專業提示:要在電腦上找到主題文件,請執行bundle show jekyll-theme-so-simple
。這將返回基於 gem 的主題檔案的位置。
此主題附帶兩個文件,可協助將自訂標記和內容注入預先定義的位置。
描述 | |
---|---|
_includes/head-custom.html | 插入到<head> 元素內,用於新增元資料、網站圖示等。 |
_includes/footer-custom.html | 插入到<footer> 元素內,位於網站腳本和版權資訊之前。 |
若要覆寫預設的 Sass(位於主題的_sass
目錄中),請執行下列其中一項:
直接從 So Simple gem 複製
bundle show jekyll-theme-so-simple
來取得它的路徑)。/assets/css/main.scss
的內容從那裡複製到<your_project>
。<your_project>/assets/css/main.scss
中自訂您想要的內容。從此儲存庫複製。
<your_project>
。<your_project/assets/css/main.scss
中自訂您想要的內容。注意:要自訂 gem 中捆綁的實際 Sass 部分,您需要將_sass
目錄的完整內容複製到<your_project>
。由於 Jekyll 目前匯入這些檔案的方式,因此全有要麼全無。覆蓋單一 Sass 部分(或兩個)不會像_includes
和_layouts
那樣工作。
若要對主題樣式進行基本調整,可以透過新增至<your_project>/assets/css/main.scss
來覆寫 Sass 變數。例如,若要變更整個主題中使用的強調色,請在所有@import
行之前新增以下內容:
$accent-color : tomato ;
若要覆寫主題中捆綁的預設 JavaScript,請執行下列其中一項:
直接從 So Simple gem 複製
bundle show jekyll-theme-so-simple
以取得它的路徑)。/assets/js/main.js
的內容從那裡複製到<your_project>
。<your_project>/assets/js/main.js
中自訂您想要的內容。從此儲存庫複製。
/assets/js/main.js
的內容複製到<your_project>
。<your_project>/assets/js/main.js
中自訂您想要的內容。主題的/assets/js/main.min.js
檔案是由 jQuery 外掛和/assets/js/
中的其他腳本建構的。
├── assets
| ├── js
| | ├── lunr # Lunr search plugin
| | | ├── lunr.xx.js # Lunr language plugins
| | | ├── ...
| | | ├── lunr.min.js
| | | └── lunr.stemmer.support.min.js
| | ├── plugins
| | | ├── jquery.smooth-scroll.min.js # make same-page links scroll smoothly
| | | ├── lity.min.js # responsive lightbox
| | | └── table-of-contents.js # table of contents toggle
| | ├── main.js # jQuery plugin settings and other scripts
| | ├── main.min.js # concatenated and minified scripts
| | ├── search-data.json # search index used by Lunr
若要修改或新增您自己的腳本,請將它們包含在assets/js/main.js
中,然後使用npm run build:js
進行重建。請參閱下文以了解更多詳情。
如果您將其他腳本新增至/assets/js/plugins/
並希望它們與其他腳本連接,請務必更新package.json
中的uglify
腳本。對於您刪除的腳本也是如此。
您也可以透過在_config.yml
中新增下列陣列的路徑來將腳本新增至<head>
或結束</body>
元素。
例子:
head_scripts :
- https://code.jquery.com/jquery-3.2.1.min.js
- /assets/js/your-custom-head-script.js
footer_scripts :
- /assets/js/your-custom-footer-script.js
注意:如果您將路徑指派給footer_scripts
則主題的/assets/js/main.min.js
檔案將會停用。該腳本包含插件和其他腳本,除非您專門將它們新增至footer_scripts
數組,否則它們將停止運行。
該主題使用帶有 JS 版本的Font Awesome SVG 進行圖像處理。這些圖示出現的顯著位置是作者側邊欄和頁腳連結中。
要設定您的環境來開發此主題:
cd
進入/example
並執行bundle install
。若要在變更主題時在本機測試主題:
cd
到儲存庫的根資料夾(例如jekyll-theme-so-simple
)。bundle exec rake preview
並開啟瀏覽器造訪http://localhost:4000/example/
。這將使用主題的檔案和example/
目錄的內容啟動 Jekyll 伺服器。進行修改後,請刷新瀏覽器以查看任何變更。
為了減少依賴性,使用一組 npm 腳本來建立main.min.js
而不是像 Gulp 或 Grunt 這樣的任務執行程式。如果這些工具更符合您的風格,那麼請務必使用它們。
開始使用:
cd
到項目的根目錄。注意:如果您從主題的先前版本升級,請確保在執行npm install
之前複製了package.json
。您可能還需要刪除node_modules
目錄。
如果一切順利,執行npm run build:js
會將main.js
和所有外掛程式腳本壓縮/連接到/assets/js/main.min.js
中。
在文件中發現拼字錯誤?請求功能或錯誤修復?在提交問題之前搜尋已開啟和已關閉的問題以避免重複。
拉取請求也受到讚賞。如果這是您第一次,閱讀 GitHub Flow 可能會有所幫助。
如果您的貢獻新增或變更了主題的行為,請確保更新文件和/或範例內容。文件位於 README.md 中,而範例文章、頁面和集合位於docs
和example
資料夾中。
提交拉取請求時:
master
中建立一個分支並給它一個有意義的名稱(例如my-awesome-new-feature
)。麥可·羅斯
麻省理工學院許可證 (MIT)
版權所有 (c) 2013-2019 Michael Rose 和貢獻者
特此免費授予任何獲得本軟體及相關文件文件(「軟體」)副本的人不受限制地使用本軟體,包括但不限於使用、複製、修改、合併的權利、發布、散佈、再授權和/或銷售軟體的副本,並允許向其提供軟體的人員這樣做,但須滿足以下條件:
上述版權聲明和本授權聲明應包含在本軟體的所有副本或主要部分中。
本軟體以「現況」提供,不提供任何明示或暗示的保證,包括但不限於適銷性、特定用途的適用性和不侵權的保證。 IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE軟體.
So Simple 包含 Font Awesome,版權所有 (c) 2017 Dave Gandy。 Font Awesome 是根據 SIL OFL 1.1 和 MIT 授權的條款分發的。
So Simple 包含了來自 Unsplash 的照片。
So Simple 融合了 WeGraphics 的照片
So Simple 結合了斷點。 Breakpoint 是根據 MIT/GPL 授權的條款分發的。
So Simple 結合了 jQuery Smooth Scroll,版權所有 (c) 2017 Karl Swedberg。 jQuery Smooth Scroll 是根據 MIT 授權條款分發的。
So Simple 包含 Lunr,版權所有 (c) 2017 Oliver Nightingale。 Lunr 根據 MIT 授權條款進行分發。
So Simple 合併了 Lity,版權所有 (c) 2015-2016,Jan Sorgalla。 Lity 是根據 MIT 授權的條款發布的](http://opensource.org/licenses/MIT)。
So Simple 包含目錄切換,版權所有 (c) 2017 Timothy B. Smith。目錄 Toggle 是根據 MIT 授權的條款分發的](http://opensource.org/licenses/MIT)。