typecho Joe主题增加文章更新时间 需求背景 不管是 wordpress 还是 typecho ，在发表文章后都是只有发布时间的，后续多次更新文章，显示的发布时间也不会有变更。这样即使中途做了更新，但时隔几年的文章让人无法了解其中的内容是否还能跟目前的技术匹配。无法让读者快速的筛选，从而损失了大量的测试时间。 针对上面这个问题，可以在文章中增加一个最新更新的字段，它显示文章最近一次更新的时间 实现方案 其实 typecho 数据表中不仅有文章的创建时间，也是有文章最近更新时间字段的，只是没有显示罢了，那么直接使用这个数据即可 经过了解 Joe 的主题支持的钩子函数不太好，所以无法通过插件来注入，而web中编辑主题也无法很好的插入，实际的页面展示部分在其 public/batten.php 文件，需要在这个部分插入 更新时间 这个字段 配置修改 以下是修改步骤 登陆服务器，找到主题目录中的配置文件 typecho/usr/themes/Joe/public/batten.php 在配置文件中，可以看到其他字段的部分，比如：文章发布时间，评论数等 可以选择在发布时间下的代码增加如下： <span class="line">/</span> <span class="text">最后修改: <?php echo date('Y-m-d H:i', $this->modified); ?></span> 保存后可以立即刷新文章页面，即可看到增加了更新时间字段的显示

typecho的安装部署 安装方式 了解到部署架构与wordpress类似，主要使用 lamp，手动部署还是要一番功夫的。发现有 docker 镜像，所以干脆在 nas 上使用容器来运行了 docker 镜像地址: https://hub.docker.com/r/joyqi/typecho 建议下载稳定版本，目前仍然是 1.2.1 部署过程 typecho部署 主要的部署流程和注意事项如下： 考虑到个人基本上只使用nginx，但 typecho 的 docker 没有直接使用nginx的镜像，所以拉取了 php-fpm 的镜像，然后再部署nginx反向代理 还需要一个mysql数据库，使用mysql8也可以 为了后续便捷的扩展插件、主题等，可以把容器内目录 /app 挂载到本地 启动命令如下： docker run -it -d --name typecho-server -p 9000:9000 \ -e TYPECHO_DB_HOST=192.168.0.10 \ -e TYPECHO_DB_USER=typecho \ -e TYPECHO_DB_PASSWORD=TypeCho_20250717 \ -e TYPECHO_DB_DATABASE=typecho \ -e TYPECHO_SITE_URL=https://yuc.pub:12345 \ -v /volume2/docker/typecho:/app \ joyqi/typecho:1.2.1-php7.4-fpm-alpine 注意：为了使用自建 nginx，所以把 9000 端口映射了出来，一定要做好安全措施，建议防火墙只允许本机访问 nginx部署 启动命令如下： docker run --name nginx -it -d -p 12345:12345 \ -v /volume2/docker/nginx/nginx.conf:/etc/nginx/nginx.conf \ -v /volume2/docker/nginx/conf.d:/etc/nginx/conf.d \ -v /volume2/docker/typecho:/app \ nginx:stable-alpine3.21-perl 挂载出默认的配置文件和自定义的配置目录，以支持后续的配置扩展 注意：nginx 的目录一定要和 typecho 的路径一致，否则无法正常访问 nginx的默认配置 user root; events { use epoll; worker_connections 10240; } http { include mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.p.log main; #error_log logs/error.p.log debug; sendfile on; keepalive_timeout 65; #gzip on; include /etc/nginx/conf.d/*.conf; proxy_cache_path /etc/nginx/conf.d/cache levels=1:2 keys_zone=my_cache:100m max_size=500m; server_tokens off; } typecho相关的配置 server { listen 12345; server_name www.yuc.pub; root /app/; index index.html index.htm index.php; # gravatar location ^~ /avatar/ { proxy_set_header Host www.gravatar.com; valid_referers none blocked .yuc.pub; if ($invalid_referer) { add_header Cache-Control "no-store"; return 401; } if ($http_referer !~* ^https?://([^/]+\.)?yuc\.pub(:\d+)?(/.*)?$) { add_header Cache-Control "no-store"; return 403; } proxy_cache_valid 200 7d; proxy_max_temp_file_size 10m; if ($args = "") { rewrite ^(.*)$ $1?auth=XXX666 break; } if ($args != "") { rewrite ^(.*)$ $1?$args&auth=XXX666 break; } proxy_cache my_cache; proxy_cache_valid 200 30d; proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504; add_header X-Cache-Status $upstream_cache_status; proxy_pass https://43.xxx.xxx.xxx; } location / { if (!-e $request_filename) { rewrite ^(.*)$ /index.php$1 last; } } location ~ .*\.php(\/.*)*$ { include fastcgi.conf; fastcgi_pass 192.168.0.10:9000; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; } } 远程avatar配置 location /avatar { if ($arg_auth != "XXX666" ) { return 401; } rewrite ^/avatar\?auth=.*&?(.*)$ /avatar?$1 last; proxy_set_header Host www.gravatar.com; proxy_pass https://www.gravatar.com; } 配置解析： avatar 段的配置解决了头像在国内无法正常访问，导致的请求缓慢，然后也做了一些安全限制 后续的location配置是 typecho 的配置

