二、從零開始搭建自己的靜態部落格 -- 主題篇
阿新 • • 發佈：2019-11-27
目錄
- 1. 下載主題
- 2. 使用主題
- 2.1. 基本配置
- 2.2. 高階配置
- 2.2.1. 配置網站圖示
- 2.2.2. 更新
Font Awesome的版本 - 2.2.3. 使用
Bootstrap的樣式
- 2.3. 定製主題
- 2.3.1. 新增返回頂部連結
- 2.3.2. 支援目錄
- 2.3.3. 漢化
- 3. 完整的
pelicanconf.py檔案 - 4. 預覽
我們已經成功地在本地搭建了一個部落格網站，它使用的是pelican預設的notmyidea主題；
如果你不太記得了，可以再看看這篇文章：一、從零開始搭建自己的靜態部落格 -- 基礎篇；
其實，pelican擁有眾多的開源主題庫，我們可以在pelican主題倉庫上選擇一個自己喜歡的主題應用到專案中；
http://pelicanthemes.com/網站提供線上預覽主題的功能；
我選擇的是pelican-alchemy主題，它的線上Demo是：https://nairobilug.github.io/pelican-alchemy/；
下面，我們來一步一步的將其應用到我們的專案中；
1. 下載主題
我粗略的瀏覽了一下pelican-alchemy的文件和issue列表，考慮到後續有可能會做一些修改，所以我決定先將其fork到自己的倉庫；
然後，我在專案根目錄新建一個目錄themes/用於存放所有下載的主題，然後將fork後的pelican-alchemy作為一個獨立的子倉庫克隆到目錄下：
λ mkdir themes
λ git submodule add [email protected]:luizyao/pelican-alchemy.git themes/pelican-alchemy注意：
git submodule add <url> <path>命令是將一個倉庫新增到指定的目錄下作為獨立的子倉庫；如果你仔細觀察，會發現我們的根目錄下多了一個檔案：
.gitmodules，它記錄了子倉庫的資訊；例如：我們專案中這個檔案的內容是：
[submodule "themes/pelican-alchemy"] path = themes/pelican-alchemy url = [email protected]:luizyao/pelican-alchemy.git常用的和子倉庫的相關的操作有下面幾個：
克隆父倉庫時，連同子倉庫一起克隆：
git clone --recurse-submodules <URL> <directory>檢視父倉庫中所有子倉庫的狀態：
λ git submodule status 3381c5031bf30d3b1212619b662898f178d695f1 themes/pelican-alchemy (v2.1-43-g3381c50)
3381c5031bf30d3b1212619b662898f178d695f1是對當前Commit Id的SHA-1加密字串；刪除子倉庫：
git rm <submodule path> && git commit再手動刪除
.git/modules/<name>/目錄如果你想了解更多關於
git submodule的內容，可以通過git submodule --help閱讀它的官方文件；
2. 使用主題
2.1. 基本配置
# pelicanconf.py
# 主題所在的相對目錄
THEME = 'themes/pelican-alchemy/alchemy'
# 副標題
SITESUBTITLE = '戒驕戒躁 砥礪前行'
# 頭像
SITEIMAGE = '/images/profile.png width=200 height=200'
# 友鏈
LINKS = (
('pytest-chinese-doc', 'https://luizyao.github.io/pytest-chinese-doc/'),
)
# 程式碼高亮的樣式
PYGMENTS_STYLE = 'friendly'
# 使用 Bootswatch 樣式：https://bootswatch.com/
BOOTSTRAP_CSS = 'https://cdn.bootcss.com/bootswatch/4.3.1/lux/bootstrap.min.css'
# 生成 sitemap.xml 檔案，它是一個對爬蟲友好的檔案，方便搜尋引擎抓取網站頁面
DIRECT_TEMPLATES = ['index', 'tags', 'categories', 'authors', 'archives', 'sitemap']
SITEMAP_SAVE_AS = 'sitemap.xml'
# 構建後的 html 檔案路徑和 URL 標識
ARTICLE_URL = 'posts/{date:%Y}/{date:%m}/{slug}.html'
ARTICLE_SAVE_AS = ARTICLE_URL
DRAFTS_URL = 'drafts/{date:%Y}/{date:%m}/{slug}.html'
DRAFTS_SAVE_AS = ARTICLE_URL
PAGE_URL = 'pages/{slug}.html'
PAGE_SAVE_AS = PAGE_URL
# RSS 訂閱
FEED_ALL_RSS = 'feeds/all.rss.xml'具體細節可以參考：https://github.com/nairobilug/pelican-alchemy/wiki/Settings
2.2. 高階配置
2.2.1. 配置網站圖示
通過線上工具https://realfavicongenerator.net/可以生成適配各種平臺和瀏覽器的favicon檔案：
下載上面生成的favicon包，並解壓到專案content/extras目錄下：
λ ls content/extras/
android-chrome-192x192.png favicon.ico safari-pinned-tab.svg
android-chrome-384x384.png favicon-16x16.png site.webmanifest
apple-touch-icon.png favicon-32x32.png
browserconfig.xml mstile-150x150.png修改模版中的base.html檔案：
<!-- themes/pelican-alchemy/alchemy/templates/base.html -->
{% if RFG_FAVICONS %}
<link rel="apple-touch-icon" href="{{ SITEURL }}/apple-touch-icon.png" sizes="180x180">
<link rel="icon" type="image/png" href="{{ SITEURL }}/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="{{ SITEURL }}/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="{{ SITEURL }}/manifest.json">
<meta name="theme-color" content="#333333">
{% endif %}
<!-- 改成 -->
{% if RFG_FAVICONS %}
<link rel="apple-touch-icon" href="{{ SITEURL }}/apple-touch-icon.png" sizes="180x180">
<link rel="icon" type="image/png" href="{{ SITEURL }}/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="{{ SITEURL }}/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="{{ SITEURL }}/site.webmanifest">
<link rel="mask-icon" href="{{ SITEURL }}/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
{% endif %}修改pelicanconf.py配置檔案：
# pelicanconf.py
# 在構建中，它們會無損的拷貝到 output 的同名目錄下
STATIC_PATHS = ['extras', 'images', 'css']
# 構建時，extras/android-chrome-192x192.png檔案，拷貝到output/android-chrome-192x192.png，不再是output/extras/android-chrome-192x192.png
EXTRA_PATH_METADATA = {
'extras/android-chrome-192x192.png': {'path': 'android-chrome-192x192.png'},
'extras/android-chrome-512x512.png': {'path': 'android-chrome-512x512.png'},
'extras/apple-touch-icon.png': {'path': 'apple-touch-icon.png'},
'extras/browserconfig.xml': {'path': 'browserconfig.xml'},
'extras/favicon-16x16.png': {'path': 'favicon-16x16.png'},
'extras/favicon-32x32.png': {'path': 'favicon-32x32.png'},
'extras/favicon.ico': {'path': 'favicon.ico'},
'extras/manifest.json': {'path': 'manifest.json'},
'extras/mstile-150x150.png': {'path': 'mstile-150x150.png'},
'extras/safari-pinned-tab.svg': {'path': 'safari-pinned-tab.svg'},
# 自定義樣式
'css/custom.css': {'path': 'theme/css/custom.css'},
}
# 自定義樣式的URL目錄
THEME_CSS_OVERRIDES = ('theme/css/custom.css',)
RFG_FAVICONS = True2.2.2. 更新Font Awesome的版本
pelican-alchemy使用Font Awesome 4.7.0版本，並且使用的是靜態資源的相對引用；
我們將其修改為最新的5.11.2版本的CDN引入，修改主題模版中的base.html檔案：
<!-- themes/pelican-alchemy/alchemy/templates/base.html -->
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/font-awesome.min.css">
<!-- 改成 -->
<link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/fontawesome.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/solid.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/brands.css" rel="stylesheet">除了上面的步驟，我們還有一個額外的工作要做：因為5.x的版本已經不使用fa字首，取而代之的是fas（Solid樣式）和fab（Brands樣式）；
所以，對於主題中那些類似class="fa fa-github"的樣式，應該修改為class="fab fa-github"，主要涉及article.html、index.html和header.html這些檔案；
最後，修改pelicanconf.py檔案中關於ICONS配置的格式，需要額外指定樣式類別：
# pelicanconf.py
# 社交屬性，請到<https://fontawesome.com/icons>網站確定圖示樣式的類別
ICONS = [
('fab', 'github', 'https://github.com/luizyao'),
('fas', 'blog', 'https://www.cnblogs.com/luizyao/'),
('fas', 'rss', 'feeds/all.rss.xml')
]
pelican-alchemy有一個open的issue：https://github.com/nairobilug/pelican-alchemy/issues/69是關於Font Awesome版本的，後續可能會更新到5.x版本，目前issue處於接收反饋的狀態；至於為什麼不使用
CDN，貌似還和偉大的防火牆有關呢。。。I'm sure you've heard of the Great Firewall of China; India, Russia, some African countries are doing similar things. You never know which URL or IP might become inaccessible
2.2.3. 使用Bootstrap的樣式
我們可以為特定型別的元素新增Bootstrap的官方樣式；例如：為每個img元素新增class = "img-fluid"的樣式；
首先，安裝依賴包：
# beautifulsoup4為外掛所依賴的第三方包
λ pipenv install beautifulsoup4然後，下載Bootstrapify外掛：
λ mkdir plugins
λ git submodule add [email protected]:ingwinlu/pelican-bootstrapify.git plugins/pelican-bootstrapify最後，修改pelicanconf.py配置檔案：
# 到哪裡尋找外掛
PLUGIN_PATHS = ['plugins']
# 想要使用的外掛名
PLUGINS = ['pelican-bootstrapify']
# 想要新增的 Bootstrap 樣式
BOOTSTRAPIFY = {
'table': ['table', 'table-striped', 'table-hover'],
'img': ['img-fluid'],
}2.3. 定製主題
下面我們為pelican-alchemy做一些定製化的操作，新增一些新的功能；
2.3.1. 新增返回頂部連結
修改base.html檔案，在<head>中新增如下部分：
<!-- themes/pelican-alchemy/alchemy/templates/base.html -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/scrollup/2.4.1/jquery.scrollUp.min.js"></script>
<script>
$(function () {
$.scrollUp({
scrollText: '<i class="fas fa-2x fa-chevron-circle-up"></i>'
});
});
</script>2.3.2. 支援目錄
我自己寫了一個的外掛，用於替代pelican預設的MarkdownReader，它有以下功能：
使用增強的
markdown解析- pymdownx.extra代替
markdown.extensions.extra； - pymdownx.highlight代替
markdown.extensions.codehilite；
- pymdownx.extra代替
支援以下方式生成文章目錄：
在
markdown文字內的[TOC]標記處生成目錄；通過元資料
toc自定義目錄樣式；例如：{% if article.toc %} <aside class="col-md-4"> <div class="widget widget-content"> <h3 class="widget-title">文章目錄</h3> <div class="toc"> <ul> {{ article.toc | safe }} </ul> </div> </div> </aside> {% endif %}
如果沒配
summary或者summary為空，支援自動擷取開頭部分字元作為摘要；
使用方法：
作為一個子倉庫下載
# 專案根目錄建立目錄 λ mkdir plugins # 下載 λ git submodule add [email protected]:luizyao/pelican-md-reader.git plugins/pelican-md-reader修改
pelicanconf.py配置檔案# pelicanconf.py # 到哪裡尋找外掛 PLUGIN_PATHS = ['plugins'] # 想要使用的外掛名 PLUGINS = ['pelican-md-reader']
更多細節可以參考：pelican-md-reader
2.3.3. 漢化
主要關鍵字漢化；
3. 完整的pelicanconf.py檔案
#!/usr/bin/env python
# -*- coding: utf-8 -*- #
from __future__ import unicode_literals
AUTHOR = 'luizyao'
SITENAME = "luizyao's blog"
SITEURL = ''
PATH = 'content'
DEFAULT_LANG = 'en'
# Feed generation is usually not desired when developing
FEED_ALL_ATOM = None
CATEGORY_FEED_ATOM = None
TRANSLATION_FEED_ATOM = None
AUTHOR_FEED_ATOM = None
AUTHOR_FEED_RSS = None
DEFAULT_PAGINATION = 10
# Uncomment following line if you want document-relative URLs when developing
# RELATIVE_URLS = True
# 修改時區
TIMEZONE = 'Asia/Shanghai'
# 修改預設的時間格式（'%a %d %B %Y'）
DEFAULT_DATE_FORMAT = "%Y-%m-%d %H:%M"
# 為元資料定義預設值
DEFAULT_METADATA = {
# 預設釋出的文章都是草稿，除非在文章元資料中明確指定：Status: published
'status': 'draft',
}
# pelican-alchemy 原有的配置
# 主題所在的相對目錄
THEME = 'themes/pelican-alchemy/alchemy'
# 副標題
SITESUBTITLE = '戒驕戒躁 砥礪前行'
# 頭像
SITEIMAGE = '/images/profile.png width=200 height=200'
# 友鏈
LINKS = (
('pytest-chinese-doc', 'https://luizyao.github.io/pytest-chinese-doc/'),
)
# 程式碼高亮的樣式
PYGMENTS_STYLE = 'friendly'
# 使用 Bootswatch 樣式：https://bootswatch.com/
BOOTSTRAP_CSS = 'https://cdn.bootcss.com/bootswatch/4.3.1/lux/bootstrap.min.css'
# 生成 sitemap.xml 檔案
DIRECT_TEMPLATES = ['index', 'tags', 'categories', 'authors', 'archives', 'sitemap']
SITEMAP_SAVE_AS = 'sitemap.xml'
# 構建後的 html 檔案路徑和 URL 標識
ARTICLE_URL = 'posts/{date:%Y}/{date:%m}/{slug}.html'
ARTICLE_SAVE_AS = ARTICLE_URL
DRAFTS_URL = 'drafts/{date:%Y}/{date:%m}/{slug}.html'
DRAFTS_SAVE_AS = ARTICLE_URL
PAGE_URL = 'pages/{slug}.html'
PAGE_SAVE_AS = PAGE_URL
# RSS 訂閱
FEED_ALL_RSS = 'feeds/all.rss.xml'
# 在構建中，它們會無損的拷貝到 output 的同名目錄下
STATIC_PATHS = ['extras', 'images', 'css']
# 構建時，extras/android-chrome-192x192.png檔案，拷貝到output/android-chrome-192x192.png，不再是output/extras/android-chrome-192x192.png
EXTRA_PATH_METADATA = {
'extras/android-chrome-192x192.png': {'path': 'android-chrome-192x192.png'},
'extras/android-chrome-512x512.png': {'path': 'android-chrome-512x512.png'},
'extras/apple-touch-icon.png': {'path': 'apple-touch-icon.png'},
'extras/browserconfig.xml': {'path': 'browserconfig.xml'},
'extras/favicon-16x16.png': {'path': 'favicon-16x16.png'},
'extras/favicon-32x32.png': {'path': 'favicon-32x32.png'},
'extras/favicon.ico': {'path': 'favicon.ico'},
'extras/manifest.json': {'path': 'manifest.json'},
'extras/mstile-150x150.png': {'path': 'mstile-150x150.png'},
'extras/safari-pinned-tab.svg': {'path': 'safari-pinned-tab.svg'},
# 自定義樣式
'css/custom.css': {'path': 'theme/css/custom.css'},
}
# 自定義樣式的URL目錄
THEME_CSS_OVERRIDES = ('theme/css/custom.css',)
RFG_FAVICONS = True
# 到哪裡尋找外掛
PLUGIN_PATHS = ['plugins']
# 想要使用的外掛名
PLUGINS = ['pelican-bootstrapify', 'pelican-md-reader']
# 想要新增的 Bootstrap 樣式
BOOTSTRAPIFY = {
'table': ['table', 'table-striped', 'table-hover'],
'img': ['img-fluid'],
}
# 社交屬性，請到<https://fontawesome.com/icons>網站確定圖示樣式的類別
ICONS = [
('fab', 'github', 'https://github.com/luizyao'),
('fas', 'blog', 'https://www.cnblogs.com/luizyao/'),
('fas', 'rss', 'feeds/all.rss.xml')
]4. 預覽
https://blog.luizyao.com
Github: https://github.com/luizyao/pelican-blog