之前那版博客的风格始终喜欢不起来，封面尺寸在pc和移动端怎么调都平衡不起来，而且我喜欢的风格是极简，最好够轻，于是今天花了一天时间把博客整个的ui重构了一遍，顺便把鸽了很久的代码块主题完善了。写这篇博客的时候已经是凌晨了。

   因为有之前的底子，重构的速度很快，这次我追求的风格是极简风格，尽量什么元素都不要，保留最核心的功能，并且缩短页面宽度，因为人眼最佳的阅读宽度大概是700px左右，tailwind prose那个默认宽度太极端了，我折中一下，最终使用了760px。

   代码块要新增的是一个header，包含显示当前代码语言的区域和复制代码块的功能，因为有之前高亮渲染代码块的逻辑在，所以我最后只需要在里面创建一个header，并且加上class，在外部写好相对应的样式就好了，至于复制功能靠jsdom肯定是无法完成的，需要在渲染后在js里完成，我还在顶部加了一些装饰，增加代码块美观度。

// 装饰点
const actions = document.createElement('div')
actions.className = 'code-actions'

const close = document.createElement('span')
close.className = 'dot close'

const minimize = document.createElement('span')
minimize.className = 'dot minimize'

const maximize = document.createElement('span')
maximize.className = 'dot maximize'

actions.append(close, minimize, maximize)

// 显示语言
const langDisplay = document.createElement('div')
langDisplay.className = 'code-language'
langDisplay.textContent = lang ? lang : 'text'

const copyBtn = document.createElement('div')
copyBtn.className = 'code-copy-btn'
copyBtn.textContent = '复制代码'

   老实说，富文本编辑器是我做博客里遇到最麻烦的东西了，始终没有满意的选择，甚至为了用上某个富文本编辑器，我甚至重构了整版后台管理系统的代码，什么Lexical，platejs都用过，他们基本不提供完整的套件，而是需要你从playgound里拷贝代码，乱不说，还要安装各种依赖，在使用中又会遇上各式各样的bug，到几乎不可用的地步，最后没办法才用了这个 wangeditor-next，当然这个库也有bug，不过起码对基础使用没有什么影响，而且不会弄乱我整个目录结构，再一，毕竟是免费开源的，已经很不错了。

   实在暂时没精力去折腾这一块了，光是使用已是天坑，很难想象开发富文本编辑器的作者会遇到什么样的问题了。