Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Jekyll
Webdesign

如何設置Jekyll主題

by
Difficulty:BeginnerLength:LongLanguages:

Chinese (Traditional) (中文(繁體)) translation by Fuhuan (you can also view the original English article)

Jekyll是壹個靜態網站生成系統,可以讓妳將純文本文件轉換為復雜的博客,而無需擔心數據庫,安全問題,更新以及許多CMS和博客平臺可能帶來的其他復雜問題。

與大多數網站管理系統類似,可以在網站上使用Jekyll主題。 然而目前,Jekyll並沒有像妳習慣的那樣使用主題。

現在Jekyll主題需要通過安裝程序來應用。 當妳下載Jekyll主題時,妳也會下載運行整個Jekyll主題網站所需的所有文件。

未來版本的Jekyll將會發生變化,但現在妳需要知道如何使用Jekyll主題。

在本教程中,我們將從壹開始就設置壹個Jekyll主題,從壹些基本的安裝議開始,逐步了解如何熟悉主題的功能,以及如何設置新網站或重新安裝新的主題,維持壹個現有的網站。

讓我們開始!

Envato市場上的Jekyll主題

Envato Market上的Jekyll主題擁有壹系列從19美元到24美元不等的主題。 稍後,我們將使用“ Writer ”和“ Astro ”(兩個當前暢銷主題)來演示安裝。

jekyll on Themeforest
Envato市場上的Jekyll主題

安裝Jekyll

Jekyll主題用於在妳自己的計算機上離線管理,內置於靜態HTML網站中, 然後進行部署。添加內容時,基本過程是創建壹個子集文件,在頂部添加壹些前置事項,使用內容填充文件的其余部分,然後重新構建妳的網站。

壹旦妳的網站建成,妳可以以任何妳選擇的方式部署它,通過FTP或git命令。 但是,我們不會在本教程中關註部署,因此如果妳想了解更多關於該主題的信息,請訪問Jekyll主題使用幫助文檔。

相反,我們將專註於妳的計算機上脫機發生的Jekyll網站設置過程的壹部分,這壹切都開始於安裝。

必備條件

使用Jekyll確實涉及到壹些命令行的用法,但如果妳從未使用過命令行,那麽請不要讓它掉線。 我建議通過我們的網頁設計命令行  系列教程系列中的壹些條目來獲得舒適。

Jekyll並沒有得到Windows系統官方的支持。 但不意味著妳不能使用它,但妳可能需要跳過幾個障礙。 如果妳想在Windows上使用Jekyll,請查看Jekyll文檔中的詳細信息。

否則,如果妳使用的是Mac OS X,Linux或Unix,則需要確保安裝了以下必備組件:

  • Ruby(預裝在Mac上)
  • Ruby Gems(用於Ruby包管理)

要檢查妳是否安裝了Ruby,請運行該命令ruby -v。 檢查Ruby Gems運行gem -v。 在這兩種情況下,這些命令都會檢查版本號,只要妳看到終端中返回的號碼,妳就可以輕松解決。

我們將使用Jekyll 3.1.x,因此妳不需要像Jekyll安裝文檔頁面中提到的那樣需要NodeJS或Python 。

運行Jekyll安裝

現在,要將Jekyll安裝到妳的計算機上,請運行以下命令: gem install jekyll

如果妳看到提示妳沒有寫入權限的消息,請在提示符前sudo輸入命令  並在提示時輸入密碼。

然後,妳會在終端中看到幾行顯示正在運行的安裝過程。 當它說“安裝了1顆寶石”時,妳就完成了。

創建壹個默認的Jekyll網站

讓我們快速創建壹個Jekyll主題網站,以便妳可以在默認的非主題狀態中看到它的外觀,並熟悉它的文件和文件夾結構。 創建壹個文件夾來容納該網站,然後打開指向該文件夾的終端並運行: jekyll new .

註意:如果妳想在某個時候在子文件夾中創建壹個新的Jekyll網站,請使用以下命令: jekyll new subfolder_name

當網站設置完成後,妳會在終端中看到壹條消息,指出  “在<路徑>中安裝了新的jekyll網站”。 此時,在妳的文件夾中,妳應該看到Jekyll網站的標準內容。

此時,在妳的文件夾中,妳應該看到Jekyll網站的標準內容。

當妳 在終端中看到消息“服務器正在運行...按ctrl-c停止”時,妳可以 在瀏覽器中輸入地址  http:// localhost:4000並查看默認的Jekyll網站。

現在妳已經看到了Jekyll網站的默認文件和文件夾結構以及它的非主題狀態,妳可以更好地了解妳在典型的Jekyll主題下載中看到的內容。

快速演示新Jekyll主題

正如妳從本教程中討論的內容中所知道的那樣,Jekyll主題當前帶有運行整個網站所需的所有文件。 正如妳在上壹節中看到的那樣,壹旦妳擁有了所有可以運行的文件jekyll serve,以便在瀏覽器中查看該網站。

