普通视图

发现新文章,点击刷新页面。
昨天以前首页

产品,还是玩具? — Baby Press(缝合怪)

作者 obaby
2026年4月24日 14:58

这算是给这个东西写的第二篇正式的文章,本来我的想法很简单,做一个简单的前后端分离的系统来完全替代wp的php渲染机制。

只是,在开发的过程中为了迎合wp的各种现有数据格式、插件、主题、shortcode等等,代码复杂度也在不断的提高。得益于ai的崛起,现在生成代码是真的简单方便,原来数个人的工作,现在一人就可以完成了。尽管哪怕没有ai,我自己也能全部搞定。ai在某些方便还是提高了输出效率,原本很多人不是全栈的,现在也给搞成了全干工程师,哪怕不会,也得硬着头皮上,去验证ai写的各种代码。

我一般不喜欢给ai太具体的描述,但是会给一个准确的描述,实现方法,实现路径,实现目标,所以多数时候ai呈现的代码质量尚可。然而,等到实际上线的时候发现还是一堆问题。

做完准备把wp的前端全部迁移到现在的baby press的前端,尝试部署之后出现了一系列问题,当然很多问题源自于测试不充分。为了解决两个系统的整合问题,需要大量的配置文件和代码。除了openresty的配置文件,前后端也生成了一堆默认的配置模板,当然,这些模板主要是为了提供一些自定义的功能,以及安全性提升加密等等。

这么复杂的系统,现在我觉得更像一个玩具,而不是产品,好的产品应该是简单易用,开箱可用的。

DJANGO_SECRET_KEY=dev-secret-key-change-me
DJANGO_DEBUG=1
DJANGO_ALLOWED_HOSTS=127.0.0.1,localhost
# 浏览器里「页面」的 origin(协议+域名+端口),须与前端访问地址一致;逗号分隔、勿加路径。
# 生产示例(Vue 部署在 i 子域、API 在 api 子域时,必须把 i 子域写进来,否则会 CORS 失败):
# CORS_ALLOWED_ORIGINS=http://127.0.0.1:5173,http://localhost:5173,http://i.zhongxiaojie.cn,https://i.zhongxiaojie.cn
CORS_ALLOWED_ORIGINS=http://127.0.0.1:5173,http://localhost:5173
# Django CSRF 信任来源(协议+域名+端口,逗号分隔;用于 /admin/login/ 等表单提交)
# 生产示例:CSRF_TRUSTED_ORIGINS=https://api.zhongxiaojie.cn,https://i.zhongxiaojie.cn
CSRF_TRUSTED_ORIGINS=http://127.0.0.1,http://localhost

# Django 缓存(评论 UA/IP 查询结果);推荐 Redis,例如 redis://127.0.0.1:6379/1
# 留空则使用 LocMem(仅开发、单进程)
# DJANGO_CACHE_REDIS_URL=redis://127.0.0.1:6379/1
#
# WordPress Object Cache Pro(可选):Django 直写评论后用于定向清理评论缓存。
# 请与 WordPress 端 WP_REDIS_CONFIG 的 host/db/prefix 保持一致。
# 例如 WP_REDIS_CONFIG 里 database=5,则这里应为 redis://127.0.0.1:6379/5
# WP_OBJECT_CACHE_REDIS_URL=redis://127.0.0.1:6379/<database>
# 注意:当前定向清理实现依赖 prefix,建议在 WP_REDIS_CONFIG 中显式配置 'prefix' => 'zhxj'
# WP_OBJECT_CACHE_REDIS_PREFIX=zhxj
# WP_OBJECT_CACHE_BLOG_ID=0

# Baby IP Lookup:本机 lookup-ua 与静态资源公网域名(PNG/SVG 补全)
# UA_LOOKUP_UPSTREAM_BASE_URL=http://127.0.0.1:18765
# UA_LOOKUP_PUBLIC_ASSETS_BASE_URL=https://ip.zhongxiaojie.cn
# UA_LOOKUP_DEFAULT_METHOD=ip2location
# UA_LOOKUP_CACHE_TTL=604800

# WordPress database connection (MySQL/MariaDB)
WP_DB_NAME=wordpress
WP_DB_USER=root
WP_DB_PASSWORD=
WP_DB_HOST=127.0.0.1
WP_DB_PORT=3306

# WordPress table prefix, e.g. wp_ / wp123_
WP_TABLE_PREFIX=wp_

