Markdown

在 Hugo 中嵌入 HTML 到 Markdown

在最長的一段時間後，我從 Blackfriday 切換到默認的 Hugo Markdown 渲染器 Goldmark。我延遲了這個切換的時間，但在版本 0.100 中，他們移除了被棄用的舊版 Markdown 渲染器。不幸的是，這意味著我在 Markdown 中嵌入的所有 HTML 都停止運作。我通過在我的 config.yaml 文件中啟用這個選項來解決這個問題： markup: goldmark: renderer: unsafe: true 或者，在 config.toml 文件中： [markup.goldmark.renderer] unsafe = true

如何使用 Markdown 創建電子書

我的電子書創建流程目前我有15本免費的書籍，我會免費分享給訂閱我的電子報的所有人。其中有些書籍已經出到第二版（關於 JavaScript 和 React 的書籍），因為技術發展迅速，我們必須跟上腳步。第一本書是在2018年出版的。在不久的將來，我打算重新組織我的免費電子書集合，對其中的一些進行修訂，甚至可能新增一些新的書籍。自從我最後一次更新到美妙的[2021 MacBook Pro 14"] (https://flaviocopes.com/macbook-pro-2021-review/)之後，我不得不在我的 Mac 上重新設置我的書籍創建工作流程，所以我趁機寫了這篇文章。我使用一個叫做 honkit 的工具。這是一個叫做 gitbook 的工具的分支，我以前一直在使用它，但是它已經被棄用很長時間了，不再可用。 honkit非常好用。它是一個用於使用 Markdown 創建書籍並生成 PDF / ePub / Mobi 版本的免費工具。我可以更新一本書籍，只需一個命令就可以將它上傳到我的網站，並讓 CloudFlare 進行分發。據我所知，這是迄今為止最簡單的工具，能夠生成所有這些書籍版本。還有其他一些工具，但並不具備所有這些功能。以下是開始使用的方法。創建一個文件夾，並在其中添加一個 book.json 文件 { "author": "你的名字", "title": "書籍標題" } 創建一個垂直的 cover.jpg 圖像，用於封面。如果你還想創建 ePub / Mobi 版本，可以再添加一個 cover_small.jpg。創建一個 SUMMARY.md 文件，用於編寫目錄結構： - [前言](README.md) - [第一章](content/1-first.md) - [第二章](content/2-second.md) 然後添加一個 README.md 文件，這是前言的 Markdown 文件。添加一個 content/1-first.md 文件，這是第一章的 Markdown 文件。...

如何在 Markdown 字串中更改圖片的 URL

最近，我試圖將我的基於 Hugo 的部落格移植到 Next.js（結果並不理想），而在這個過程中遇到了一個問題。 Hugo 允許我在圖片名稱中使用空格，這對於使用截圖並且預設檔名為 Screen Shot 2022-... 是很方便的。但是 Next.js 的 Markdown 則不允許使用空格。因此，我撰寫了一個腳本來將所有的圖片檔名中的空格改為連字符（hyphen）。 "Screen Shot 2022-..." => "Screen-Shot-2022-..." 然後，我將文章的 Markdown 內容替換為改好的名稱。同時，由於 Hugo 允許將文章放在與 Markdown 檔案相同的資料夾中，而 Next.js 則不允許這樣做。因此，我使用了 /public/images/<SLUG>/ 的資料夾形式，將每個文章的圖片設為公共可見。以下是我實現這個功能的程式碼： import matter from 'gray-matter' ... let { data: frontmatter, content } = matter(fileName) const regex = /\!\[(.*?)\]$(.*?)$/gm let matches while ((matches = regex.exec(content)) !== null) { content = content.replace( '](' + matches[2], `](/images/${slug}/${matches[2].replace(/ /g, '-').replace(/\//g, '')}` ) }

如何在 Next.js 中解析 Markdown

我有一個包含 Markdown 內容的欄位，然後我想在 Next.js 的頁面上將其顯示出來。我使用了 marked、dompurify 和 jsdom 。以下是一個在 Next.js 的動態頁面中用於渲染項目描述的示例。請注意，由於 DOMPurify.sanitize() 需要在伺服器端調用，因為它假設我們在 Node.js 環境中，所以我將它放在 getStaticProps() 中： import { useState, useEffect } from 'react' import Head from 'next/head' import Link from 'next/link' import { useRouter } from 'next/router' import { getJob, getJobs } from 'lib/data.js' import prisma from 'lib/prisma' import marked from 'marked' import createDOMPurify from 'dompurify' import { JSDOM } from 'jsdom' export default function Item({ item }) { return <p>{item....

我用來運行這個博客的技術棧

在本文中，我描述了我運行博客的方式網站平台網站托管地點文章發佈文章的工作流程圖片電子報書籍就是這樣！網站平台這個網站是使用Astro搭建的靜態網站。以前我使用Hugo來構建，我喜歡它。不過現在我更喜歡使用JSX創建UI。像Hugo一樣，Astro非常快速，可以生成快速響應的頁面，可以部署在Netlify或Cloudflare Pages等平台上。這就是我所需的一切。網站托管地點我以前使用Netlify來托管，現在改用Cloudflare Pages，因為他們提供免費的無限流量。文章我使用Markdown來撰寫文章。有時候我使用Notion、Bear或VS Code直接撰寫。Markdown是一種非常便攜的格式。發佈文章的工作流程我儘量多發佈文章。以前我每天都會發佈，雖然現在我並不是每天都發佈，但我仍然儘量多發佈。我只是享受這個過程。有時候我在一個項目上工作，一天內就有三個發文的點子，這些都是我在Google上搜索並找到答案的東西。我曾經提前一周或更長時間準備好內容，隨時可以發佈，但現在只有在有內容要發佈時才會發佈。我將所有內容都推送到一個私有的GitHub存儲庫中，通過Git集成與Cloudflare Pages / Netlify同步。每次向GitHub推送時，網站都會更新。圖片我確保所有文章圖片都使用ImageOptim進行了優化，以避免不必要的帶寬使用和提升頁面速度。電子報我有一個電子報。有時候我會發送一封郵件，列出我撰寫的文章以及我創建的任何新資源，這些資源可能很有趣。我使用一個自托管的解決方案叫做Sendy和AWS SES。了解一下為什麼你應該創建電子郵件列表。書籍我撰寫並發布了一系列電子書，可以在我的網站上閱讀或購買PDF或epub格式的書籍。我使用一個名為Honkit的工具生成這些書籍格式。詳細的流程在這裡: https://flaviocopes.com/how-to-create-ebooks-markdown/。到目前為止，我已經寫了15本書，未來還計劃寫更多。就是這樣！我的工具和工作流程總是在不斷發展。我會儘量保持這篇文章的更新。