文章

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

技术栈,作品集
CONTENT / 正文
导读似水流年 · AI 生成
嘿,这回我捣鼓了个新玩意儿,给学设计的伙伴们弄了个带作品集的网站模板。本来是给大一下半学期的小姐姐做的,结果搞不定Astro,最后移植到了typecho,方便多了。

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

我在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. 点击「设置外观」配置主题选项

基础设置(外观设置)

选项说明
站点 Logo 地址导航栏显示的 Logo 图片 URL
站点副标题首页 Hero 区域显示的副标题
GitHub 仓库格式:owner/repo,用于显示 Stars
社交链接GitHub、微博、小红书、Bilibili、Email
首页筛选分类启用的作品分类筛选项
代码高亮主题5 种可选主题
自定义 CSS额外的 CSS 样式
ICP 备案号页脚显示

作品自定义字段(文章编辑页)

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

字段说明示例
封面图地址作品卡片封面,留空取正文首图https://example.com/cover.jpg
详情页链接卡片点击跳转链接/detail/project-name
外部项目链接项目线上地址https://project.example.com
文章简介SEO/分享卡片描述,留空取正文截断一句话说明这个项目
英文标题作品卡片上的英文标题Landing Page
显示文章目录正文自动生成目录是 / 否
分类、标签直接用 Typecho 原生功能;「是否推荐」在「外观设置 → 主题设置 → 推荐文章」里填文章 ID。
旧的 分类标签 / 显示标签 / 推荐标记 / 视频封面 字段已废弃,进后台会被自动清理。

🎨 主题结构

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/        # 静态资源

🔧 兼容性

版本支持状态备注
Typecho 1.2.x✅ 完全支持官方稳定版
Typecho 1.3.x (dev)✅ 支持开发版
typerenew✅ 支持自动检测适配

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

COMMENTS / 评论

添加新评论

已有 16 条评论

  1. 滴
    滴水萍水相逢一次擦肩,也是相逢滴水 · Lv1「萍水相逢」 —— 下一阶「点头之交」计数1/5← 当前瓶颈:再评 4 条活跃1/3资历14/14

    这主题不错,帅💯

    1. 似
      似水流年

      折腾了半个月,目前功能和样式基本已经完善稳定了。

  2. 沐
    沐阳萍水相逢一次擦肩,也是相逢沐阳 · Lv1「萍水相逢」 —— 下一阶「点头之交」计数3/5← 当前瓶颈:再评 2 条活跃3/3资历32/14

    从小红书找主题、GitHub 下源码、被 Astro 搞崩溃、AI 建议移植 Typecho、邮件征许可、国庆前发布 —— 这整个过程就是独立开发者的日常。给女儿做作品集这个出发点也好,不是为了流量,就是单纯想帮孩子一把,这种网站做出来反而最用心。

    1. 似
      似水流年

      谢谢,就是图一个爱好。

  3. 扶
    扶苏常来常往门常开,人常来扶苏 · Lv3「常来常往」 —— 下一阶「渐渐相熟」计数28/40← 当前瓶颈:再评 12 条活跃24/22资历709/60

    插图焕然一新~AI自动读取内容输出的吗?

    1. 似
      似水流年

      对的,用元宝生成的。

  4. 老
    老罗常来常往门常开,人常来老罗 · Lv3「常来常往」 —— 下一阶「渐渐相熟」计数19/40← 当前瓶颈:再评 21 条活跃15/22资历212/60

    展示图片的布局

    1. 似
      似水流年

      嗯,和我上个主题布局基本一样。

  5. 花
    花非花常来常往门常开,人常来花非花 · Lv3「常来常往」 —— 下一阶「渐渐相熟」计数31/40← 当前瓶颈:再评 9 条活跃23/22资历688/60

    是有设计师的感觉啊

    1. 似
      似水流年

      这个主题就是国内的一个专业设计师设计的。👍

  6. 老
    老罗常来常往门常开,人常来老罗 · Lv3「常来常往」 —— 下一阶「渐渐相熟」计数19/40← 当前瓶颈:再评 21 条活跃15/22资历212/60

    比你上一套主题排版感觉要好一点。

    1. 似
      似水流年

      原来那个主题是不是颜色太浓郁了一点。🤣

  7. 彬
    彬红茶常来常往门常开,人常来彬红茶 · Lv3「常来常往」 —— 下一阶「渐渐相熟」计数19/40← 当前瓶颈:再评 21 条活跃19/22资历460/60

    哇塞,这套也好好看,小清新

    1. 似
      似水流年

      确实小清新。😎

  8. 西
    西风萍水相逢一次擦肩,也是相逢西风 · Lv1「萍水相逢」 —— 下一阶「点头之交」计数4/5← 当前瓶颈:再评 1 条活跃4/3资历46/14

    第一次感觉全宽主题也是蛮好看的

    1. 似
      似水流年

      这套感觉确实可以,多谢你的节期,这个插件已经完全兼容。👍

  9. o
    obaby久处老友不必寒暄,你来了就好obaby · Lv5「久处老友」 —— 下一阶「千里知己」计数106/180← 当前瓶颈:再评 74 条活跃101/90资历1039/365

    效果不错

    1. 似
      似水流年

      谢谢O姐😉

  10. y
    ymz316渐渐相熟名字记住了,声音也熟了ymz316 · Lv4「渐渐相熟」 —— 下一阶「久处老友」计数44/90← 当前瓶颈:再评 46 条活跃42/45资历621/150

    简约耐看!那个鼠标的小跟班有点问题,滚动越长与鼠标跟随越远。

    1. 似
      似水流年

      我看一下。😀

LEFT / 附记