wordpress修改背景 目标 目前是纯白色背景，修改背景后达到更好的展示效果 修改 在 外观 -> 自定义 -> 额外CSS 中增加如下内容 body{ background-image: url(https://xxx.xxx.xxx/wp-content/uploads/beams-components-24fbfee2.png); background-size: 2000px; background-position: center -600px; background-repeat: no-repeat; background-attachment: fixed; } 其中图片可以采用 1846x1256 分辨率大小，大小推荐在 400K 以内，尽量节省带宽

wordpress 插件冲突致命错误 0x1 问题 配置插件 WP Githuber MD 的代码高亮、表情功能与主题 Wing 有一些冲突。在配置完后刷新页面，站点直接崩了，访问所有的页面都是致命错误，提示某一行php代码。 0x2 解决 首先尝试在服务器定位到了这个文件，然后把相关的代码注释掉，结果仍然不行。 于是在服务器相关的目录移除插件的文件夹，站点可以进入了，然后继续安装回 md 插件，但怎么也启用不了，怀疑是配置仍然存在，可能保存在数据库中。 既然这样，那只能临时更换主题，把插件启用后，关闭冲突的功能，之后测试正常了。

wordpress css样式修改 0x1 问题背景 我是安装了插件 WP Githuber MD 的，这款插件可以以 markdown 的风格编辑并且展示文章，但在使用了 Wing 主题后，发现表格预览是正常的，但是发布文章后不生效。 预览如下图： 发布后效果如下图： 根据现象来看，应该是 css 样式问题，编辑页面预览可能是用的一套 css，发布文章后可能是使用的主题的 css 了。并且还有一个问题是，使用了这个主题后md的代码部分字体颜色变成了红色，不太喜欢 0x2 如何解决 因为这个主题我也是比较喜欢的，所以尝试解决的方法是使用 wordpress 提供的额外CSS功能来修改当前的CSS，进入方法：找到主题->自定义->额外CSS。 修改代码字体颜色的方式 首先要找到具体渲染的代码，打开发布的文章，打开浏览器F12，切换到 Elements 中，定位到对应的元素，然后右侧切换到Style，这时候虽然看不懂具体是哪个代码渲染的颜色，但是我们可以手动匹配下，如下图： 我的代码字体是红色，那么我尝试修改上面两个红色为其他颜色，即可定位出到底是哪个生效，然后根据右上显示的请求资源 style.css 去服务器找到这个文件对应的行，把代码贴入额外CSS中，实际找到的如下： code { border-radius: 0.2rem; line-height: 1.25; padding: 0.1rem 0.2rem; background: #fcf2f2; color: #757575; font-size: 70%; } 有了这个代码，还可以修改字体大小等操作 增加或者修改表格样式 有了上面的经验，我在浏览器看了 Elements 表格的 css，但是这部分代码比字体的多，而且复杂，所以我直接在网上找了一个，还比较好用，如下： /** 解决主题覆盖了md表格样式的问题 */ table { display: block; width: 100%; overflow: auto; border-collapse: collapse; margin: 15px auto; /*外边距*/ } table thead tr { background-color: #f8f8f8; } table tbody{ border: 1px solid #dfe2e5; } table th { font-weight: 600; padding: 6px 13px; border: 1px solid #dfe2e5; } table tr { background-color: #fff; border-top: 1px solid #c6cbd1; } table tr:nth-child(even){ background-color: #fff; } table td { padding: 6px 13px; border: 1px solid #dfe2e5; } 其他样式定制 有了上面的成功案例，又再网上找了一些好玩的东西，比如修改滚动条颜色，如下： /**彩色滚动条样式*/ ::-webkit-scrollbar { width: 10px; height: 8px; } ::-webkit-scrollbar-thumb { background-color: #12b7f5; background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent); } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #f6f6f6; }