# 是否信任反代/CDN 转发头(CF-Connecting-IP / X-Real-IP / X-Forwarded-For),默认开启。
# - 生产推荐开启,并配置 TRUSTED_PROXY_IP_RANGES,只信任你的网关/CDN 回源 IP 段
# - 若 API 不会被公网直连,且 CDN 回源 IP 经常变:可保持开启并留空 TRUSTED_PROXY_IP_RANGES(有伪造风险)
TRUST_PROXY_HEADERS=1
# 反代终止 TLS(如 Nginx/Edge/CDN)时建议开启,配合 X-Forwarded-Proto 识别 https
SECURE_PROXY_SSL_HEADER_ENABLED=1

# 额外输出“真实 IP access log”(Daphne 的 access log 里显示的是 CDN 节点 IP)
# 打开后会在 stdout 输出形如:[realip] ip=... remote=... status=... GET /api/...
REAL_IP_ACCESS_LOG_ENABLED=0

# 受信任反向代理 / CDN 的 IP 段(CIDR,逗号分隔)。
# 仅当请求来源 REMOTE_ADDR 命中这些 IP 段时,后端才会信任 CF-Connecting-IP / X-Real-IP / X-Forwarded-For。
# - 本机 Nginx 反代:127.0.0.1/32,::1/128
# - 生产:把你的 Nginx/网关内网地址段、或 CDN 回源 IP 段加入这里
TRUSTED_PROXY_IP_RANGES=127.0.0.1/32,::1/128

# API 请求签名(HMAC + ts + nonce)——默认关闭
# 注意:这是“请求验签”,不是“返回加密”。建议仅在 HTTPS 下启用。
# API_SIGNING_ENABLED=1
# API_SIGNING_SECRET=change-me-long-random
# 允许客户端时间漂移(秒),超出即拒绝(防离线重放)
# API_SIGNING_TTL_SECONDS=60
# nonce 去重缓存 TTL(秒),建议 >= API_SIGNING_TTL_SECONDS
# API_SIGNING_NONCE_TTL_SECONDS=300
# 需要签名的路径前缀(逗号分隔)
# API_SIGNING_REQUIRED_PREFIXES=/api/
# 免签路径(逗号分隔,严格 path 匹配),例如健康检查:
# API_SIGNING_EXEMPT_PATHS=/api/health/,/api/ping/

# SMTP / Email backend (Django)
# 不配置则不会真的发出邮件(除非你使用本地控制台邮件后端等)。
# EMAIL_BACKEND=django.core.mail.backends.smtp.EmailBackend
# EMAIL_HOST=smtp.example.com
# EMAIL_PORT=587
# EMAIL_USE_TLS=1
# EMAIL_HOST_USER=your-account@example.com
# EMAIL_HOST_PASSWORD=your-app-password
# DEFAULT_FROM_EMAIL="obaby <no-reply@zhongxiaojie.cn>"
#
# 评论回复邮件通知(前台回复他人评论时)
# COMMENT_REPLY_NOTIFICATION_ENABLED=1
# COMMENT_REPLY_EMAIL_FROM="obaby <no-reply@zhongxiaojie.cn>"
# COMMENT_REPLY_EMAIL_HEADER_IMAGE_URL=https://zhongxiaojie.com/wp-content/uploads/2026/01/uugai.com_1661691241113463.png
# COMMENT_REPLY_EMAIL_HEADER_IMAGE_WIDTH=520
# COMMENT_REPLY_EMAIL_HEADER_IMAGE_HEIGHT=180
# COMMENT_REPLY_EMAIL_HEADER_ALT=obaby 𝐢‍𝐧⃝ void
# COMMENT_REPLY_EMAIL_FOOTER_LINE1=obaby 𝐢‍𝐧⃝ void
# COMMENT_REPLY_EMAIL_FOOTER_LINK_TEXT=oba.by
#
# 与 WordPress CREN 插件退订链接校验一致(取自 wp-config.php)
# WORDPRESS_AUTH_KEY=
# WORDPRESS_AUTH_SALT=
# 与 WordPress 登录 Cookie(wordpress_logged_in_*)校验一致(同样取自 wp-config.php)
# 推荐配置 LOGGED_IN_KEY / LOGGED_IN_SALT;留空时后端会回退到 AUTH_KEY / AUTH_SALT
# WORDPRESS_LOGGED_IN_KEY=
# WORDPRESS_LOGGED_IN_SALT=

# 服务器状态小组件:统计磁盘路径(Linux "/";Windows "C:\\")
# SERVER_PROBE_DISK_PATH=/