這意味著,當妳下載壹個新的Jekyll主題時,妳可以將其提取出來,立即jekyll serve在全功能的Jekyll網站上運行並使用主題。 許多主題甚至會包含已包含的演示內容。

讓我們來看壹些使用主題“ Writer ”和“ Astro ”的例子,(或者妳喜歡的)。

壹旦提取,就通過主題結構進行搜索,直到找到容納Jekyll網站所有文件的根文件夾。 妳應該能夠從早先默認的Jekyll安裝中識別此文件夾。 尋找諸如_config.yml文件,_includes目錄等內容。

然後打開文件夾內的終端並運行jekyll serve。

如果成功,妳將看到“終端服務器地址:”消息,並在終端顯示壹個URL。 將此網址復制並粘貼到瀏覽器中,妳應該會看到新主題的效果演示。

缺少文件?

在某些情況下,妳可能會在嘗試運行時看到錯誤消息jekyll serve。 如果發生這種情況,請查看消息是否抱怨缺少文件,即主題所需的功能缺失。 

在這個例子中,妳可以在紅色的錯誤文本中看到“jekyll-paginate”gem丟​​失了:

壹個快速的谷歌搜索調出Github的問題寶石回購,提供安裝它所需的命令。

在運行所述命令並安裝缺失的組件文件後jekyll serve,能夠按照預期的主題運行。

如果演示不加載

如果妳轉到提供的網址並且沒有看到該網站,例如:

...檢查的值baseurl在_config.yml文件。 我們稍後會詳細討論的這個文件控制整個網站的整體配置。

該baseurl變量附加到主域,當我們離線工作時,它是  http:// localhost:4000。

在上面的例子中,我們希望我們的網站出現在  http:// localhost:4000。 在_config.yml文件中,我們的變量設置為:baseurl

這看起來似乎是正確的,但由於這個值附加到主域,它實際上使網站嘗試加載在http:// localhost:4000http:// localhost。

所以,我們需要將值更改為如下所示的空字符串:

妳的網站將按預期加載。

如果妳想要從子目錄加載網站,請將該baseurl值更改為子目錄的名稱,確保以正斜杠開始和結束:

熟悉主題

主要原因之壹是,直接從現有結構中提供主題開始是壹個好主意,除了檢查它按預期運行外,它還使妳有機會熟悉Jekyll主題的功能和工作流程。

因為Jekyll主題相當靈活性可以提供不同的功能。 在提供新主題的演示後,花點時間瀏覽壹下,看看主題具有哪種類型的結構。 查找主題是否包含類別頁面,精選圖片,作者頁面等等。 記下這些功能,以便搜索主題的文檔並學習如何使用它們。

妳還應該查看主題的文件和文件夾結構。 妳需要調查的主要領域是:

  • 主題在_layouts文件夾中可能具有的任何自定義頁面布局
  • 妳需要調查的主要領域是:

妳還需要了解妳可能必須在網站的_config.yml文件中設置的網站範圍配置選項,才能使用主題的功能,例如社交媒體網址,作者信息,導航鏈接等。

讓它成為妳的

現在,妳有機會查看主題並熟悉自己,現在可以在自己的網站上使用它了。 將妳已創建的演示版本保持不變,以便將其與新建網站進行比較。

清除演示內容

在妳的計算機上創建壹個新文件夾,然後將所有主題的文件重新提取到該文件夾​​中。

這壹次,進入_posts文件夾並刪除其中的所有文件,以便演示文稿被刪除。

之後, 從根文件夾中刪除任何.md(markdown)文件,這樣所有演示頁面都不再顯示。

之後, 從根文件夾中刪除任何.md(markdown)文件, 這樣所有演示頁面都不再顯示。

如果妳的主題確實有要刪除的演示圖像,但妳不確定它們的位置,請檢查它應該告訴妳的主題文檔。 否則,妳可能需要瀏覽主題模板中的代碼並從中找出它。

設置網站配置

接下來,妳應該從根文件夾打開_config.yml文件並設置主題所需的任何網站範圍的變量。 某些設置壹般是共同所有_config.yml文件,如,,和其他幾個人。 但是,某些設置將特定於給定的主題。

妳在網站配置文件中需要做什麽取決於具體主題,所以最好在此處參考主題的文檔,以獲取有關每個設置的功能的指導。

例如,在Writer主題中,可以使用nav_list變量設置自定義導航菜單來定義菜單項列表。 每個人都有壹個標簽,永久鏈接和壹個可以在其旁邊顯示壹個Font Awesome圖標的類。

相比之下,Astro主題不使用Writer指定  nav_item變量,但有自己的自定義變量,允許妳將鏈接添加到各種社交媒體帳戶,以及激活Disqus評論等。

通過妳自己主題的_config.yml文件中的變量,直到妳把它們全部設置為妳的喜好為止。

請註意,如果妳在首次使用新網站後進行此類更改,則  jekyll serve需要停止該過程CTRL + C 並重新啟動該過程  以查看後續更改的生效。

設置妳的主頁(如果需要)

