Skip to content

FeiFan86/SeeLTheme

Repository files navigation

SeeLTheme - 塞尔主题

一款现代化的 Typecho 博客主题,支持简洁化与玻璃态双主题自由切换。

Version License Typecho


✨ 特性

⭐ 演示网址

🎨 双主题切换

  • 简洁化主题 (v12):干净现代,蓝白配色,适合追求简洁风格的用户
  • 玻璃态主题 (v7):渐变背景,毛玻璃效果,炫酷美观
  • 主题切换会自动保存到浏览器,下次访问时保持选择
  • 每个主题都支持独立的暗黑模式

🌓 暗黑模式

  • 前台实时切换,平滑过渡动画
  • 支持自动切换时间段设置
  • 模式选择会记住,下次访问时自动应用
  • 护眼舒适,夜间阅读更友好

📦 丰富的功能模块

📢 高优先级功能

  • 公告栏:显示网站公告、重要通知,支持关闭和记忆关闭状态
  • 友情链接:侧边栏显示,支持图标+文字
  • 热门文章排行榜:基于阅读量,显示排名标识(1-3高亮),带缩略图
  • 最新评论:显示最近的用户评论,头像+用户名+评论内容

🌟 中优先级功能

  • 相关文章推荐:在文章详情页显示,基于标签/分类推荐,可配置数量
  • 文章目录 (TOC):侧边栏/文章内/悬浮固定三种位置,自动生成目录,点击平滑滚动
  • 社交分享按钮:支持微博、QQ、微信、Twitter、复制链接,可配置启用平台
  • 阅读进度条:页面顶部显示,实时反映阅读进度

💡 增强功能

  • 首页轮播图:支持自定义文章ID或自动显示热门文章
  • 广告位/推广区域:侧边栏 banner + 文章内广告(开头/中部/结尾可选)
  • 网站统计:访问量统计(总访问量/今日访问)
  • 日归档:列表形式,方便查找旧文章
  • 返回顶部按钮:滚动一定距离后显示,平滑滚动到顶部
  • 标签云:优雅的标签云显示,可配置显示数量

🎨 视觉增强

  • 文章版权声明:文章底部,可自定义内容,保护原创
  • 打赏功能:微信/支付宝二维码,文章底部
  • 评论系统:完整的评论功能和评论列表
  • 自定义导航:支持自定义导航菜单,支持图标显示

🔧 管理功能

  • 主题设置导入导出:一键备份和恢复所有主题设置
  • 自动页面刷新:导入成功后自动刷新页面(1.5秒)
  • 侧边栏组件配置:首页和其他页面可独立配置侧边栏组件

📱 响应式设计

  • 完美适配桌面、平板、手机
  • 移动端优化布局
  • 横屏/竖屏自动调整
  • 流畅的触控体验

⚡ 性能优化

  • 纯 CSS 主题变量切换
  • localStorage 本地存储,减少请求
  • 代码压缩优化
  • 动画流畅,体验丝滑

🚀 安装

方式一:手动安装

  1. 下载主题压缩包并解压
  2. SeeLTheme 文件夹上传到 /usr/themes/ 目录
  3. 登录 Typecho 后台,进入"外观" -> "启用外观"
  4. 选择"SeeLTheme"主题并点击"启用"
  5. 进入"设置外观"进行详细配置

方式二:Git 安装(推荐)

cd /usr/themes
git clone https://github.com/FeiFan86/SeeLTheme

⚙️ 配置

主题启用后,在"外观" -> "设置外观"中进行配置:

🏠 站点信息

  • 站点 Logo:上传或输入 Logo 图片 URL
  • 站点图标 (Favicon):Favicon 图标 URL,建议尺寸 32x32 像素,支持 .ico、.png 格式
  • 站点描述:用于 SEO 和显示在标题中

🎨 主题设置

  • 默认主题:选择简洁化主题 (v12) 或 玻璃态主题 (v7)
  • 暗黑模式显示时间段:设置自动启用暗黑模式的时间段(格式:开始时间-结束时间,如 20:00-7:00),留空则不自动启用暗黑模式

📢 公告栏模块

  • 公告栏:启用/禁用公告栏
  • 公告内容:设置公告栏显示的文本内容(支持 HTML)
  • 允许关闭公告:用户是否可以关闭公告栏

