即然是個人博客，那么絕對不能丟給自己一個大大的輸入框敷衍了事。如果真是這樣，現在就可以宣布項目到此結束了。如今沒人享受用輸入框寫博客。作為一個有追求的程序員，作品就要緊跟潮流。

后來，Markdown 的崛起逐步改變了大家的排版方式。再加上我們其他幾個項目都是面向程序員用戶的，所以遷移到 md 上也是大勢所趨。 ——Vditor文檔

給個人博客嵌入MarkDownb編輯器，即便設備上沒有支持MarkDown格式的文本編輯器，我們仍然能隨時隨地優(yōu)雅的編寫博客。這里的MarkDown組件，選擇了Vditor,由思源筆記團隊開源的瀏覽器端 Markdown 編輯器，MIT開源協(xié)議(幾乎是最為寬松的開源協(xié)議)，感謝思源團隊的無私分享。

為了讓我們的博客有良好的編輯和閱讀體驗，需要做兩件工作：

1. 封裝Vditor編輯器組件
2. 封裝Vditor預覽器組件
   ps: 做好黑夜模式適配

在 src/components/目錄下創(chuàng)建MarkDownEdit.vue、MarkDownRead.vue

封裝Vditor編輯器組件

MarkDownEdit.vue

因為Vditor的初始化完成后，vue無法監(jiān)聽到Vditor對象內參數的變化，所以我們需要用一些小技巧來告訴框架刷新狀態(tài)，以完成黑夜模式的變化。創(chuàng)建一個computed參數active,讓其計算被pinia托管的參數active，一旦active變化，則調用setTheme()方法設置 主題。
這里先設置pinia
在src/stores/目錄下創(chuàng)建themeSwitch.js,內容如下

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'export const useThemeSwitch = defineStore('themeSwitch', () => {const active = ref(false)function changeActive(newActive){this.active = newActive}return { active, changeActive }
})

然后編寫MarkDownEdit.vue

  <script setup >import { ref, onMounted,computed } from 'vue';import Vditor from 'vditor';import 'vditor/dist/index.css';const vditor = ref(null);const props = defineProps(['active'])const active = computed({get(){if(vditor.value!=null){console.log(props.active)const mode = props.active?'dark':'classic'vditor.value.setTheme(mode,mode)}return props.active;},})let content = ''let width = 0;let height = 0;function ReInitVidor() {width = window.innerWidth*0.92  < 600 ? 600 : window.innerWidth*0.92 ;height = window.innerHeight * 0.9;vditor.value = new Vditor('vditor', {mode:'sv',preview:{},icon:'material',height:height,width:width,placeholder:"君子藏器于身，待時而動",counter:{enable:true,},preview:{actions:[]},input:(value) => {content = value},after: () => {// vditor.value is a instance of Vditor now and thus can be safely used herevditor.value.setValue(content);},});}onMounted(() => {window.addEventListener('resize', ReInitVidor)ReInitVidor();});</script>

<template><div style="display: flex;flex-direction: row;justify-content: center;"><!-- 一定要在html的部分插入active,vue框架才會去真正監(jiān)聽并計算active參數--><div hidden>active: {{ active }}</div><div id="vditor" ></div></div></template>

封裝Vditor預覽器組件

<template><div><div hidden>{{active}} </div><div id="vditor" ></div></div></template><script setup >import { onMounted,computed, } from 'vue';import Vditor from 'vditor';import 'vditor/dist/index.css';const props = defineProps(['active'])let active = computed({get(){return props.active;},})const IPreviewOptions = {theme:{current:props.active?"dark":"light"},mode:"dark",speech:{"enable":true}}const mdStr=`## 💡 簡介[Vditor](https://b3log.org/vditor) 是一款瀏覽器端的 Markdown 編輯器，支持所見即所得（富文本）、即時渲染（類似 Typora）和分屏預覽模式。它使用 TypeScript 實現，支持原生 JavaScript、Vue、React、Angular，提供[桌面版](https://b3log.org/siyuan)。`function ReInitVidor() {Vditor.preview(document.getElementById('vditor'),mdStr,IPreviewOptions);}onMounted(() => {addEventListener("resize",ReInitVidor)ReInitVidor();});</script>

使用組件

在src/views/目錄下創(chuàng)建BlogEditView.vue、BlogReadView.vue文件

BlogEditView.vue

<script setup>import MarkDownEdit from '../components/MarkDownEdit.vue';import { useThemeSwitch } from '../stores/themeSwitch';const themeSwitcher = useThemeSwitch()
</script><template><mark-down-edit :active="themeSwitcher.active"></mark-down-edit>
</template>

BlogReadView.vue

因為vditor.preview沒有提供setTheme這種好用的函數。所以我們在active值改變后，要告訴vue框架強制刷新組件。這里使用:key=“”參數，組件會監(jiān)聽key參數是否變化，變化則刷新組件。

<script setup>import MarkDownRead from '../components/MarkDownRead.vue';import { NSpace } from 'naive-ui';import { useThemeSwitch } from '../stores/themeSwitch';const themeSwitcher = useThemeSwitch()
</script>
<template><n-space         style="height: 100%;" justify="center" size="large"><mark-down-read class="blog-read-preview" :key="themeSwitcher.active" :active="themeSwitcher.active"></mark-down-read></n-space>
</template><style>
.blog-read-preview{margin-inline: 15vw;max-width: 900px;
}
</style>

最終效果

編輯器

預覽器

暫時的休息

當前只是一種簡單的封裝，方便組織前端代碼結構，在實現功能時，會按需進一步修改相關代碼。