# 
列表头像:Gravatar 兼容镜像根(路径同 /avatar/{md5}?s=&d=),默认 gg.lang.bi # GRAVATAR_AVATAR_BASE_URL=https://gg.lang.bi # 侧边栏「近期文章」:正文无图时的缩略图回退地址 # SIDEBAR_RECENT_POST_FALLBACK_IMAGE_URL=https://zhongxiaojie.cn/wp-content/uploads/2026/01/... # 评论反垃圾分类(可选;不配置则不调服务、新评论直接通过) # BABY_ANTI_SPAM_CLASSIFY_URL=http://192.168.1.8:8765/v1/classify # BABY_ANTI_SPAM_SECRET=change-me-long-random # BABY_ANTI_SPAM_TIMEOUT=3 # 同一邮箱+IP 对同一篇文章连续提交的最短间隔(秒,0 关闭,最大 120);依赖 Django cache # COMMENT_SUBMIT_COOLDOWN_SECONDS=0 # 前台文章评论列表分页(GET /api/wp/posts/:id/comments/):按一级评论(线程)分页,每页含该层全部回复;不传 page 时默认最后一页(最新线程) # WP_COMMENTS_PER_PAGE=50 # 客户端 ?per_page= 的上限(不超过 500) # WP_COMMENTS_MAX_PER_PAGE=200 # 顶层线程展示:desc=递减(最新在上,默认);asc=递增(最新在下) # WP_COMMENTS_ORDER=desc # Nginx FastCGI 缓存:评论审核通过(comment_approved=1)后清理文章页、首页(可选分类页) # 与 WordPress 插件「Nginx FastCGI Cache Purge on Comment」类似:HTTP GET {站点}/purge{路径} # NGINX_CACHE_PURGE_ENABLED=1 # NGINX_PURGE_PUBLIC_BASE_URL=https://你的域名 # NGINX_PURGE_TIMEOUT=2 # NGINX_PURGE_SSL_VERIFY=1 # NGINX_PURGE_CATEGORIES=1 # NGINX_CACHE_FILES_PATH=/var/cache/nginx/allinone # Kama WP Smile:评论表情包资源(给前端下发,避免硬编码域名) # 若留空,前端会回退使用自身默认/环境变量配置。 # SMILE_PACK_BASE_URL=https://zhongxiaojie.cn/wp-content/plugins/kama-wp-smile-packs/qip_dark_all/ # SMILE_PACK_EXT=gif # SMILE_PACK_TOKENS=smile,sad,laugh,rofl,blum,kiss,yes,no,good,bad,unknw,sorry,pardon,wacko,acute,boast,boredom,dash,search,crazy,yess,cool,air_kiss,angel,bb,beach,aggressive,blush,bomb,bravo,buba,bye,cry,curtsey,dance,dash2,declare,diablo,don-t_mention,drinks,focus,fool,friends,gamer,give_rose,heart,help,hi,laugh1,mail,mda,mosking,music,negative,ok,popcorm,punish,rtfm,sarcastic,secret,shock,shout,thank_you,vava,victory,beee,big_boss,wink,yu,cray2,dash3,girl_pinkglassesf,girl_prepare_fish,locomotive,lazy2,agree,feminist,fuk,fuck,jester,hunter,moil,offtopic,paladin,shablon_01,spam,vinsent,warning,yahoo,superman,girl_witch,fans,beta,butcher,elf,first_move,gamer2,girl_cray2,girl_cray,girl_blum,girl_dance,girl_crazy,girl_haha,heat,hysteric,nhl_crach,nhl_fight,pig_ball,aikido,angry2,banned,alcoholic,bb2,flood,gamer3,girl_devil,flirt,girl_cray3,girl_drink,girl_hide,girl_hospital,girl_impossible,girl_in_love,girl_mad,girl_sad,girl_sigh,girl_smile,girl_to_take_umbrage,girl_wacko,lazy1,nono,man_in_love,party,scenic,queen,paint,crazy_pilot,dwarf,hang1,haha,grin,good3

好处呢,就是所有的系统配置基本都在这个配置文件中控制即可,无需去各种地方设置了,修改之后重启服务即可。

之所以说是玩具,其实我在wp之外添加了另外一个简单的管理后台,这也是为什么选了django 而没有直接用fastapi。

这个东西最初的目的也不是为了替换wp,所以很多功能也没必要再实现一遍了。基础的操作还是在wp的后台完成。

当然,做完折腾到零点多,补全了一些功能之后,最终还是上线了,这就是目前看到的页面效果,lighthouse测试:

