文章

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

技术栈,作品集 /
CONTENT / 正文
AI摘要
根据文章内容生成

本文讲述作者为设计师女儿创建作品集网站,将Rico-Portfolio主题从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

AFTER / 附记

您已阅读完《技术栈(共28篇)》目录的第 27 篇。请继续阅读本文后3篇文章:

阅读本目录下更多其它文章

COMMENTS / 评论

添加新评论

已有 30 条评论

  1. 沐
    沐阳
    从小红书找主题、GitHub 下源码、被 Astro 搞崩溃、AI 建议移植 Typecho、邮件征许可、国庆前发布 —— 这整个过程就是独立开发者的日常。给女儿做作品集这个出发点也好,不是为了流量,就是单纯想帮孩子一把,这种网站做出来反而最用心。
    1. 似
      似水流年
      谢谢,就是图一个爱好。
  2. 扶
    扶苏
    插图焕然一新~AI自动读取内容输出的吗?
    1. 似
      似水流年
      对的,用元宝生成的。
  3. 老
    老罗
    展示图片的布局
    1. 似
      似水流年
      嗯,和我上个主题布局基本一样。
  4. 花
    花非花
    是有设计师的感觉啊
    1. 似
      似水流年
      这个主题就是国内的一个专业设计师设计的。👍
  5. 老
    老罗
    比你上一套主题排版感觉要好一点。
    1. 似
      似水流年
      原来那个主题是不是颜色太浓郁了一点。🤣
  6. 彬
    彬红茶
    哇塞,这套也好好看,小清新
    1. 似
      似水流年
      确实小清新。😎
  7. 西
    西风
    第一次感觉全宽主题也是蛮好看的
    1. 似
      似水流年
      这套感觉确实可以,多谢你的节期,这个插件已经完全兼容。👍
  8. o
    obaby
    效果不错
    1. 似
      似水流年
      谢谢O姐😉
  9. y
    ymz316
    简约耐看!那个鼠标的小跟班有点问题,滚动越长与鼠标跟随越远。
    1. 似
      似水流年
      我看一下。😀
  10. 摸
    摸鱼大王
    确实有眼前一亮的感觉
    1. 似
      似水流年
      那就达到我的目的了。😂