即然是個人博客，那么絕對不能丟給自己一個大大的輸入框敷衍了事。如果真是這樣，現(xiàn)在就可以宣布項目到此結(jié)束了。如今沒人享受用輸入框?qū)懖┛汀Ｗ鳛橐粋€有追求的程序員，作品就要緊跟潮流。

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

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

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

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

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

封裝Vditor編輯器組件

MarkDownEdit.vue

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

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參數(shù)--><div hidden>active: {{ active }}</div><div id="vditor" ></div></div></template>

封裝Vditor預(yù)覽器組件

<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）和分屏預(yù)覽模式。它使用 TypeScript 實現(xiàn)，支持原生 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這種好用的函數(shù)。所以我們在active值改變后，要告訴vue框架強制刷新組件。這里使用:key=“”參數(shù)，組件會監(jiān)聽key參數(shù)是否變化，變化則刷新組件。

<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>

最終效果

編輯器

預(yù)覽器

暫時的休息

當(dāng)前只是一種簡單的封裝，方便組織前端代碼結(jié)構(gòu)，在實現(xiàn)功能時，會按需進(jìn)一步修改相關(guān)代碼。