有些主題會讓妳選擇從主頁的多個布局中進行選擇,並設置影響其顯示的控件。 如果是這種情況,妳可能會發現可以從根文件夾的index.html文件的前端更改設置。

如果有多個布局可用,妳可能會發現可以通過修改layout設置的值來選擇其他布局 - 妳必須參考主題的文檔以查看可以使用的值。

在妳編輯文件時,請查看是否有其他值應該更改以影響將顯示在主頁上的內容。 例如,在Writer主題中,可以將自定義標題和說明設置為僅顯示在主頁上,以及特色圖片。

添加妳自己的頁面

如果妳想添加諸如“關於”或“聯系人”等頁面,現在就是時間。 將.md(子集)文檔添加到妳要設置的每個頁面的網站的根文件夾中。

註意:有些主題設置為將所有頁面放置到子文件夾中(通常命名為“頁面”),而不是根文件夾,因此請檢查主題文檔以查看是否屬於這種情況。

例如,在這裏我添加了“關於網站”頁面(about.md), “關於我”作者個人資料頁面(author-kezz.md) 和“聯系人”頁面(contact.md)。

當妳添加頁面文件時,妳會想知道是否有特定的布局模板和/或前端設置,妳應該使用它們。 為了找出妳可以參考主題的文檔,或者復制並粘貼妳對主題進行的演示安裝中的降價文件,並對它們進行修改。

舉個栗子,我在這裏復制了Writer演示中現有的作者頁面,並將其重命名為我自己,然後編輯它的前端內容。

添加帖子

現在妳已經掌握了網站結構設置的基本要素,現在可以添加壹些帖子了。 我建議妳從演示網站的_posts文件夾復制帖子,並將其粘貼到正在進行的安裝中。 然後,妳可以  使用妳的新文章的日期和固定鏈接對其進行重命名。 通過重新使用演示文稿,所有必需的前臺事宜都將到位,妳只需更新它。

類別,標簽和其他附加

有些主題提供對類別和標簽頁面的支持。 但情況並非總是如此,因此實施可能會因主題而異。 查看妳主題的文檔,了解妳可能需要做什麽來處理網站上的類別和代碼。

例如,在Writer主題中,對於要使用的每個類別,都需要在名為“category”的網站子文件夾中手動設置文件夾和模板文件。

妳可能還會使用妳正在使用的特定主題的任何其他額外功能。 請務必仔細閱讀妳主題的功能列表和文檔,以確保妳涵蓋了包含的所有內容。

在現有網站上切換主題

如果妳已經有了壹個Jekyll主題網站,並且想要應用壹個新的主題,那麽妳將需要經歷與上述幾乎相同的過程。 刪除演示內容之後會出現差異,而不是添加新的頁面和帖子,而只是復制現有網站的內容。

如果妳有已存在網頁的現有Jekyll網站,請將舊網站中的關聯降價文件復制並粘貼到新網站中。 瀏覽每個頁面並更新前面的內容以使用新主題的布局和所需的變量。

然後將妳舊的_posts文件夾中的所有帖子文件復制到新文件夾中。 這將會有點乏味,但是妳很可能必須逐壹瀏覽每個帖子文件,並使用新主題所需的任何設置更新其前端內容,並刪除舊主題所需的任何設置但不再使用。

如果妳的文件夾中包含圖像和其他媒體,並且妳的舊網站上的網頁和帖子中使用了該文件夾,請將整個文件夾復制到妳的新網站結構中。 妳的帖子和頁面仍應引用相同的圖片位置,使其能夠繼續顯示在妳的內容中。

包起來

所以這些是妳如何設置Jekyll主題的要點! 這個過程的細節會因主題而異,但妳仍然可以在每種情況下遵循這些基本階段。 讓我們快速回顧這些階段是什麽。

  • 通過提取並運行來快速演示新主題: jekyll serve
  • 安裝任何缺少的依賴項,以防止提供主題。
  • 瀏覽演示網站的前端,記下妳需要學習使用的功能。
  • 瀏覽文件結構,特別是  _layouts文件夾,查看可能需要使用的自定義布局和變量。
  • 創建主題的第二次安裝並清除演示內容頁面,帖子和(可選)圖像。
  • 填寫_config.yml中的設置  以適合妳的網站。 
  • 通過編輯根文件夾中的index.html文件中的前端變量來設置主頁(如果需要)  。
  • 創建具有所需前置事項的頁面降價文件(或從妳的演示網站/現有網站復制並粘貼它們)。
  • 在_posts  文件夾中創建帖子降價文件,並  提供必要的前置事項(或從演示網站/現有網站復制並粘貼)。
  • 執行主題所需的任何額外設置,例如創建類別模板。

我希望本教程能夠幫助妳自信地解決建立具有自定義主題的新Jekyll網站或將現有網站的主題切換到新主題的問題。 

有關使用Jekyll的全面指導,請查看Guy Routledge的課程:

感謝妳的閱讀,期待下壹場再見!

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.