演示地址：https://lik.kdns.fr

开源地址：https://github.com/imxiaoxp/FriendCircle

FriendCircle

一款仿微信朋友圈风格的 Typecho 主题：时间线式动态列表 + 九宫格图片 + 内联点赞评论，界面简洁，交互还原朋友圈手感。

特性

• 朋友圈式动态流：封面大图、头像昵称、个性签名、动态卡片（时间 / 位置 / 九宫格图片），长文自动折叠并跳转详情页
• 内联评论：无需跳转详情页即可在卡片内发表 / 回复评论；支持 OwO 表情面板、评论者头像、输入框自适应高度、空态提示；点击他人评论快速回复
• 点赞可取消：再次点击取消点赞，状态记忆在浏览器本地，防连点保护
• 详情页：完整评论列表 + 评论窗口按需展开；Prism 代码高亮（本地内置无需 CDN，One Dark 式样、行号、一键复制、代码语言自动识别）
• 明暗双主题：手动切换 + 跟随系统偏好，记忆在 localStorage；<html data-theme="dark"> 统一挂载
• 访问统计：站点级访客统计条（今日 / 昨日 / 总访问，悬停气泡展示近 7 天 / 30 天），IP + UA 指纹同日去重、爬虫不计入，支持 JSON 接口轮询自动刷新与时区配置，MySQL / SQLite 双兼容，首次访问自动建表
• 音乐播放器：后台配置背景音乐（支持多条随机轮播），顶栏迷你播放器（播放 / 暂停、歌名、跳动音柱）

• 原生音/视频短代码：内置 APlayer（音乐）与 ArtPlayer（视频），无需安装播放器插件——后台编辑器一键插入按钮，或直接写短代码：

  • 音乐三种格式：直链属性式 [Music title="歌名" author="歌手" url="音频地址" pic="封面" lrc="歌词"/]
CB2
[Music {"name":"歌名","url":"音频地址","pic":"封面","lrc":"歌词"}/]
CB3
[Music]https://api.injahow.cn/meting/?type=playlist&id=歌单ID[/Music]（单曲 type=song / 歌单 type=playlist 自动识别，前端实时解析，音频直链时效期内始终可播）
  • 视频：[play]视频地址[/play]（推荐，编辑器按钮统一输出此格式）；多个地址每行一个写进同一对 [play]——一个播放器 + 分集切换按钮 + 播放器内「下一集」控件（式样同 VideoCollector），竖屏视频按真实宽高比自适应（最大高度 40vh），移动端窄视口自动精简控件；兼容旧格式 [Video url="视频地址" pic="封面"/]
  • 兼容 [Meting] 包裹格式；全局媒体互斥与 PJAX 切页自动重载均已内置
• 友情链接：后台配置友链列表，顶栏入口弹窗展示（「联系人」风格）
• 搜索：悬浮按钮弹出搜索条（回车提交，走 Typecho 原生搜索归档）
• 悬浮按钮组：返回顶部（滚动后出现，平滑回顶）、搜索、明暗切换
• AJAX 无限加载：下拉自动加载下一页，链式补载，失败点击重试；新卡片内播放器 / 代码块自动初始化
• 图片灯箱：卡片图片与正文图片点击放大，原生实现无第三方依赖
• 响应式设计：适配桌面端与移动端

环境要求

• Typecho 1.2+（基于 1.3 开发验证）
• PHP 7.3+（已在 7.3 / 8.0 双版本下通过语法与功能验证）

安装

1. 下载主题并解压到 usr/themes/ 目录，文件夹名保持 FriendCircle
2. 登录 Typecho 后台 → 控制台 → 外观
3. 启用「FriendCircle」主题
4. 进入主题设置按需配置（封面、头像、昵称、背景音乐、友情链接、访问统计等）

插件兼容

主题已内置全部播放器能力（见特性「原生音/视频短代码」），无需安装任何播放器插件；以下插件的既有短代码均可被主题直接解析渲染，若已安装也可共存（同名短代码以主题渲染为准）。