ipv4测试:

ipv6测试:

对于wp的主题,也修改了下页面宽度,与现在的vue的页面宽度基本一致了:

http://zhongxiaojie.com

代码地址:

https://gitee.com/obaby/baby-press-public

Baby Press — 前后端分离的WP系统

作者 obaby
2026年4月14日 09:53

WP的系统怎么说呢,有时候真的感觉一言难尽,庞杂的功能,丰富的插件、主题。几乎能满足所有人的需求,当然,也能满足我的需求。

之所以要做这么个东西,最主要的是前几天在杜老师的聊天室收到一条消息:

跟随这条消息我也去了解了一下这个东西,按照官方的说法,其实是这么个东西:

Cloudflare 将这款项目命名为 EmDash,将其定位为 WordPress 的精神继承者,这并不是对 WordPress 简单的复刻,而是用现代化技术栈,重新实现一套面向未来的 CMS,并且重点解决了 WordPress 24 年发展中积累的的架构臃肿、安全隐患与性能瓶颈问题。

说是高性能的wp,但是实际上跟wp没有任何的关系,除了所谓的精神继承。刚开始我还以为是基于wp的优化,现在看来其实是完全做了另外一套系统,这精神继承,可以说是非常抽象了。

再加上 『爱看』在我没有丢失以前的网站数据的时候,就一直建议可以自己写个系统。重新搭建之后,他又提过几次:

既然 cf可以这么干,那么自己当然也可以这么干。只是,这次自己既不想重写,又不想使用php,于是,我换了最熟悉的django+vue3来实现这个新的系统,至于数据库当然还是用wp原来的。既然设计好这一切,那么声息的就是让ai开始动工了。

当然在开发过程中,不可避免的要面临一些问题,例如wp的shortcode,主题插件的一些功能:相册、代码高亮等等。不过这些东西都可以重新通过python进行处理和渲染。还有一些php的原生小组件渲染就有些困难了,这些只能通过其他方法进行实现。例如归属地、ua,访客信息等等。暂时尚未完成,为了处理ip归属地查询,目前将插件的归属地查询已经独立成了python服务,开源地址:https://cnb.cool/oba.by/baby-ip-location

测试地址:https://ip.zhongxiaojie.cn

当前测试页面效果:

访问地址:

https://i.zhongxiaojie.cn

代码暂未开源,还在继续完善。

WordPress外链跳转到中间页

作者 Feng
2024年12月18日 15:56

记得之前还在Wordpress的时候,曾经捣鼓了一个跳转页(原文章链接),后来换成Typecho后,用的是姜先森的主题,也就直接用着他的跳转方式。回到Wordpress(后简称WP)后,就一直没弄,刚好中午闲逛,又让我看到了其它博主的跳转页,感觉不错,那就赶紧“作业抄起来”。

这个跳转页参照了空白大佬的,太多技术性的咱就不说了,都是抄作业,下面就细说一下步骤:

  • 在网站根目录下新建一个文件夹,例如 mygo ,再在里面新建几个文件如: go.js go.html go.css ,跳转页的图片自己抠一下吧。
  • go.js文件内容:
function checkParent(element, classNames) {
    while (element) {
        if (element.classList && classNames.some(cn => element.classList.contains(cn))) {
            return true;
        }
        element = element.parentElement;
    }
    return false;
}
var excludedClasses = ['card-link', 'friend-item', 'contact-item', 'footer-item']; // 排除的 a 标签类名
window.addEventListener('load', () => {
    document.body.addEventListener('click', function (e) {
        let target = e.target;

        // 确保点击的目标是 <a> 标签
        while (target && target.nodeName !== 'A') {
            target = target.parentNode;
        }

        // 如果是 <a> 标签并且满足以下条件才触发跳转逻辑
        if (target && target.nodeName === 'A' &&
            target.href && // 确保有 href 属性
            target.href !== '#' && // 排除返回顶部链接
            !checkParent(target, excludedClasses) && // 排除特定类名
            !target.href.startsWith('javascript:') && // 排除 javascript: 链接
            !target.href.includes('zfei.net') && // 排除特定域名
            !target.href.includes('057000.xyz') &&
            target.hostname !== window.location.hostname) { // 仅针对外部链接
            e.preventDefault();

            // Base64 编码目标链接
            let encodedUrl = btoa(target.href);
            let url = '/mygo/go.html?target=' + encodedUrl;

            // 在新窗口中打开跳转页面
            window.open(url, '_blank');
        }
    });
});
  • go.html文件内容:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="go.css">
    <title>即将离开知非博客</title>
