Rico-Portfolio 移植于Astro的设计师主题

老大大一下半学期，我听说学设计的用人单位主要看重的是作品集，所以就想给她做一个带有作品集的网站，主要展示她的日常习作，为以后求职提供些便利，然后就在网上找各种源码。我当时的需求就是找一款既符合要求又能体现设计让人眼前一亮的界面，终于在小红书上找到了这一款开源主题。

我在github上下了源码，读了说明才知道这款来自于Astro，使用markdown编辑器。我对markdown并不了解，更是第一次听说Astro，按照教程和AI的指导，终于搭建成功。但是后来在填充网站内容的时候，我才意识到这个Astro对于我来说是多么复杂，所有都要本地编辑，编译后再上传，我留言问了作者，作者回复说没有做后台，更崩溃了。

得益于AI模型的发展，在经历一些小玩意儿的折腾之后，我突发奇想看能否给这款主题做个后台，这样发布文章啥的方便一些，经过AI的分析，它给我了一个我没有想到的方式：何不把它移植到typecho作为typecho的主题呢？这显然是一个更加便利的方法，于是，我发邮件给原作者，得到了如下的回复：

经过几天的移植、调试和优化，终于赶到国庆之前发布了正式版。

✨ 特性

• 作品展示首页 - 网格布局、分类筛选、排序
• 文章/页面系统 - 完整支持 Typecho 原生文章、页面、分类、标签
• 自定义字段 - 封面图、详情链接、外部链接、文章简介、英文标题、文章目录
• 响应式设计 - 移动端、平板、桌面端完美适配
• 深色/浅色模式 - 自动跟随系统，支持手动切换
• 代码高亮 - 支持多种主题
• GitHub Stars - 实时显示仓库 Stars 数（服务端代理 + 文件缓存）
• 评论系统 - 原生 Typecho 评论，支持嵌套回复
• SEO 优化 - 完整的 Open Graph（og:title/og:description/og:image）
• typerenew 兼容 - 自动检测并适配二开版本特性

📦 安装

下载本主题

1. 将 rico-portfolio 文件夹上传到 Typecho 的 usr/themes/ 目录
2. 在后台「控制台」→「外观」中启用主题
3. 点击「设置外观」配置主题选项

基础设置（外观设置）

作品自定义字段（文章编辑页）

启用主题后，文章编辑页会自动显示以下字段：

分类、标签直接用 Typecho 原生功能；「是否推荐」在「外观设置 → 主题设置 → 推荐文章」里填文章 ID。
旧的 分类标签 / 显示标签 / 推荐标记 / 视频封面 字段已废弃，进后台会被自动清理。

可用分类：recommend(推荐) web(网页) ui(UI) 3d(3D) photography(摄影) brand(品牌)

🎨 主题结构

rico-portfolio/
├── index.php          # 首页/列表页
├── post.php           # 文章详情页
├── page.php           # 独立页面
├── archive.php        # 归档页
├── 404.php            # 404 页面
├── header.php         # 头部模板
├── footer.php         # 底部模板
├── comments.php       # 评论模板
├── functions.php      # 主题函数 & 配置
├── Plugin.php         # 插件接口（typerenew 兼容）
├── style.css          # 主样式文件
├── screenshot.png     # 主题预览图
└── assets/
    └── images/        # 静态资源

🔧 兼容性

typerenew 特殊适配

• 自动检测 TYPERENEW_VERSION 常量或 sygs/ 目录
• 兼容 Utils\Helper 命名空间差异
• 支持额外的 Widget 类（Forgot、Reset、Mail 等）

📝 使用指南

创建作品

1. 后台「撰写」→「撰写文章」
2. 填写标题、内容
3. 在「自定义字段」区域填写作品信息
4. 发布即可在首页作品网格显示

创建博客文章

正常发布文章即可，无需填写作品字段，将显示在博客列表中。

创建独立页面

后台「管理」→「独立页面」→「新增」，用于关于、联系等页面。

设置导航菜单

后台「管理」→「独立页面」创建页面后，自动显示在导航栏。

🎯 自定义开发

修改样式

编辑 style.css，CSS 变量在 :root 中定义：

:root {
  --accent-regular: #4a6fff;  /* 主色调 */
  --color-900: #f0f0f0;       /* 主文字色 */
  /* ... 更多变量 */
}

添加自定义模板

在主题目录创建 page-custom.php，页面编辑时选择「自定义模板」。

扩展自定义字段

在 functions.php 的 themeConfig() 中添加表单元素，在 Plugin.php 中处理保存逻辑。

下载地址

https://wwaza.lanzn.com/b00jfllsqh
密码:fwxc