為開發人員，我們依賴于靜態分析工具來檢查、lint(分析)和轉換我們的代碼。我們使用這些工具來幫助我們提高生產效率并生成更好的代碼。然而，當我們使用markdown編寫內容時，可用的工具就很少。

在本文中，我們將介紹如何開發一個Markdown擴展來解決在使用Markdown管理Django站點中的內容時遇到的挑戰。

你認為他們有linter嗎？

照片來自Pexels,由mali maeder拍攝

問題

像每個網站一樣，我們在主頁、FAQ部分和“關于”頁面等地方都有不同類型的(大部分)靜態內容。很長一段時間以來，我們都是在Django模板中直接管理這些內容的。

當我們最終決定是時候將這些內容從模板轉移到數據庫中時，我們認為最好使用Markdown。從Markdown生成HTML更安全，它提供了一定程度的控制和一致性，并且對于非技術用戶來說更容易處理。隨著我們轉移過程的進展，我們注意到我們遺漏了一些東西:

內部鏈接

當URL更改時，鏈接到內部頁面的鏈接可能會中斷。在Django模板和視圖中，我們使用了reverseand {% url %}，但是這在普通的Markdown中是不可用的。

在不同環境之間進行復制

絕對內部連接不能在不同環境之間進行復制。這可以使用相對鏈接來解決，不過目前沒有開箱即用的增強這一點的方法。

無效鏈接

無效鏈接會損害用戶體驗，并導致用戶質疑整個內容的可靠性。這并不是Markdown獨有的東西，只不過HTML模板是由對URL有一定了解的開發人員維護的。另一方面，Markdown文檔是為非技術寫作人員設計的。

前期工作

當我研究這個問題時，我搜索了Python linters、Markdown預處理器和擴展來幫助生成更好的Markdown。結果都不是很好。一個引人注目的方法是使用Django模板來生成Markdown文檔。

使用Django模板預處理Markdown

使用Django模板，你可以使用諸如url之類的模板標記來反向查詢URL名稱，并配合使用條件、變量、日期格式和所有其他Django模板特性。這種方法本質上是使用Django模板作為Markdown文檔的預處理程序。

我個人認為這可能不是非技術作家的最佳解決方案。另外，我擔心提供對Django模板標記的訪問可能是危險的。

使用 Markdown

對這個問題有了更好的理解之后，我們準備在Python中更深入地研究Markdown。

將Markdown轉換為HTML

要在Python中開始使用Markdown，我們先安裝markdown包：

接著，創建一個Markdown對象并使用其函數將一些Markdown轉換成HTML：

你現在可以在你的模板中使用這個HTML代碼片段。

使用Markdown擴展

基本的Markdown處理器提供了生成HTML內容的基本要素。對于更“新奇”的選項，Python markdown包包含了一些內置擴展。一個流行的擴展是“extra”擴展，除了其他東西之外，它增加了對隔離代碼塊的支持:

為了使用我們獨特的Django功能擴展Markdown，我們將開發自己的擴展。

創建一個Markdown擴展來處理內聯鏈接

如果你查看源代碼，你將看到要將markdown轉換為HTML, Markdown會使用多種不同的處理器。一種類型的處理器是內聯處理器。內聯處理器會匹配特定的內聯模式，如鏈接、反引號、粗體文本和帶下劃線的文本，并將它們轉換為HTML。

