我們已經成功地在本地搭建了一個博客網站，它使用的是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 = True

2.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；

支持以下方式生成文章目錄：

在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

二、從零開始搭建自己的靜態博客 -- 主題篇

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. 預覽

return -1 和 255

Python 中的函數裝飾器和閉包

速度測試：playwright vs playwright-python

pytest-pyppeteer：在pytest中運行pyppeteer

一、【pytest實戰--Web測試】搭建環境

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

二、從零開始搭建自己的靜態博客 -- 主題篇

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. 預覽

2.2.2. 更新`Font Awesome`的版本

2.2.3. 使用`Bootstrap`的樣式

3. 完整的`pelicanconf.py`文件