• VideoCollector：视频采集插件——在 Typecho 后台从苹果 CMS 标准采集 API 搜索影视资源，一键生成 [play] 短代码嵌入多分集视频播放器（ArtPlayer / Iframe 双播放模式）。主题已适配：首页卡片提取第一个播放器（去除分集按钮）直接播放，详情页渲染完整播放器（分集按钮与播放器内「下一集」控件式样同插件）；全局媒体互斥：任一媒体开始播放时，其它播放器与顶栏背景音乐自动暂停（跨域 iframe 内的媒体除外）。
• APlayer-Typecho：音乐播放插件——通过编辑器音乐按钮或 [Meting] 短代码插入网易云 / QQ 音乐等平台的单曲、专辑、歌单，也支持 [Music] 直链自定义歌曲（下载后需将插件文件夹改名为 Meting）。主题已适配：直链属性式、Meting JSON、Meting API 链接（单曲/歌单）三种格式均原生解析，文章插入音乐后首页卡片与详情页直接展示 APlayer 播放器，AJAX 加载新卡片自动初始化，完整支持主题暗色模式；全局媒体互斥：任一媒体开始播放时，其它播放器与顶栏背景音乐自动暂停。

后台设置说明

文章发布约定

• 发布动态使用「文章」，内容支持 Markdown；图片自动提取到卡片九宫格（最多 9 张）
• 编辑文章的自定义字段「所在位置」填写地理位置（如 江西·赣州），显示在动态正文下方
• 正文中的代码块（` 围栏）会自动高亮，语言可标注也可自动识别
• 音/视频：编辑器工具栏「♪ 插入音乐」（可填 Meting 歌曲/歌单链接，或手动填歌名/地址等参数）、「▶ 插入视频」（地址框每行一个，统一输出 [play] 格式，多个自动分集）一键生成短代码，或手写各格式短代码；首页卡片与详情页均会渲染播放器

目录结构

主题文件平铺在根目录，可在 Typecho 后台「控制台 → 外观 → 编辑」中直接编辑。

FriendCircle/
├── functions.php        # 主题设置、动态渲染、社交数据缓存、访问统计等服务端逻辑
├── comments.php         # 评论渲染与查询函数集（由 functions.php 加载）
├── media.php            # 原生音/视频短代码（APlayer / ArtPlayer 解析 + 编辑器按钮，由 functions.php 加载）
├── comments-ajax.php    # 评论 AJAX 接口（列表片段 / 提交）
├── like.php             # 点赞 AJAX 接口
├── index.php            # 首页 / 归档页（搜索、分类、标签、作者）动态列表
├── post.php             # 详情页
├── page.php             # 独立页面
├── header.php           # 页头（暗色初始化、本地 Prism、顶栏）
├── footer.php           # 页尾（悬浮按钮组、友链 / 搜索弹窗、统计条、脚本）
├── style.css            # 全部样式源文件（含暗色模式与插件适配），页面实际加载 style.min.css
├── style.min.css        # style.css 压缩产物（由 header.php 引用）
├── app.js               # 前端交互源文件（评论 / 点赞 / 加载 / 弹窗 / 统计等），页面实际加载 app.min.js
├── app.min.js           # app.js 压缩产物（由 footer.php 引用）
├── OwO.json             # OwO 表情码表
└── assets/
    ├── img/             # 主题默认图片（封面、默认头像）
    └── lib/             # 本地库（aplayer.min.js/css、artplayer.min.js、prism/ 代码高亮及语言组件）

维护说明

• app.js 与 style.css 是源文件，供后期修改；页面实际引用压缩产物 app.min.js / style.min.css
• 修改源文件后需重新压缩（本机需 Node.js）：

npx esbuild app.js --minify --outfile=app.min.js
npx esbuild style.css --minify --outfile=style.min.css

许可证

GPL v3.0