搭建个人博客网站时,前台博客代码块的显示优化

项目使用的技术栈:

  • 后台管理:Vue3 + Element-Plus + SCSS
  • 前台系统:Nuxt3 + Element-Plus + SCSS
  • 服务端:Node.js+Mysql+Express

1、优化前的展示效果:

1)后台使用wangeditor富文本插件进行博客内容的添加;将添加的内容直接存入数据库中;

2)前台从数据库中拿到内容后使用 v-html指令进行渲染

缺点: 前台展示的内容不仅居中,而且代码块也没有高亮,可读性不强,不够美观;

2、使用marked、highlight插件进行优化

1)将后台的富文本插件换成mavon-editor 编写markdown文件的插件,可以一边编辑内容一边预览效果;

2)使用marked插件将md文档转为html格式,使用highlight插件对html中的内容添加样式类名;

  • 在数据表中有两个字段,
    • content:存放md格式的内容,用于后台编辑博客内容等操作
    • htmlContent:存放html格式的内容,用于前台博客详情页内容的展示
javascript 复制代码
...
// 插件版本:"marked": "^11.1.1",  "highlight.js": "^11.9.0",
import { marked } from 'marked';
import hljs from 'highlight.js';

// 设置 highlight.js 的语言
hljs.configure({ languages: ['javascript', 'css', 'html'] });

/**
 * @description: 将md文档转为html字符串
 * @param: value-md格式的文档内容
 * @returns: 返回html格式的内容
 */
function mdToHtml(value) {
  if (!value) {
    return '暂无文档'
  }
  // 自定义 renderer
  const renderer = new marked.Renderer();
  renderer.code = function (code, language) {
    const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
    const highlightedCode = hljs.highlight(validLanguage, code).value;
    return `<pre><code class="hljs ${validLanguage}">${highlightedCode}</code></pre>`;
  }
  return marked(value, {
    renderer: renderer
  })
}
// 保存
async function handelSave(formEl) {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const params = {
        ...formData.value
      }
      // 增加html格式的内容
      params.htmlContent = mdToHtml(params.content)
      ...
    }
  })
}
...

3)、全局导入配套的highlight样式,这个一般网上都有现成的,不需要自己手动编写,大家可根据自己的需要下载;

javascript 复制代码
// main.js入口文件
...
import { createApp } from 'vue'

// 导入配套的自定义样式
import '@/assets/style/myMavonEditor.css'

// 引入mavon-editor样式文件
import 'mavon-editor/dist/css/index.css'  
// 引入markdown组件
import mavonEditor from 'mavon-editor' 

const app = createApp(App)
// 注册mavon-editor组件
app.use(mavonEditor)
...

4)在前台博客详情页进行内容展示;

  • 使用v-html指令对博客内容htmlContent字段进行展示;
  • 在nuxt.config.js文件中全局导入配套的highlight样式文件;
javascript 复制代码
// blogDetail文件内容
<template>
 ...
 <ClientOnly>
    <div class="blog-rich-text" v-html="decodeHtml(blogInfo.htmlContent || '加载中...')" ></div>
 </ClientOnly>
</template>
<script lang='ts' setup>
...
// 将html中的&gt;&lt;实体编码还原成原始字符,从而使其在页面上显示正确
function decodeHtml(html) {
  const txt = document.createElement('textarea');
  txt.innerHTML = html;
  return txt.value;
}
</script>

// nuxt.config.js配置文件
export default defineNuxtConfig({
   css: [
     { src: '~/assets/css/myMavonEditor.css', lang: 'css' }
   ]
})
  • 前台博客内容展示样式:

总结:

方案1:(需要md和html格式的内容进行相互转换,较麻烦)

1)后台在使用md富文本进行博客内容编辑保存时,将其格式转为html格式,并使用highlight.js插件将代码块高亮添加对应的class类名,然后再入库; 2)在前台读取到库里的内容后,将html直接渲染出来,并将配套的样式文件导入进来显示即可;

  • 缺点:后台编辑博客内容时回填的信息是html格式的,不好编辑;(此时可以将读到的html转为md格式回填进行编辑; 也就是库里存的内容格式主要用于前台的渲染展示;)

方案2:(目前采用的)

1)后台在保存入库时,使用两个字段记录博客内容;一个字段content用于存放md格式的;一个字段htmlContent用于存放html格式的; 2)后台操作使用content字段,前台渲染使用htmlContent字段; 3)导入配套的样式文件;

  • 缺点:每次操作时,需要多维护一个字段;

方案3:(最优方案)

1)后台入库时存放md格式的内容,在前台再使用相关插件marked+highlight将md内容转为html并添加对应的class样式类 2)在前台导入配套的样式类即可;

  • 优点:数据表中只需维护一个内容字段content,后台编辑时回填的也是md格式的;
相关推荐
Backstroke fish21 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
临枫54123 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
RAY_CHEN.24 分钟前
vue3 pinia 中actions修改状态不生效
vue.js·typescript·npm
酷酷的威朗普24 分钟前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
_Legend_King33 分钟前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
景天科技苑1 小时前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
小行星1251 小时前
前端预览pdf文件流
前端·javascript·vue.js
join81 小时前
解决vue-pdf的签章不显示问题
javascript·vue.js·pdf
小行星1251 小时前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
yqcoder2 小时前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js