vue个人博客开发之旅02:ssr环境搭建

发表于 2023-07-06 | 前端

先放git地址

inyaa-sakura

然后说问题:

数据从服务端加载,文章内容,通过v-html渲染。这些都是通过服务端执行的。 所以,文章内容的html标签也被加载了,转义和延迟加载都会有弊端,所以这里就直接放git地址了。

之后来说注意事项

###按需引入 我这里加了antdv,很简单,自己实现全局提示,和布局,是很难的一件事。包括评论区,归档这些组件,如果不通过ui组件实现,这对于后端人员来说,太麻烦了。 所以,我的less和less-loader都是为了antdv服务的 按需加载是inyaa-vue-components而不是unplugin-vue-components的原因是。 大佬的这个组件,在ssr环境下,是会报错的。 比如,在ssr下,你需要引入的是ant-design-vue/lib/button/style/index.less这样的style,ant-design-vue/lib而不是ant-design-vue/es。 目前没做好评论功能,有兴趣可以加我qq184608371详谈。

markdown渲染

markdown渲染框架marked,而我引入的是inyaa-marked。这个是因为,marked可自定义比较差,要实现的样式如果通过for循环的方式来完成的话,及其印象效率。 我最初是改编一个freemarker的一个系统,的纯js实现,我发现,效果很差,卡顿明显。所以直接通过二次开发的方式来完成。 主要的逻辑,都在Renderer.js这个文件里,看到pre code 之类的,就差不多了。直接加入样式。

复制

复制其实也是通过修改marked插件来实现的,直接新增一个兄弟标签,把没渲染过的markdown放进去。然后再放一个图标,获取兄弟节点,就可以通过纯js实现