iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 16
1

經過了前面兩篇新增了 markdown-it 和 highlight.js,
今天來開發 TheMarkdown 元件,
因為所需要的套件和設定都已經在前兩篇完成,
所以可以專注在開發自己偏好的樣式。

TheMarkdown 目的為將 markdown 轉換為 html,
為了避免太過頻繁的渲染畫面,引入 lodash 的時候到了,
如果不知道 lodash 是什麼的,
這邊推薦我去年挑戰失敗的鐵人賽系列文: 每天學一個 Lodash.js 的函式

npm 安裝 lodash

這篇只會用到 debounce,之後的章節也會處理 lodash 的 tree-shaking。
在元件 TheMarkdown 中適時的使用了 lodash 的 debounce,為避免太頻繁的渲染。

npm i lodash

使用 plop 新建元件 TheMarkdown

npm run plop
# 輸入 TheMarkdown

截圖:

016-005

這樣就輕鬆建立好一個新的元件了。

開始開發 TheMarkdown 元件

template(pug):

template 這個部分非常簡單,基本上就是透過 v-html
並將 markdown 編譯過後的 html(這邊是變數 md) 放入。

016-001

script:

先於第一行引入 lodash/debounce,
只接受一個 props 為 markdownText,
每當 markdownText 改變時會執行 updateMarkdown 更新畫面,
但仔細看 updateMarkdown 為一個 debounce 的函式,
且將 delay 設定為 1000 毫秒,
意思是說需要等到 markdownText 停止改變後 1000 毫秒,
畫面才會真正被渲染。
這有什麼好處?
好處是不會在我們打文章時,每輸入一個字就渲染一次,可以節省一些沒必要的運算。

注意:this.updateMarkdown 不能寫在 methods 中。

016-002

style(stylus):

以下是將 markdwon 產出的 html 加上客制樣式。

第一行引入了 vuetify 的 color,可以直接使用定義好的顏色變數。

分別設定了:

  • 連結(a)的顏色
  • 標題(h1, h2, h3, h4, h5, h6),設定斷行和字體大小及顏色
  • 段落(p),字體大小及顏色

...等等。

016-003

016-004

storybook 截圖:

接連兩天的黑畫面後,終於有可以 demo 的畫面啦!
以下是用 storybook demo 的元件 TheMarkdown 可以有的樣子。
當然也可以在文章最後 clone 這個 branch,就可以看到完整的 demo。

016-006

016-007

016-008

程式碼放在以下 branch:

016-TheMarkdown

指令:

git clone -b 016-TheMarkdown --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install
npm run storybook

上一篇
#15 套件安裝及設定: highlight.js 使用與 markdown-it-highlightjs 自定義套件撰寫
下一篇
#17 元件開發: ThePostPreview (default & admin 模式)
系列文
用 Nuxt.js 2.0, Vuetify, Storybook, Firebase 建一個 Blog30

尚未有邦友留言

立即登入留言