Day 28 : HackMD 客製佈景主題整理

• 您知道 HackMD 可以自製 CSS 模板，打造佈景主題嗎? 因為 HackMD 編輯內文時，可以透過<style></style>撰寫 CSS 模板，就可以打造自己風格的筆記樣式。
• 再加上 HackMD 可以透過 {%hackmd noteid %} 語法嵌入到不同的筆記裡，換言之，只要短短一行嵌入碼就可以改變您筆記的風格，達到如同個人部落格的效果。

在哪裡找主題?

• https://hackmd.io/@themes
• 官方說明
• 有意無意找到的網友版型
• 自製!!

主題介紹與範例

• Dark 佈景主題

  • 在文件插入{%hackmd BJrTq20hE %}，來自@yukai、@MaxWu
  • 或{%hackmd hackmd-dark-theme %}，兩個效果不一樣，DEMO
    

• Notion 佈景主題

  • {%hackmd @themes/notion %}，就會一副Notion樣，DEMO
    

• OrangeHeart 佈景主題

  • {%hackmd @themes/orangeheart %}，DEMO
    

• Dracula 佈景主題

  • {%hackmd @themes/dracula %}，DEMO
    

• Conversational 對話式佈景主題

  • {%hackmd @yukai/conversational-theme %}，DEMO
    
  • 使用方法：
    • 文件插入 {%hackmd @yukai/conversational-theme %}
    • 以 --- 分隔線來區隔不同人的對話，分隔線後第一個段落會被當成講者。
    • 兩行---+---分隔之後就不會變成對話。
      

• Medium 佈景主題

  • {% hackmd @yukai/medium-theme %} DEMO
    

• 中文直書的主題

  • {%hackmd SkPurArK4 %} DEMO
  • 此主題僅供「預覽模式」看到最終成果，不能編輯+預覽喔~
    

• 毛毛的前端筆記:

  • theme-Wood-Fired 原始碼
  • theme-Night-Sidebar 原始碼

• 如果要客製版型，可以參考上述的模板修改 CSS 樣式，可以玩得很開心唷!

分享今日簡報，以及至今已公開的所有簡報，供您一次瀏覽!