【🍚 前端大食堂】掘金主題橫向評測及氫主題Hydrogen

🧪 前端實驗室 將做爲一些前端解決方案的分類，🍚 前端大食堂 將專一於橫向對比和評測，📔 前端小筆記 則是對一些前端基礎知識的總結

從 11 月開始，掘金編輯器就支持主題啦^官方發文，具體的使用方法也看能夠參考這篇文章或者這篇文章。這裏還有熱心掘金 er 作的一個掘金主題開發工具，我也是藉助這個工具完成 Hydrogen 氫 主題。

這篇文章主要仍是作一次 掘金主題橫向評測 ，評測範圍爲寫這篇文章時的已公開的主題，有些主題也有可能在這篇文章寫的時候也在不斷更新，你們以最新的版本爲準。

我本身也作了一款主題（Hydrogen 氫），我會先簡單介紹一下這款主題的設計理念，而後再橫向地截圖測評掘金的幾款主題。

✨ Hydrogen 氫

氫是元素週期表裏最靠前的元素，氫氣同時也是氣體中最輕的，Hydrogen 這款主題的設計思想，就是在不作大量的顏色定製的基礎上，優化目前掘金文章的閱讀體驗。具體的設計細節，你們能夠看第二部分的評測環節，也能夠將 Hydrogen 氫 應用於你的文章上看看效果，但願各位看官能喜歡 Hydrogen 並用得舒服 😘。

固然這款主題還在不斷完善的階段，各位若是有什麼意見，能夠直接在掘金上私信我或者在該文章下評論，我會虛心聽取各位的建議。

🧪 幾款掘金主題橫向測評

文本 ( h1 ~ h3 & p)

smartblue 和 channing-cyan 關於這塊的改動仍是很是明顯的，特別是對 h1 元素的改動，其他主題基本上都是顏色的改動。

hydrogen 在這塊的改動也比較剋制，針對掘金原主題 h1 、 h2 、 h3 只能經過字號辨識的問題，爲 h1 h2 增長了一些裝飾，讓讀者可以在閱讀的時候，能清晰地感知到各個層級。（h2在鼠標懸浮時，左側的裝飾條顏色會變爲掘金的主題藍）

連接 ( a )

關於連接元素，這裏你們的改動除去顏色外大同小異，挺多采用了下劃線來加強閱讀效果。

hydrogen 爲何會有一個連接圖標放在尾部呢？是由於我常常在掘金看到沒有文本的連接，只有一條淡淡的下劃線表示這裏存在一條鏈接，同時仍是但願讀者能在第一時間就能識別的連接元素，因此增長了掘金網站裏原本就存在的連接圖標。下劃線也加了一個過渡效果哈。

代碼 ( code )

channing-cyan 看上去可能會有些模糊，由於兩種顏色的對比度不太夠, fancy 去除了背景色。

hydrogen 和 cyanosis 都採用了加強對比度的配色方案，這樣看上去會更清晰一些。

引用 ( blockquote )

除去顏色改動以外，channing-cyan 增長了半透明的效果，這樣嵌套的引用塊就能清晰地看到它的邊界，問題在於背景的方格線會透到引用塊裏。smartblue 的配色已經和其主題色不太搭了，cyanosis 的效果看上去最清爽。

hydrogen 也使用半透明的背景方案，可是沒有方格線的困擾，顯得會很是乾淨，同時控制了它的上下填充也在一個較窄的範圍。

表格 ( table )

表格是一個不過高頻使用的元素，看得出你們對錶格元素的適配還不太完善，好比 fancy 和 smartblue 的背景色因爲透明，後面的方格線會透到表格裏。

hydrogen依舊是很是剋制的改動，加粗了邊框，讓你們可以更清晰地分辨它的邊界。

分割線 ( hr )

emmm，你們都是顏色的改動。

hydrogen 在這裏有一個很是特別的改動(好像還沒更新到服務器上，你們能夠耐心等待)，加入了咱們熟悉的掘金圖標，儀式感十足，很是適合在文章末尾或者文章中間插入分割線時使用。

展開元素 ( details & summary )

目前你們都沒對這個作出完善，因此沒作橫向測評，只放了hydrogen的效果。

這個很是適合一些面經或者問答類的文章。

你們能夠在下方直接看這個效果:

這裏是一個問題：System Requirements

這裏是答案：Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.

📰 幾款主題總體效果橫向對比

主題預覽

這裏先放其他各個主題的總體效果截圖，你們能夠點擊圖片放大查看細節。

juejin	github

smartblue	cyanosis

channing-cyan	fancy

hydrogen 預覽

相關文章

1. 掘金編輯器支持 Markdown 主題自定義啦
2. 林小帥 - 手摸手教你開發掘金文章主題
3. 林小帥 - 如何使用掘金文章主題？

喜歡這篇文章的童鞋，請一鍵三連哈 👍❤️⭐~~

---

1. juejin.cn/post/689333…↩