Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/little-gt/theme-roricaltheme

一款充满活力的 Typecho 主题，基于 Agron 设计开发，现由 little-gt 继续持续维护和更新。
https://github.com/little-gt/theme-roricaltheme

typecho typecho-theme

Last synced: 14 days ago
JSON representation

一款充满活力的 Typecho 主题，基于 Agron 设计开发，现由 little-gt 继续持续维护和更新。

Awesome Lists containing this project

README 

          
# 🌸 Rorical Theme for Typecho



> 简洁 · 可爱 · 功能强大

>

> 一款为 Typecho 打造的现代化卡片式主题。基于 Argon 设计，并且重构了系统的功能函数以及运行逻辑，支持无插件依赖的阅读统计以及 Cookie 管理器。



[![Rorical](https://img.shields.io/badge/版本-1.2.12-007EC6?style=for-the-badge)](https://github.com/little-gt/THEME-RoricalTheme/) [![License](https://img.shields.io/badge/许可证-GPLv3-blue?style=for-the-badge)](https://www.gnu.org/licenses/gpl-3.0.html) [![Argon](https://img.shields.io/badge/设计支持-Argon-orange?style=for-the-badge&logo=Argon)](https://demos.creative-tim.com/argon-design-system/)



主题预览：



![预览1](screenshot/图片1.jpg)



![预览2](screenshot/图片2.jpg)



![预览3](screenshot/图片3.jpg)



参与讨论：



[Typecho 官方论坛主题帖](https://forum.typecho.org/viewtopic.php?t=25572)



---



## ✨ 特点概览



| 功能模块 | 说明 |

| :-- | :-- |

| **轻快交互** | PowerMode 打字特效、鼠标点击涟漪、AJAX 评论与搜索 |

| **文章增强** | 自动 TOC 目录、阅读统计、字数统计、评论计数 |

| **兼容优化** | 完全支持 Typecho 1.2.1-1.3.0 / PHP 7.4-8.3 / MySQL 8.X-9.X |

| **高度自定义** | 独立页面图标与配色、自定义导航栏样式、双端背景、LOGO 设置 |

| **现代化设计** | 基于 Argon Design System 与 Bootstrap 4，响应式支持多端展示 |

| **归属地展示** | 评论区 IP 归属展示（依赖 [XQLocation](https://www.toubiec.cn/1194.html)） |

| **Cookie合规** | 支持 GDPR/最新2026年执行的中国网络安全规范的 Cookie 同意模式 |

| **评论管理** | 扁平化评论结构、回复提及功能、未登录用户权限控制 |

| **隐私政策** | 支持自定义隐私政策页面 URL |



---



## 🚀 近期更新



### 🛠️ 功能与性能优化

- **PJAX 页面变量声明修复**：统一使用 `var page = X` 声明页面标识变量，避免 PJAX 局部刷新时出现 "Identifier 'page' has already been declared" 错误



### ⚠️ 重要变更

- **评论系统简化**：出于兼容性和稳定性考虑，移除了复杂的嵌套评论功能。现采用扁平化评论结构，所有评论按时间顺序显示。此调整：

  - ✅ 提升了跨版本兼容性（Typecho 1.2.1-1.3.0）

  - ✅ 减少了 PHP 版本依赖问题（PHP 7.4-8.3）

  - ✅ 简化了代码维护，提高了稳定性

  - ✅ 保留了回复功能，用户仍可使用 @ 提及进行互动



---



## ⚙️ 安装指南



1. **下载主题**

   ```bash

   git clone https://github.com/little-gt/THEME-RoricalTheme.git

   ```

   或直接下载 ZIP 压缩包上传至：

   ```

   /usr/themes/RoricalTheme/

   ```



2. **启用主题**



   * 登录 Typecho 后台 → 外观 → 启用 “Rorical Theme”，并且配置 Rorical Theme 主题的自定义选项。



3. **依赖插件**



   * 安装 [XQLocation](https://www.toubiec.cn/1194.html) 插件以启用 IP 归属显示功能。



---



## 🎨 独立页面图标与颜色配置



> 为导航栏下拉菜单中的独立页面设置专属图标与背景色。



在 Typecho 后台编辑页面时添加自定义字段：



| 字段名     | 示例值                   | 说明                  |

| :------ | :-------------------- | :------------------ |

| `color` | `bg-gradient-success` | 设置图标圆形背景色           |

| `icon`  | `ni-spaceship`        | 设置图标样式（Nucleo Icon） |



**可用颜色值表**



请务必填写下面参考的可用颜色值，否则菜单栏图标的背景颜色将不会正常显示。



| 字段值                   | 颜色效果 |

| :-------------------- | :--- |

| `bg-gradient-success` | 绿色   |

| `bg-gradient-danger`  | 红色   |

| `bg-gradient-info`    | 蓝色   |

| `bg-gradient-primary` | 紫色   |

| `bg-gradient-warning` | 橙色   |

| `bg-gradient-default` | 灰紫色  |



**可用图标值说明**



请访问 Creative Tim 的 Argon 前端框架的 ICONS 参考值文档，复制文档中对应的值。



[Argon Icons Reference](https://demos.creative-tim.com/argon-design-system/docs/foundation/icons.html)



---



## 🔗 友情链接页面配置



> 使用 `friends.php` 自定义模板创建精美的友情链接展示页面。



### 📝 创建步骤



1. **创建独立页面**

   - 登录 Typecho 后台 → 管理 → 独立页面 → 新建页面



2. **选择自定义模板**

   - 在页面编辑器右侧（或底部）找到"高级选项"

   - 在"自定义模板"下拉框中选择 **"友情链接"**



3. **添加友链内容**

   - 在页面内容区域使用以下 HTML 格式添加友链数据：



```html



    
    

            
  • 网站名称
    • 

            
  • https://example.com
    • 

            
  • https://example.com/logo.png
    • 

            
  • 网站描述文字
    • 

        


    



```



### 📋 字段说明



| 字段 | 必填 | 说明 |

|:-----|:----:|:-----|

| `li.title` | 是 | 友链网站名称 |

| `li.url` | 是 | 友链网站地址（支持 http/https） |

| `li.img` | 否 | 网站 Logo 或头像图片 URL（留空则使用随机图片） |

| `li.dec` | 否 | 网站简短描述（建议 20 字以内） |



### 🎨 显示效果



- 自动以卡片式布局展示（每行 4 个，响应式适配）

- 支持 Logo 圆形头像展示

- 鼠标悬停卡片上浮效果

- 点击在新标签页打开友链网站



### ⚠️ 注意事项



- **安全性**：所有字段内容会自动进行 XSS 过滤，防止恶意代码注入

- **图片优化**：建议使用正方形图片（推荐 200x200px），自动居中裁剪

- **性能**：页面会自动应用图片懒加载，提升访问速度



---



## 🍪 Cookie 合规功能配置



### 关于 Cookie 合规功能



为了适配 Cookie 管理器功能，需要你新建一个名为“隐私政策”的独立页面，其 URL 形为`example.com/privacy.html`，或者你可以替换`footer.php`下面的代码到特定的隐私政策页面上：



```php

options->siteUrl('./privacy.html'); ?>

```



### 使用 Cookie 合规功能



你可以在 HTML 中随意混合使用外部引用 JS 和内嵌 JS 这两种类型的可选择的 JavaScript，脚本都会自动处理。



**自动清理**：执行后移除 `data-consent-category` 属性，防止混淆。



**通用适配**：支持 `src`、`async`、`defer` 等属性的复制。



#### 1. 外部引用 JS (如引入某个特效库)

```html



```



#### 2. 外部引用 JS (带 async/defer 属性)

```html



```



#### 3. 内嵌 JS (如初始化代码)

```html



    console.log("功能性脚本已加载");

    myFunction.init();



```



---



## 🎯 主题配置功能



### 🔒 评论权限控制



在 Typecho 后台 → 控制台 → 外观 → 主题设置 → **访客评论设置**：



- **允许未登录用户评论**（默认）：所有访客都可以发表评论

- **禁止未登录用户评论**：只有登录用户才能评论



**安全特性：**

- ✅ 前端表单控制 - 未登录用户看不到评论表单

- ✅ 后端权限验证 - 服务器端二次校验，防止绕过前端提交

- ✅ AJAX 请求保护 - 返回 JSON 错误响应

- ✅ 403 状态码 - 符合 HTTP 标准的权限拒绝



#### 自定义禁止评论提示



在 **禁止访客评论提示** 文本框中，你可以自定义提示信息。支持使用占位符：



- `%loginUrl%` - 会自动替换为登录页面链接



**示例：**

```

抱歉，本站仅允许登录用户发表评论。请先登录您的账户。

```



### 🔗 自定义隐私政策链接



在主题设置 → **隐私政策链接** 中，你可以设置隐私政策页面的 URL：



**支持的格式：**

- 相对路径：`./privacy.html` 或 `/privacy.html`

- 完整 URL：`https://example.com/privacy`

- 独立页面：创建一个名为"隐私政策"的独立页面，然后填入其 URL



该链接会在以下位置显示：

- Cookie 同意横幅

- Cookie 设置弹窗



---



## 📢 特效交互控制



* ✅ PowerMode 打字特效（评论区）

* ✅ 评论区 Cookie 同意提示

* ✅ 鼠标点击涟漪动画

* ✅ Lazyload 图片懒加载

* ✅ AJAX 评论与搜索（PJAX 技术）

* ✅ 无刷新的一致性浏览体验



---



## 🧱 使用的组件



| 组件         | 描述                             |

| :---------- | :----------------------------- |

| **框架**     | Bootstrap 4, jQuery 3.3.1       |

| **设计系统** | Argon Design System            |

| **图标库**   | Nucleo Icons, Font Awesome 4.7  |

| **异步交互** | PJAX                           |

| **渲染优化** | Lazyload.js                    |



---



## ❤️ 开源与支持



> 如果你喜欢这个项目，请点个 ⭐ Star 支持我们！



* **设计师**：[@Rorical](https://github.com/Rorical/RoricalTheme)

* **维护者**：[@little-gt](https://github.com/little-gt/THEME-RoricalTheme)



---



**Rorical Theme** — 让博客更活泼、更有趣。