前言

上一篇文章介绍了我的个人博客的搭建和迁移过程：
[post cid="285" cover="https://www.xiaotiewinner.com/usr/uploads/ai-covers/cover_285_20260330_083027.jpg"/]

但很快我又发现了新问题：

handsome主题自带的统计窗格点击后一直旋转加载，作为一个完美主义者这是我不能容忍的。

今天就解决一下这个问题，顺便给新服务器安装 code-server，实现在线修复

正文

code-server安装与配置

code-server工具介绍：
code-server 是一款强大的开源工具，它将 Visual Studio Code (VS Code) 带入了基于Web的在线环境。它使您可以通过Web浏览器远程访问和使用VS Code的功能，而无需在本地安装VS Code应用程序。
官网：https://coder.com

安装

进入 1Panel 页面，点击左侧菜单 应用商店，搜索 code-server，点击安装：

端口、两个密码按自己的想法修改并记录下来。为防止资源占用过大，我加了最大限制，如果你的服务器配置够高，不加也行。

配置

先去服务器提供商处开启对应端口的防火墙，这个就不讲了

开启后，浏览器访问 云服务器IP:code-server端口

输入安装时输入的网页访问密码（忘记了可以通过 1Panel - 应用商店 - code-server - 参数 查看）

进入页面会先问你是否信任目录，选 Yes

配置语言

安装完成后，按下 F1，输入 language，点击下图选项，然后选择中文

选完以后页面会提示需要重启，点击 Restart 按钮

PHP支持

扩展中搜索 PHP Intelephense，点击安装

挂载Typecho目录

我们安装 code-server 的目的是编辑 Typecho 代码，但是 Typecho 和 code-server 是两个独立的容器，此时需要通过 Docker 的目录挂载功能实现目录互通

依次点击 1Panel - 容器 - 容器 - 更多 - 编辑

页面拉到最底部，进入挂载标签页，点击添加按钮，按照下图修改，需要点击和修改的地方我都用红框标记出来了。

奉上文字版目录，方便复制：
/opt/1panel/apps/typecho/typecho
↓
/workspace/typecho

回到 code-server 页面，修改浏览器地址，将后缀 /?folder=/config/workspace 修改为 /?folder=/workspace/typecho，然后回车，Typecho文件目录正常显示出来了

后面我们需要编辑插件或Typecho源代码的话就可以在这里改了，文件保存即生效

修复统计窗格

问题现象

单击博客页面头部的统计窗格小图标，统计窗格能够弹出。但 动态日历、分类雷达图、发布统计图、分类统计图、标签统计图 数据无法加载出来，一直显示加载图标。

打开 浏览器控制台 - 网络 标签，发现 github.min.css 和 highlight.min.js 报错404，无法访问

由此可以确定，handsome中引用的这两个静态资源网站已经失效或转移，导致函数和样式无法调用

解决问题

查看代码，发现 getLocalCDN 函数用来加载资源：

注释写的很明白，会判断服务器本地是否存在资源，如果存在就加载本地资源。虽然这部分资源包不小，但是按需加载的，放在服务器本地问题不大

下载 vditor.js 资源：https://www.jsdelivr.com/package/npm/vditor，点击右上角下载图标
解压出来，然后按照下图目录放置资源，如果放错了目录则不会正常加载：

如果解压以后没有vditor文件夹就手动创建一个

弄好以后刷新页面，统计窗格正确加载（有CDN或静态资源缓存的话要清理缓存再看）