Typecho模板 Vue3 + TypeScript + element-plus 开发

Vue3 模板/ PHP 模板

Vue3模板
PHP模板

用到的技术栈

1. Markdown 渲染 html
2. element-plus
3. TypeScript
4. NProgress
5. highlight
6. 单例模式

开发遇到的问题坑

• 获取文章渲染html的时候 v-html 元素中标签样式失效，
  解决方法

（Vue3 失效）
1 deep 选择器在 CSS 的写法是 >>>
.content-html {
 >>> p { 
       font-size: 16px; 
       } 
>>> a {
       color: blue; 
      } 
}
（失效）
2  /deep/ 写法
.content-html {
    /deep/ p {
        font-size: 16px;
    }
    /deep/ a {
        color: blue;
    }
}
（可用）
3  :deep() 方法
.content-html {
    :deep(p) {
        font-size: 16px;
    }
    :deep(a) {
        color: blue;
    }
}

• Markdown 渲染html
  markdown-it 文档

// 安装
npm install markdown-it --save
npm install @types/markdown-it  //ts 语法提示插件
// 使用
const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true
});
let html = md.render(mdText);

• 解决路由跳转后滚动条位置不动。

// router/index.js  在路由跳转的时候把滚动条回到顶部
router.beforeEach((to) => {
    window.scroll(0, 0)
})

• 页面切换太快了有点无聊，加个进度条
  nprogress 文档

// 安装
npm install --save nprogress
npm install @types/nprogres // ts 提示文件
NProgress.start();
NProgress.done();

• 代码高亮插件
  highlightjs/vue-plugin 文档

// 安装
npm i @highlightjs/vue-plugin

// vue 需要在 v-html 渲染完后。在执行代码高亮。 不然获取不到页面里面的pre 标签
this.$nextTick(() => {
    document.querySelectorAll('pre > code').forEach(code => {
        hljs.highlightElement(code as HTMLElement)
    })
})

• vue3 匹配 404 页面

{
// path: "*",   vue2
    path: "/:catchAll(.*)", // 不识别的path自动匹配404
    redirect: '/404',
}

---

先来几张预览图

---

---

---

---