我們的Markdown擴展的主要目的是驗證和轉換鏈接。因此，我們最感興趣的內聯處理器是LinkInlineProcessor。這個處理器以[Haki的網站](https://hakibenito.com)的形式獲取markdown ，解析它并返回一個包含鏈接和文本的元組。

為了擴展該功能，我們擴展了LinkInlineProcessor并創建了一個Markdown.Extension, 我們用它來處理鏈接:

我們來將這段代碼分解一下：:

• DjangoUrlExtension擴展注冊了一個名為DjangoLinkInlineProcessor的內聯鏈接處理器。這個處理器將取代任何其他現有的鏈接處理器。

• 內聯處理器DjangoLinkInlineProcessor擴展了內置的LinkInlineProcessor，并在它處理的每個鏈接上調用clean_link函數。

• clean_link函數接收一個鏈接和一個域名，并返回一個轉換后的鏈接。這就是我們要插入我們的實現的地方。

如何獲得網站域名

要識別到你自己網站的鏈接，你必須知道你的網站的域名。如果你正在使用Django的sites框架，那么你可以使用它來獲取當前域名。

我沒有把它包含在我的實現中，因為我們沒有使用sites框架。相反，我們在Django設置中設置了一個變量。

獲取當前域名的另一種方法是使用HttpRequest對象。如果內容只在你自己的站點中被編輯，你可以嘗試從請求對象中插入站點域名。這可能需要對你的實現進行一些更改。

要使用該擴展，請在初始化一個新的Markdown實例時添加它:

太好了，這個擴展已經被使用了，我們準備進入有趣的部分了！

驗證和轉換Django鏈接

既然我們得到了在所有鏈接上調用clean_link的擴展，那我們可以來實現我們的驗證和轉換邏輯。

驗證mailto鏈接

要開始工作，我們將從一個簡單的驗證開始。mailto鏈接對于使用預定義的收件人地址、主題甚至消息正文打開用戶的電子郵件客戶端非常有用。

一個常見的mailto鏈接是這樣的:

這個鏈接將打開你的電子郵件客戶端，并設置成撰寫一封主題行為“我需要幫助!”的新電子郵件給“support@service.com”。

mailto鏈接不一定非要包含電子郵件地址。如果你看一看這篇文章底部的“分享”按鈕，你會發現像這樣的一個mailto鏈接:

這個mailto鏈接沒有包含收件人，僅包含了主題行和消息正文。

既然我們已經很好地理解了mailto鏈接是什么樣子的，我們就可以向clean_link函數添加第一個驗證:

為了驗證mailto鏈接，我們向clean_link中添加了以下代碼:

• 檢查鏈接是否以mailto:開頭，以識別相關鏈接。

• 使用正則表達式將鏈接分割到它的組件。

• 從mailto鏈接中刪除實際的電子郵件地址，并使用Django的EmailValidator驗證它。

注意，我們還添加了一種名為InvalidMarkdown的新異常類型。我們定義了自己的自定義異常類型，以將它與markdown本身所引發的其他錯誤區分開來。

自定義錯誤類

我曾經寫過關于自定義錯誤類的文章，為什么它們是有用的，以及你什么時候應該使用它們。

在我們繼續之前，讓我們添加一些測試，看看它的實際效果:

太棒了！按預期的運行了。

處理內部和外部鏈接

既然我們已經了解了mailto鏈接，我們也可以處理其他類型的鏈接:

外部鏈接

• 我們的Django應用程序外部的鏈接。

• 必須包含一個頁面跳轉協議（scheme）:http或https。

• 理想情況下，我們還希望確保這些鏈接沒有被破壞，但我們現在不會這樣做。

內部鏈接

• 到我們的Django應用程序中的頁面的鏈接。

• 鏈接必須是相對的:這將允許我們在不同環境之間移動內容。

• 使用Django的URL名稱而不是一個URL路徑:這將允許我們安全地來回移動視圖，而不必擔心markdown內容中的失效鏈接。

• 鏈接可能包含查詢參數(?)和片段(#)。

SEO

從SEO的角度來看，公共URL不應該改變。當他們這樣做的時候，你應該使用重定向正確地處理它，否則你可能會受到搜索引擎的懲罰。

有了這個需求列表，我們就可以開始工作了。

解析URL名稱

要鏈接到內部頁面，我們希望編寫者提供一個URL名稱，而不是URL路徑。例如，假設我們有這個視圖:

這個頁面的URL路徑是https://example.com/， URL名稱是home。我們想要在我們的markdown鏈接中使用這個URL名稱home，就像這樣:

這將渲染到:

我們還想支持查詢參數和散列：

這將渲染到以下HTML：

在使用URL名稱時，如果我們更改了URL路徑，內容中的鏈接將不會被破壞。要檢查作者提供的href是否是一個有效的url_name，我們可以嘗試reverse它:

URL名稱“home”指向URL路徑“/”。當沒有匹配項時，將會引發一個異常:

在我們繼續之前，當URL名稱包含查詢參數或散列時，會發生什么:

這是有意義的，因為查詢參數和散列不是URL名稱的一部分。

要使用reverse并支持查詢參數和散列，我們首先需要清除值。然后，檢查它是一個有效的URL名稱，并返回包含查詢參數和散列的URL路徑，如果提供了的話:

這個代碼段使用一個正則表達式來以？或#的出現對href進行分割，并返回各部分。

請確保它可以工作:

太了不起了!作者們現在可以在Markdown中使用URL名稱了。它們還可以包括要添加到該URL的查詢參數和片段。

處理外部鏈接

要正確處理外部鏈接，我們需要檢查兩件事:

1.外部鏈接總是提供一個跳轉協議，http:或者https:。

2.阻止到我們自己網站的絕對鏈接。內部鏈接應該使用URL名稱。

到目前為止，我們已經處理了URL名稱和mailto鏈接。如果我們通過了這兩個檢查，這意味著href是一個URL。讓我們從檢查鏈接是否是鏈接到我們自己的網站開始:

函數urlparse會返回一個命名元組，該元組包含URL的不同部分。如果netloc屬性等于site_domain，那么該鏈接就確實是一個內部鏈接。

如果URL實際上是內部的，我們就需要終止。但是，請記住，作者們不一定是技術人員，因此我們希望幫助他們，并提供一個有用的錯誤消息。我們要求該內部鏈接使用URL名稱而不是URL路徑，所以最好讓作者們知道他們提供的路徑的URL名稱。

要獲得一個URL路徑的URL名稱，Django為我們提供了一個名為resolve的函數:

當找到匹配項時，resolve會返回一個ResolverMatch對象，其中包含URL名稱和其他信息。當沒有找到匹配項時，它就會引發一個錯誤:

這實際上就是Django在底層所做的工作，用來確定在一個新請求到來時執行哪個視圖函數。

為了給作者們提供更好的錯誤信息，我們可以使用來自ResolverMatch對象的URL名稱:

當我們識別出內部鏈接時，我們要處理兩種情況:

• 我們沒有識別出這個URL:這個URL很可能是不正確的。請作者檢查該URL是否有錯誤。

• 我們識別出了這個URL: 這個URL是正確的，所以就告訴作者應該使用什么URL名稱。

我們來實際地看一下它:

漂亮!外部鏈接被接受，內部鏈接被拒絕，并帶有一個有用的消息。

要求跳轉協議

我們要做的最后一件事是確保外部鏈接包含一個跳轉協議，要么是http:，要么是https:。讓我們將這最后一部分添加到函數clean_link:

使用解析后的URL，我們可以很容易地檢查跳轉協議。讓我們確保它正在工作:

我們向這個函數提供了一個沒有跳轉協議的鏈接，但是它運行失敗了，并顯示了一條有用的消息。太酷了!

整合代碼

這是clean_link函數的全部代碼：

要了解所有這些特性的一個實際用例是什么樣子的，請看下面的內容:

這將產生以下HTML:

不錯!

結論

我們現在有一個很不錯的擴展，它可以驗證和轉換Markdown文檔中的鏈接!現在，在不同環境之間移動文檔和保持內容整潔要容易多了，最重要的是，可以保持正確和最新!

源碼

你可以在這個gist中找到全部源代碼。（地址：https://gist.github.com/hakib/73fccc340e855bb65f42197e298c0c7d ）

題外話

本文中所描述的功能對我們很有用，但是你可能需要根據自己的需求對它進行調整。

如果你需要一些想法，那么除了這個擴展之外，我們還創建了一個markdown Preprocessor，它允許作者們在markdown中使用常量。例如，我們定義了一個名為SUPPORT_EMAIL的常量，我們像這樣使用它:

該預處理程序將用我們定義的文本替換字符串$SUPPORT_EMAIL，然后才渲染Markdown。

英文原文：https://hakibenita.com/django-markdown
譯者：Nothing

markdown中寫下你的文章，并使用Python將它們轉換成HTML-作者Florian Dahlitz，于2020年5月18日（15分鐘）

介紹

幾個月前，我想開通自己的博客，而不是使用像Medium這樣的網站。這是一個非常基礎的博客，所有的文章都是HTML形式的。然而，有一天，我突然產生了自己編寫Markdown到HTML生成器的想法，最終這將允許我用markdown來編寫文章。此外，為它添加諸如估計閱讀時間之類的擴展特性會更容易。長話短說，我實現了自己的markdown到HTML生成器，我真的很喜歡它！

在本系列文章中，我想向您展示如何構建自己的markdown到HTML生成器。該系列由三部分組成：

• 第一部分（本文）介紹了整個管線的實現。

• 第二部分通過一個模塊擴展了實現的管線，該模塊用于計算給定文章的預計閱讀時間。

• 第三部分演示如何使用管線生成自己的RSS摘要。

這三部分中使用的代碼都可以在GitHub上找到。

備注：我的文章中markdown到HTML生成器的想法基于Anthony Shaw文章中的實現。

項目構建

為了遵循本文的內容，您需要安裝幾個軟件包。我們把它們放進requirements.txt文件。

Markdown是一個包，它允許您將markdown代碼轉換為HTML。之后我們用Flask產生靜態文件。

但在安裝之前，請創建一個虛擬環境，以避免Python安裝出現問題：

激活后，您可以使用pip安裝requirements.txt中的依賴。

很好！讓我們創建幾個目錄來更好地組織代碼。首先，我們創建一個app目錄。此目錄包含我們提供博客服務的Flask應用程序。所有后續目錄都將在app目錄內創建。其次，我們創建一個名為posts的目錄。此目錄包含要轉換為HTML文件的markdown文件。接下來，我們創建一個templates目錄，其中包含稍后使用Flask展示的模板。在templates目錄中，我們再創建兩個目錄：

posts包含生成的HTML文件，這些文件與應用程序根目錄中posts目錄中的文件相對應。

shared包含在多個文件中使用的HTML文件。

此外，我們還創建了一個名為services的目錄。該目錄將包含我們在Flask應用程序中使用的模塊，或者為它生成某些東西。最后，創建一個名為static的目錄帶有兩個子目錄images和css。自定義CSS文件和文章的縮略圖將存儲在此處。

您的最終項目結構應如下所示：

令人驚嘆！我們完成了一般的項目設置。我們來看看Flask的設置。

Flask設置

路由

我們在上一節安裝了Flask。但是，我們仍然需要一個Python文件來定義用戶可以訪問的端點。在app目錄中創建main.py并將以下內容復制到其中。

該文件定義了一個具有兩個端點的基礎版Flask應用程序。用戶可以使用/route訪問第一個端點返回索引頁，其中列出了所有文章。

第二個端點是更通用的端點。它接受post的名稱并返回相應的HTML文件。

接下來，我們通過向app目錄中添加一個__init__.py，將其轉換為一個Python包。此文件為空。如果您使用UNIX計算機，則可以從項目的根目錄運行以下命令：

模板

現在，我們創建兩個模板文件index.html以及layout.html，都存儲在templates/shared目錄中。這個layout.html模板將用于單個博客條目，而index.html模板用于生成索引頁，從中我們可以訪問每個帖子。讓我們從index.html模板開始。

它是一個基本的HTML文件，其中有兩個元標記、一個標題和兩個樣式表。注意，我們使用一個遠程樣式表和一個本地樣式表。遠程樣式表用于啟用Bootstrap[1]類。第二個是自定義樣式。我們晚點再定義它們。

HTML文件的主體包含一個容器，其中包含Jinja2[2]邏輯，用于為每個post生成Bootstrap卡片[3]。您是否注意到我們不直接基于變量名訪問這些值，而是需要將[0]添加到其中？這是因為文章中解析的元數據是列表。實際上，每個元數據元素都是由單一元素組成的列表。我們稍后再看。到目前為止，還不錯。讓我們看看layout.html模板。

如你所見，它比前一個短一點，簡單一點。文件頭與index.html文件很相似，除了我們有不同的標題。當然，我們可以共用一個模板，但是我不想讓事情變得更復雜。

body中的容器僅定義一個h1標記。然后，我們提供給模板的內容被插入并呈現。

樣式

正如上一節所承諾的，我們將查看自定義CSS文件style.css. 我們在static/css中找到該文件，并根據需要自定義頁面。下面是我們將用于基礎示例的內容：

我不喜歡Bootstrap中blockquotes的默認外觀，所以我們在左側添加了一點間距和邊框。此外，blockquote段落底部的頁邊空白將被刪除。不刪除的話看起來很不自然。

最后但并非最不重要的是，左右兩邊的填充被刪除。由于兩邊都有額外的填充，縮略圖沒有正確對齊，所以在這里刪除它們。

到現在為止，一直都還不錯。我們完成了關于Flask的所有工作。讓我們開始寫一些帖子吧！

寫文章

正如標題所承諾的，你可以用markdown寫文章-是的！在寫文章的時候，除了保證正確的markdown格式外，沒有其他需要注意的事情。

在完成本文之后，我們需要在文章中添加一些元數據。此元數據添加在文章之前，并由三個破折號分隔開來---。下面是一個示例文章（post1.md）的摘錄：

注意：您可以在GitHub庫的app/posts/post1.md中找到完整的示例文章。

在我們的例子中，元數據由標題、副標題、類別、發布日期和index.html中卡片對應縮略圖的路徑組成.

我們在HTML文件中使用了元數據，你還記得嗎？元數據規范必須是有效的YAML。示例形式是鍵后面跟著一個冒號和值。最后，冒號后面的值是列表中的第一個也是唯一的元素。這就是我們通過模板中的索引運算符訪問這些值的原因。

假設我們寫完了文章。在我們可以開始轉換之前，還有一件事要做：我們需要為我們的帖子生成縮略圖！為了讓事情更簡單，只需從你的電腦或網絡上隨機選取一張圖片，命名它為placeholder.jpg并把它放到static/images目錄中。GitHub存儲庫中兩篇文章的元數據包含一個代表圖像的鍵值對，值是placeholder.jpg。

注意：在GitHub存儲庫中，您可以找到我提到的兩篇示例文章。

markdown到HTML轉換器

最后，我們可以開始實現markdown to HTML轉換器。因此，我們使用我們在開始時安裝的第三方包Markdown。我們先創建一個新模塊，轉換服務將在其中運行。因此，我們在service目錄中創建了converter.py。我們一步一步看完整個腳本。您可以在GitHub存儲庫中一次查看整個腳本。

首先，我們導入所需的所有內容并創建幾個常量：

ROOT指向我們項目的根。因此，它是包含app的目錄。

POSTS_DIR是以markdown編寫的文章的路徑。

TEMPLATE_DIR分別指向對應的templates目錄。

BLOG_TEMPLATE_文件存儲layout.html的路徑。

INDEX_TEMPLATE_FILE是index.html

BASE_URL是我們項目的默認地址，例如。https://florian-dahlitz.de.默認值（如果不是通過環境變量DOMAIN提供的話）是http://0.0.0.0：5000。

接下來，我們創建一個名為generate_entries的新函數。這是我們定義的唯一一個轉換文章的函數。

在函數中，我們首先獲取POSTS_DIR目錄中所有markdown文件的路徑。pathlib的awesome glob函數幫助我們實現它。

此外，我們定義了Markdown包需要使用的擴展。默認情況下，本文中使用的所有擴展都隨它的安裝一起提供。

注意：您可以在文檔[4]中找到有關擴展的更多信息。

此外，我們實例化了一個新的文件加載程序，并創建了一個在轉換項目時使用的環境。隨后，將創建一個名為all_posts的空列表。此列表將包含我們處理后的所有帖子。現在，我們進入for循環并遍歷POSTS_DIR中找到的所有文章。

我們啟動for循環，并打印當前正在處理的post的路徑。如果有什么東西出問題了，這尤其有用。然后我們就知道，哪個文章的轉換失敗了。

接下來，我們在默認url之后增加一部分。假設我們有一篇標題為“面向初學者的Python”的文章。我們將文章存儲在一個名為python-for-beginners.md,的文件中，因此生成的url將是http://0.0.0.0:5000/posts/python-for-beginners。

變量url_html存儲的字符串與url相同，只是我們在末尾添加了.html。我們使用此變量定義另一個稱為target_file.的變量。變量指向存儲相應HTML文件的位置。

最后，我們定義了一個變量md，它表示markdown.Markdown的實例，用于將markdown代碼轉換為HTML。您可能會問自己，為什么我們沒有在for循環之前實例化這個實例，而是在內部實例化。當然，對于我們這里的小例子來說，這沒有什么區別（只是執行時間稍微短一點）。但是，如果使用諸如腳注之類的擴展來使用腳注，則需要為每個帖子實例化一個新實例，因為腳注添加后就不會從此實例中刪除。因此，如果您的第一篇文章使用了一些腳注，那么即使您沒有明確定義它們，所有其他文章也將具有相同的腳注。

讓我們轉到for循環中的第一個with代碼塊。

實際上，with代碼塊打開當前post并將其內容讀入變量content。之后調用_md.convert將以markdown方式寫入的內容轉換為HTML。隨后，env環境根據提供的模板BLOG_TEMPLATE_FILE（即layout.html如果你還記得的話）渲染生成的HTML。

第二個with 代碼塊用于將第一個with 代碼塊中創建的文檔寫入目標文件。

以下三行代碼從元數據中獲取發布日期（被發布的日期），將其轉換為正確的格式（RFC 2822），并將其分配回文章的元數據。此外，生成的post_dict被添加到all_posts列表中。

我們現在出了for循環，因此，我們遍歷了posts目錄中找到的所有posts并對其進行了處理。讓我們看看generate_entries函數中剩下的三行代碼。

我們按日期倒序對文章進行排序，所以首先顯示最新的文章。隨后，我們將文章寫到模板目錄一個新創建的index.html文件中。別把index.html錯認為templates/shared目錄中的那個。templates/shared目錄中的是模板，這個是我們要使用Flask服務的生成的。

最后我們在函數generate_entries之后添加以下if語句。

這意味著如果我們通過命令行執行文件，它將調用generate_entries函數。

太棒了，我們完成了converter.py腳本！讓我們從項目的根目錄運行以下命令來嘗試：

您應該看到一些正在轉換的文件的路徑。假設您編寫了兩篇文章或使用了GitHub存儲庫中的兩篇文章，那么您應該在templates目錄中找到三個新創建的文件。首先是index.html，它直接位于templates目錄中，其次是templates/posts目錄中的兩個HTML文件，它們對應于markdown文件。

最后啟動Flask應用程序并轉到http://0.0.0.0:5000。

總結

太棒了，你完成了這個系列的第一部分！在本文中，您已經學習了如何利用Markdown包創建自己的Markdown to HTML生成器。您實現了整個管線，它是高度可擴展的，您將在接下來的文章中看到這一點。

希望你喜歡這篇文章。一定要和你的朋友和同事分享。如果你還沒有，考慮在Twitter上關注我@DahlitzF或者訂閱我的通知，這樣你就不會錯過任何即將發表的文章。保持好奇心，不斷編碼！

參考文獻

Bootstrap （http://getbootstrap.com/）

Primer on Jinja Templating （https://realpython.com/primer-on-jinja-templating/）

Bootstrap Card （https://getbootstrap.com/docs/4.4/components/card/）

Python-Markdown Extensions （https://python-markdown.github.io/extensions/）

Tweet

英文原文：https://florian-dahlitz.de/blog/build-a-markdown-to-html-conversion-pipeline-using-python
譯者：阿布銩