zola/docs/content/themes/float/index.md
Vincent Prouillet d1ca1e3e3e
Update themes gallery (#1153)
Co-authored-by: GitHub Action <action@github.com>
2020-09-02 19:34:02 +02:00

3.8 KiB
Raw Blame History

+++ title = "Float" description = "An elegant blog theme" template = "theme.html" date = 2020-09-02T11:42:41+05:30

[extra] created = 2020-09-02T11:42:41+05:30 updated = 2020-09-02T11:42:41+05:30 repository = "https://gitlab.com/float-theme/float.git" homepage = "https://float-theme.netlify.app/" minimum_version = "0.11.0" license = "MIT" demo = ""

[extra.author] name = "Leon" homepage = "https://exp2.uniuni.space/" +++

![Float](content/blog/2020-06-14-Float theme for Zola/Float.png)

English

Float 是一款為 Zola 設計的佈景主題。

[[TOC]]

特色

  • 依據不同的螢幕尺寸提供最佳化版面,從小尺寸到大尺寸都可獲得優秀的閱讀體驗。
  • 文章卡片提供兩種卡片尺寸,重點文章可採用更醒目的寬版卡片。
  • 文章卡片配圖可自行指定,未指定者使用 Unsplash Source 的隨機圖片。
  • 使用 Zola 的 resize_image() 自動產生適用於 DPR 1.0 ~ 3.0 的圖片,卡片配圖會由瀏覽器依據設備之 DPR 自動選用最佳尺寸的圖片。
  • 圖片啟用延遲載入,縮短頁面載入時間。
  • 預設埋入 HTML SEO 標籤、Open GraphTwitter Cards 標籤。
  • 整合 Google Analytics
  • 整合 Google AdSense
  • 版面為 AdSense 自動廣告最佳化,不會因自動廣告的寬度不一而破版。
  • 整合 LikeCoin
  • 整合 utterances,利用 GitHub issue 作為留言系統。

安裝與啟用

在您的 Zola 專案資料夾內:

cd themes
git clone git@gitlab.com:float-theme/float.git

編輯您的 config.toml指定 Float 作為佈景主題:

theme = "float"

編輯您的 config.toml加入 tags 作為分類系統:

taxonomies = [
    {name = "tags", paginate_by = 10},
]

複製 float/static/ 的所有子資料夾與檔案到您的 static/

cp -r themes/float/static/* static/

複製 float/content/ 的所有子資料夾與檔案到您的 content/

cp -r themes/float/content/* content/

使用 Float

文章與配圖

文章皆以資料夾的方式存在,如下例:

content/
└── blog/
     └── 2020-06-21-Float theme for Zola/
          ├── index.md
          ├── pic1.png
          ├── pic2.png
          └── qa_report.pdf

文章為 index.md文內的配圖或其它檔案也是放在文章資料夾內。

Front-matter

Front-matter 請參照下列註解說明:

title = "Float theme for Zola"
description = "Float features and usage guide"
draft = false
[taxonomies]
tags = ["Float", "Zola"]
[extra]
feature_image = "pic1.png" # 卡片圖片。
feature = true # 是否為重點文章,重點文章會以寬版卡片顯示。

客製化

可客製化設定大多可以在 config.toml 的 [extra] 區段做設定:

[extra]
copyright = ""

web_fonts = "<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;700&display=swap'>"

google_analytics = false
# google_analytics_id = "UA-XXXXXX-X"

google_adsense = false
# google_adsense_id = "ca-pub-XXXXXXXXXXXXXXXX"

twitter_account = "@xxx"

likecoin = false
# likecoin_name = "xxx"

utterances = false
# utterances_repo = "xxx/xxx"

字體

字體的 CSS 位於 float/sass/font.scss欲更換字體把 float/sass/font.scss 複製到自己的 sass/font.scss並修改之。

已知問題

  • 分頁設定皆須設為 10 篇分頁。因為 Zola 的 get_section() 無法取得該 section 的分頁設定。