在使用這個主題的時候,先看看README裡面寫了什麼,在使用前先讀取README是個好習慣!要完全使用這個主題的所有功能,需要完成5個步驟,以下接續說明:
以下設定都是在原本的專案資料夾中,非主題裡面的資料夾,切記切記!
須在content
資料夾中建立404.html
資料夾,並在資料夾中建立contents.lr
檔案,設定檔案不使用任何model,並指向404.html。404.html/contents.lr
內容如下:
_model: none
---
_template: 404.html
要這樣設定的原因有2個,第1個原因是lektor預設的model為page.ini,如果沒有設定任何model,那就會指向page.ini,並使用page.html來顯示網頁,所以需要設定_model: none
才不會變成讀取page.ini
及page.html
;第2個原因則是404頁面的網址預設為http://127.0.0.1/404.html
,與之前看到的網址http://127.0.0.1/about
不一樣,為了使404網頁有效存取到指定的頁面,才需要在資料夾中包含副檔名。
主頁的設定跟404很像,首先在content
根目錄下建立contents.lr
(預設應該已經有了),不使用任何model
並指向index.html
,因此content/contents.lr
內容如下,原本檔案中如果有資料,全部刪除,留著的話Lektor也讀不到喔:
_model: none
---
_template: index.html
這個功能可以在網頁中加入DISQUS的外掛,讓遊客直接在網頁下方留言,在部落格或是新聞網頁常常看得到。
首先需使用指令安裝:
$ lektor plugins add lektor-disqus-comments
接下來在專案中新增config
資料夾,並在資料夾中建立disqus-comments.ini
,檔案中設定shortname
,值可以自訂,我這邊設定他為disqus
:
shortname = disqus
另外必須在.lektorproject
檔案中完成comments = yes
設定,才會啟動回應功能喔!可參考下面設定結果的內容~
README中還有提供可以在.lektorproject
檔案裡面設定的參數,以下資訊有的就放,沒有就刪除。但是name
、headerusername
、headerhostname
、comments
需要留著,不然頁面會出錯:
[theme_settings]
githubID = your_github
gitlabId = your_gitlab
twitterID = your_twitter
codepenID = your_codepen
linkedInID = your_linkedin
googleplusID = your_googleplus
facebookID = your_facebook
instagramID = your_instagram
telegramID = your_telegram
name = your_name
headerusername = username
headerhostname = hostname
email = your_email
about = info_about_you
profilepicture = profile_picture_asset_url
googleanalytics = your_google_analytics_id
slackURL = https://join.slack.com/...
comments = yes
在assets
資料夾中加入個人頭像的照片,並在.lektorproject
中的profilepicture
設定照片路徑。我在assets/img
中加入個人頭像照片,並命名照片名稱為profile.png
,因此.lektorproject
的profilepicture = img/profile.png
。可參考下面設定結果的內容~
以下是我設定的.lektorproject
內容:
[project]
name = LektorTest_Theme
themes = lektor-theme-nix
[theme_settings]
githubID = HanInfinity
name = 塔塔默
headerusername = Tatamo
headerhostname = Tatamo_host
about = Tatamo
comments = yes
gitlabId = tatamo
profilepicture = img/profile.png
[packages]
lektor-disqus-comments = 0.4.1
完成後的首頁就會變成這樣囉!!
設定完才知道,原來左上角的@ ~ $
是要做成類似終端機的格式,用headerusername@headerhostname - $
模仿命令列的符號。實際的運作邏輯我們下一篇來探討吧!!
CSScoke - 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎
King Tzeng - IoT沒那麼難!新手用JavaScript入門做自己的玩具~
Hina Hina - 陣列大亂鬥
阿斬 - Python 程式交易 30 天新手入門
Clarence - LINE bot 好好玩 30 天玩轉 LINE API
塔塔默 - 用Python開發的網頁不能放到Github上?Lektor說可以!!
Vita Ora - 好 Js 不學嗎 !? JavaScript 入門中的入門。