📊 阅读进度条

  • 阅读进度条:启用/禁用页面顶部阅读进度

📖 文章目录

  • 文章目录:启用/禁用文章页面目录导航
  • 目录位置:侧边栏 / 文章内 / 悬浮固定

🔗 相关文章

  • 相关文章:启用/禁用相关文章推荐
  • 相关文章数量:显示的相关文章数量(2/3/4/6 篇)

📤 社交分享

  • 社交分享:启用/禁用文章页面分享按钮
  • 分享平台:启用哪些分享平台(weibo,qq,wechat,twitter,link),用逗号分隔

📜 版权声明

  • 版权声明:启用/禁用文章页面版权信息
  • 版权声明内容:自定义版权声明文本(支持 HTML)

💝 打赏功能

  • 打赏功能:启用/禁用文章底部打赏按钮和二维码
  • 微信打赏二维码:微信支付二维码图片 URL
  • 支付宝打赏二维码:支付宝二维码图片 URL

🔝 返回顶部

  • 返回顶部:启用/禁用页面右下角返回顶部按钮

🔥 热门文章

  • 热门文章排行榜:启用/禁用侧边栏热门文章
  • 热门文章数量:显示的热门文章数量(3/5/8/10 篇)

💬 最新评论

  • 最新评论:启用/禁用侧边栏最新评论
  • 最新评论数量:显示的最新评论数量(3/5/8 条)

🏷️ 标签云

  • 标签云:启用/禁用侧边栏标签云
  • 标签云数量:显示的标签数量

🔗 友情链接

  • 友情链接:启用/禁用侧边栏友情链接
  • 友情链接列表:每行一个链接,格式:名称,URL

示例:

示例网站,https://example.com
Typecho官网,https://typecho.org

📊 侧边栏配置

  • 首页侧边栏组件:选择首页侧边栏显示的组件(可多选)
  • 其它页面侧边栏组件:选择其它页面侧边栏显示的组件(可多选)

可选组件: 统计、搜索、分类、标签、归档、热门文章、最新评论、友情链接

📢 广告位

  • 侧边栏广告:启用/禁用侧边栏广告
  • 侧边栏广告代码:广告 HTML 代码
  • 侧边栏广告位置:选择广告位显示在哪个模块上面
  • 文章内广告:启用/禁用文章内容中插入广告
  • 文章内广告代码:广告 HTML 代码
  • 文章广告位置:选择广告在文章中的插入位置(开头/中部/结尾)

🖼️ 首页轮播图

  • 首页轮播图:启用/禁用首页轮播图
  • 轮播文章ID:输入要展示在轮播图中的文章ID,每行一个。例如:1\n2\n3\n4\n5,留空则自动显示热门文章

🔗 自定义导航

  • 自定义导航:每行一个导航项,格式:名称,URL名称|图标,URL。留空则使用默认导航(首页、归档、分类、关于)

示例:

首页,/
技术文章,/category/tech
归档,/archives.html
关于,/about.html

带图标示例:

首页|🏠,/
分类|📁,/category
关于|👤,/about.html

🔗 导航栏样式

  • 导航栏样式:选择导航栏的样式风格(默认 / 下划线 / 实线)

🐦 社交媒体

  • GitHub:GitHub 个人主页链接
  • 微博:微博个人主页链接
  • 微信:微信公众号/微信号
  • 微信二维码:微信二维码图片 URL(点击底部微信图标时显示)
  • 邮箱:联系邮箱地址

💾 网盘下载功能

  • 网盘下载功能:是否启用网盘下载功能,启用后可在文章中填写网盘信息

🔧 其他设置

  • 统计代码:Google Analytics 或其他统计代码
  • 自定义 CSS:添加自定义 CSS 代码
  • 自定义 JavaScript:添加自定义 JavaScript 代码

💾 备份与导入

  • 导出设置:将当前主题设置导出为 JSON 文件,建议定期备份
  • 导入设置:从 JSON 文件导入主题设置,导入后会自动刷新页面

📁 文件结构

