邯郸的网站建设,电子网站怎么做的,帝国cms做漫画网站教程,做网站的属于什么即然是个人博客#xff0c;那么绝对不能丢给自己一个大大的输入框敷衍了事。如果真是这样#xff0c;现在就可以宣布项目到此结束了。如今没人享受用输入框写博客。作为一个有追求的程序员#xff0c;作品就要紧跟潮流。 后来#xff0c;Markdown 的崛起逐步改变了大家的排…即然是个人博客那么绝对不能丢给自己一个大大的输入框敷衍了事。如果真是这样现在就可以宣布项目到此结束了。如今没人享受用输入框写博客。作为一个有追求的程序员作品就要紧跟潮流。 后来Markdown 的崛起逐步改变了大家的排版方式。再加上我们其他几个项目都是面向程序员用户的所以迁移到 md 上也是大势所趋。 ——Vditor文档 给个人博客嵌入MarkDownb编辑器即便设备上没有支持MarkDown格式的文本编辑器我们仍然能随时随地优雅的编写博客。这里的MarkDown组件选择了Vditor,由思源笔记团队开源的浏览器端 Markdown 编辑器MIT开源协议(几乎是最为宽松的开源协议)感谢思源团队的无私分享。 为了让我们的博客有良好的编辑和阅读体验需要做两件工作
封装Vditor编辑器组件封装Vditor预览器组件 ps: 做好黑夜模式适配
在 src/components/目录下创建MarkDownEdit.vue、MarkDownRead.vue
封装Vditor编辑器组件
MarkDownEdit.vue
因为Vditor的初始化完成后vue无法监听到Vditor对象内参数的变化所以我们需要用一些小技巧来告诉框架刷新状态以完成黑夜模式的变化。创建一个computed参数active,让其计算被pinia托管的参数active一旦active变化则调用setTheme()方法设置 主题。 这里先设置pinia 在src/stores/目录下创建themeSwitch.js,内容如下
import { ref, computed } from vue
import { defineStore } from piniaexport 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:classicvditor.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();});/scripttemplatediv styledisplay: flex;flex-direction: row;justify-content: center;!-- 一定要在html的部分插入active,vue框架才会去真正监听并计算active参数--div hiddenactive: {{ active }}/divdiv idvditor /div/div/template封装Vditor预览器组件
templatedivdiv hidden{{active}} /divdiv idvditor /div/div/templatescript 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/目录下创建BlogEditView.vue、BlogReadView.vue文件
BlogEditView.vue
script setupimport MarkDownEdit from ../components/MarkDownEdit.vue;import { useThemeSwitch } from ../stores/themeSwitch;const themeSwitcher useThemeSwitch()
/scripttemplatemark-down-edit :activethemeSwitcher.active/mark-down-edit
/templateBlogReadView.vue
因为vditor.preview没有提供setTheme这种好用的函数。所以我们在active值改变后要告诉vue框架强制刷新组件。这里使用:key“”参数组件会监听key参数是否变化变化则刷新组件。
script setupimport MarkDownRead from ../components/MarkDownRead.vue;import { NSpace } from naive-ui;import { useThemeSwitch } from ../stores/themeSwitch;const themeSwitcher useThemeSwitch()
/script
templaten-space styleheight: 100%; justifycenter sizelargemark-down-read classblog-read-preview :keythemeSwitcher.active :activethemeSwitcher.active/mark-down-read/n-space
/templatestyle
.blog-read-preview{margin-inline: 15vw;max-width: 900px;
}
/style最终效果
编辑器 预览器 暂时的休息
当前只是一种简单的封装方便组织前端代码结构在实现功能时会按需进一步修改相关代码。