</head>
<body>
<div class="tiaozhuan-all">
    <div class="tiaozhuan-nrong">
        <div class="tiaozhuan-title">您即将离开 『 知非博客 』 ,跳转到以下外部链接</div>
        <div id="tiaozhuan-link"></div>
        <div class="tiaozhuan-info">请自行识别该链接是否安全,并保管好个人信息。</div>
        <div class="tiaozhuan-button"><a href='' id='direct-link'>继续访问</a></div>
    </div>
</div>
<script>
    const params = new URLSearchParams(window.location.search);
    const encodedTarget = params.get('target');
    const target = atob(encodedTarget); // 使用 atob 进行 Base64 解码
    if (target) {
        document.getElementById('direct-link').href = target;
        document.getElementById('tiaozhuan-link').textContent = '' + target; // 直接显示目标地址    
    } else {
        console.error('未指定重定向目标。');
    }
</script>
</body>
</html>
  • go.css文件内容:
body {
    background: #ececec;
}
.tiaozhuan-all {
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -10px;
    border-radius: 10px;
    background-image: url('go.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #666;
    word-break: break-all;
    max-width: 700px;
    height: 350px;
    text-align: center;
    font-size: 0.85rem;
    overflow: hidden;
    margin: 100px auto 0;
    @include breakpoint('small') {
        aspect-ratio: 2 / 1;
        height: auto;
    }
}
.tiaozhuan-nrong {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 30px 20px;
}
.tiaozhuan-title {
    font-size: 1.3rem;
    color: #222;
    line-height: 1.4;
    margin-bottom: 4px;
}
.tiaozhuan-info {
    margin-top: 6px;
}
.tiaozhuan-button {
    margin-top: 20px;
}
.tiaozhuan-button a {
    color: #fc9151;
    border-radius: 4px;
    padding: 10px 30px;
    font-size: .85rem;
    border: 0.5px solid #fc9151;
    display: inline-block;
    text-decoration: none;
}
  • 最后在主题的 footer.php 中添加一段代码:
    <script src="/mygo/go.js"></script>

    其实,对于我们浏览体验来说,这样子操作等于多了一步跳转,体验上总归是不好,但为了愉快的玩耍博客,稳妥一点还是需要的。如果觉得跳转中间页很烦人,浏览器可以装个 Skip Redirect 插件,告别所有网站的中间页跳转,直接抵达目标地址。
    哈哈,跳转功能只运行了几个小时让我撤掉了,正如Jeffer.Z大佬说的:

    有备案加是对的,如果不需要备案就无所谓了,我反正是不加,影响大家跳转流畅度感觉

所以说作为一个没有备案的网站,这种影响大家畅游网络的事宜,确实就不需要了,如果是备案网站的话,建议还是加一个跳转,虽然不太友好,但碍于现实也没什么好办法。

没事敲打一下自己的博客

作者 Feng
2024年12月14日 22:34

从Typecho转回Wordpress也有段时间了,也算是各种折腾吧,以往的习惯都是用Debian+LNMP(或者有时懒了,直接就整BT了),Typecho用着轻巧、访问也快,但耐不住俺们这爱折腾的心理,所以这不就又整上Wordpress了呗,既然来了,那就再重新开始折腾一下吧。

这次回到WP,大部分是因为林海草原大佬的一句评论:

我看你说wp运行卡卡的,我推荐你用openlitespeed替代nginx或Apache,运行wp绝对流畅。如果你用宝塔,可以安装openlitespeed。如果想换成其他面板,推荐你用cyberpanel面板,安装好以后它自带openlitespeed。在有openlitespeed存在的情况下,再安装wp以后速度飞快,不比typecho逊色,甚至比typecho还快。

就是因为这一句评论,俺们又耐不住……,所以这不就整起来了,主题选的是设计笔记的Wing,上一次用的也是这家的Adams主题(也是非常喜欢),至于后端当然是林海大佬推荐的Cyberpanel+Litespeed了,自我感觉还是不错的(也有可能是主题作者本身设计的就很优秀,因为在我另外一个测试站点跑起来速度也不错,用的是Docker装的WP)。

边刷剧边写,确实抖不出多少水了,当然就咱这点水准,真让我专业写,估计也好不到哪里去,哈哈。《深潜》这部剧是冲着成毅来的,这帅哥只要不暴雷,他的剧我还是蛮喜欢的,比如说《莲花楼》,不啰嗦了,我还是先刷剧吧。

❌
❌