SeeLTheme/
├── functions.php          # 主题函数和配置项
├── index.php             # 首页模板
├── header.php            # 页头模板(包含公告栏、导航等)
├── footer.php            # 页脚模板(包含返回顶部、JS 等)
├── post.php             # 文章详情页
├── page.php             # 独立页面
├── page-about.php        # 关于页面模板
├── page-archive.php      # 归档页面模板
├── page-tags.php        # 标签页面模板
├── archive.php          # 分类/标签归档页
├── search.php           # 搜索结果页
├── 404.php              # 404 错误页面
├── comments.php         # 评论模板
├── sidebar.php          # 侧边栏(包含所有侧边栏组件)
├── style.css            # 主样式文件
├── components.css       # 组件样式文件
├── comments.css         # 评论样式文件
├── v7-glass.css        # 玻璃态主题专用样式
├── export.php          # 设置导出功能
├── import.php           # 设置导入功能
├── README.md           # 说明文档(本文件)
└── screenshot.png       # 主题截图

🔧 自定义字段

文章自定义字段

  • thumbnail:文章封面图 URL(可选,不填则自动提取或使用随机图)

💡 使用技巧

  1. 主题切换:访客可以在前台右上角切换主题和暗黑模式,选择会自动保存
  2. 文章缩略图:在文章编辑时添加自定义字段 thumbnail 设置封面图
  3. 文章目录:自动从文章 H2/H3 标题生成目录,支持悬浮固定
  4. 相关文章:基于标签自动推荐相关文章,提升浏览量
  5. 友情链接:在友情链接设置中使用 名称,URL 格式,每行一个
  6. 公告栏关闭:启用"允许关闭公告"后,用户可以手动关闭公告,关闭状态会被记住
  7. 主题设置备份:定期使用导出功能备份主题设置,防止意外丢失
  8. 自定义导航图标:在导航项中使用 名称|图标 格式添加图标,支持 Emoji

🌐 浏览器支持

  • Chrome 90+ (推荐)
  • Firefox 88+
  • Safari 14+
  • Edge 90+
  • 移动浏览器(iOS Safari 14+、Chrome Mobile 90+ 等)

📝 更新日志

v1.30 (后续开发)

  • ✨ 二级分类样式增加
  • ✨ 增加独立页面(专题、单页、今日头条、精选、图库、排行榜、友情链接等)
  • ✨ 友情链接增加图片、分组功能,在独立页面更好的效果展示

v1.20 (2026-01-13)

  • ✨ 主题信息更新(名称、作者、版本)
  • ✨ 导入导出功能优化
  • ✨ 支持新版 Typecho 配置文件格式
  • ✨ 导入成功后自动刷新页面(1.5秒)
  • ✨ README 文档完善

v1.0.0 (2024-12-29)

  • ✨ 初始版本发布
  • ✨ 双主题切换功能(简洁化主题 + 玻璃态主题)
  • ✨ 暗黑模式支持(每个主题独立)
  • ✨ 主题/模式选择本地存储记忆
  • ✨ 公告栏模块(支持关闭和记忆)
  • ✨ 阅读进度条
  • ✨ 文章目录(三种位置可选)
  • ✨ 社交分享(5个平台可选)
  • ✨ 版权声明(可自定义)
  • ✨ 相关文章推荐(基于标签)
  • ✨ 热门文章排行榜(排名高亮)
  • ✨ 最新评论组件
  • ✨ 友情链接
  • ✨ 网站统计(访问量)
  • ✨ 日归档(列表形式)
  • ✨ 返回顶部按钮
  • ✨ 打赏功能(微信/支付宝)
  • ✨ 广告位(侧边栏 + 文章内)
  • ✨ 首页轮播图
  • ✨ 完整响应式设计
  • ✨ 性能优化

👨‍💻 作者

Jessadmin


📄 许可证

MIT License


🙏 致谢

感谢所有为本主题做出贡献的开发者和使用者。


🤝 贡献

欢迎提交 Issue 和 Pull Request!

如果您在使用过程中遇到任何问题或有改进建议,欢迎:


📮 联系方式


感谢使用 SeeLTheme! 🎉

如果觉得这个主题对你有帮助,请给个 Star ⭐ 支持一下!

Made with ❤️ by Jessadmin

About

一款现代化的 Typecho 博客主题,支持简洁化与玻璃态双主题自由切换。

Resources

Stars

Watchers

Forks

Packages

No packages published