iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 26
0
Modern Web

透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 系列 第 26

來用 Vue 玩弄 Markdown 囉

來用 Vue 玩弄 .md

VuePress 有一個滿有趣的機制,我認為也是一個很有趣的特色,其實這系列剛開始的介紹篇就有提到過了,猜到我要說什麼了嗎?沒錯,就是...

VuePress 是可以直接在 .md 中使用 Vue 語法的

不過究竟如何使用呢?


.vue 一樣有 <script><style> 區塊

看到這個標題有沒有覺得奇怪呢?正常的 .vue 組件其實有三個區塊的,那 <template> 跑哪去了呢?

其實答案超單純的, 整個 .md 其實都是 <template> 的範圍喔!只要你有需要插入任何 HTML 的標籤或者 Vue 的模板語法,都可以直接寫在文件中,至於寫在文件的什麼位置,就看你希望在哪裡用到囉!

像是下面這樣,就會在兩段文字段落中插入一個放大鏡的 icon 囉:

## 約定大於配置

「約定大於配置」(convention over configuration),是一種軟體開發的設計模式,目的是在減少開發人員需要做的決定,既有簡單的好處,而又不失靈活性。

<v-icon>mdi-magnify</v-icon>

簡單來說就是:如果沒有特殊的需求,只要稍微了解一下專案的結構就可以開始專注於內容主題的創作。

可以直接這樣使用的前提是 <v-icon> 組件的存放位置在 theme/global-components ,或是有用其他方式註冊組件。

範例中使用的 <v-icon>Vuetify.js 這個 UI 套件所提供的組件之一,已經將組件全域註冊所以可以直接使用。


<script><style> 區塊的擺放

不過不同於模板語法可以隨處插入使用,我建議 <script><style> 還是放在檔案的結尾處比較好,能避免在單一檔案不小心重複設置好幾個區塊的狀況,而寫法就與在寫 Vue 組件類似:

<template>
  <component v-if="dynamicComponent" :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted () {
    import('./lib-that-access-window-on-import').then(module => {
      this.dynamicComponent = module.default
    })
  }
}
</script>

<style lang="stylus">
  .title
    font-size: 20px
</style>

注意在編譯階段沒有 window

因為這些處理的過程,都是透過 node.js 來進行的,還沒有真正的在瀏覽器上執行,所以編譯的 .md.vue 都一樣,不要不小心用到 window 這類以瀏覽器執行時才有的 API 了。

所以如果遇到一個組件在運作時,會直接性的操作到瀏覽器 API 或 DOM ,那請先用 <ClientOnly> 的標籤包起來才可以喔,這樣這個組件就只會在瀏覽器中才運行了。

<ClientOnly>
  <NonSSRFriendlyComponent/>
</ClientOnly>

上一篇
VuePress 的全域計算屬性
下一篇
不會程式也能用 VurPress 玩 JAMStack 架設網站(1)
系列文
透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 30

尚未有邦友留言

立即登入留言