DevFolio主题-专为独立开发者、技术博主、开源作者打造的 Typecho 极简响应式主题。

## DevFolio For Typecho

专为独立开发者、技术博主、开源作者打造的 Typecho 极简响应式主题。

Content-First · Minimalist · Extensible

✨ 特性

🎨 视觉设计

📝 内容增强

🔧 交互体验

🔒 安全与合规

📊 统计与评论

🛠 可扩展性

🖼 效果预览

首页卡片布局

┌─────────────────────────────────────────────────┐
│ ┌──────────┐ ┌────────────────────────────────┐ │
│ │          │ │ 📅 2024-01-15 · ⏱ 5 分钟 · 1200 字│ │
│ │  缩略图   │ │                                │ │
│ │          │ │  文章标题                         │ │
│ │          │ │                                │ │
│ └──────────┘ │  摘要文本 摘要文本 摘要文本...        │ │
│              │  → 阅读全文                       │ │
│              └────────────────────────────────┘ │
└─────────────────────────────────────────────────┘

文章详情页

┌──────┐ ┌─────────────────────────────┐
│ 文章  │ │                             │
│ 目录  │ │  文章标题                     │
│  ∇    │ │  📅 日期 · ⏱ 阅读时间 · 字数   │
│      │ │                             │
│      │ │  正文内容...                   │
│      │ │                             │
│      │ │  ┌────────────────────┐     │
│      │ │  │ 版权声明            │     │
│      │ │  └────────────────────┘     │
│      │ │  ← 上一篇 | 下一篇 →         │
│      │ │  💬 评论区域                │
└──────┘ └─────────────────────────────┘

🚀 快速开始

环境要求

安装步骤

1. 下载主题压缩包，解压后得到 DevFolio 文件夹
2. 将 DevFolio 文件夹上传到 Typecho 的 /usr/themes/ 目录
3. 将 go.php 上传到 Typecho 根目录（附件下载确认功能需要）
4. 登录 Typecho 后台，进入 控制台 → 外观
5. 找到 DevFolio 主题，点击 启用
6. 进入 控制台 → 外观 → 设置外观，配置主题选项

⚙ 主题设置

启用主题后，在「设置外观」页面可配置以下选项：

🎨 外观

💬 评论

📋 备案

📊 统计

📝 内容

🔒 安全

🔧 自定义

🏷 版权信息变量

在「文章底部版权信息」中，支持以下变量：

示例配置：

本文「{title}」由 {author} 原创发布，采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
原文链接：{url}

📂 自定义字段

DevFolio 提供 4 个文章级自定义字段：

在文章编辑页面底部的「自定义字段」区域添加即可。

提示：首页卡片缩略图自动从正文第一张图片提取，无需手动设置 cover_image。

📄 页面模板

作品展示 (page-showcase.php)

创建独立页面时选择模板「作品展示」，将以网格卡片布局展示所有已发布文章及其自定义字段：

┌──────────┐ ┌──────────┐ ┌──────────┐
│  封面图   │ │  封面图   │ │  封面图   │
│  Hover   │ │  Hover   │ │  Hover   │
│  [演示]   │ │  [演示]   │ │  [演示]   │
│  [源码]   │ │  [源码]   │ │  [源码]   │
│───────   │ │───────   │ │───────   │
│ 项目名称  │ │ 项目名称  │ │ 项目名称  │
│ Vue PHP  │ │ React Go │ │ Flutter  │
└──────────┘ └──────────┘ └──────────┘

每张卡片 hover 时显示「在线演示」和「查看源码」按钮（需设置对应自定义字段）。

📁 文件结构

DevFolio/
├── 🖼 screenshot.png                  # 主题缩略图（需自行提供）
├── 📄 style.css                       # 主题元信息注释（Theme Name/Author/Version/Requires）
├── 📄 functions.php                   # 主题设置面板 + 自定义字段注册 + 工具函数
│
├── 📄 index.php                       # 首页 / 归档列表模板
├── 📄 post.php                        # 文章详情页模板
├── 📄 page.php                        # 普通页面模板
├── 📄 page-showcase.php              # 作品展示自定义页面模板
├── 📄 search.php                      # 搜索页模板
├── 📄 404.php                         # 404 错误页模板
│
├── 📂 parts/
│   ├── header.php                     # 页头（SEO Meta + 导航栏 + CSS加载）
│   ├── footer.php                     # 页脚（备案 + 统计 + JS加载）
│   └── comments.php                   # 评论区（原生评论系统）
│
├── 📂 components/
│   ├── post-card.php                  # 首页文章卡片（缩略图 + 摘要）
│   ├── post-meta.php                  # 文章元信息（日期/阅读时间/字数/分类）
│   ├── pagination.php                 # 分页导航
│   ├── toc.php                        # 文章目录容器
│   └── showcase-card.php             # 作品展示卡片
│
└── 📂 assets/
    ├── 📂 css/
    │   └── main.css                   # 主样式表
    └── 📂 js/
        └── theme.js                   # 主题脚本（暗黑模式/TOC/代码增强/灯箱/搜索/懒加载/高亮/外链/访客/URL识别）

❓ 常见问题

if (!function_exists('devfolio_extract_thumb')) {
    function devfolio_extract_thumb($content) { ... }
}

📝 更新日志

v1.0.0 (2024-06)

• 🎉 首个正式版本发布
• ✨ 支持 Typecho ≥ 1.3.0（经典模板 API）
• ✨ 卡片式首页布局，自动提取缩略图
• ✨ 左侧悬浮 TOC 文章目录
• ✨ 暗黑模式支持（浅色/深色/跟随系统）
• ✨ Mac 风格代码块增强（标题栏 + 复制 + 行高亮）
• ✨ highlight.js 代码语法高亮
• ✨ 图片灯箱（点击放大）
• ✨ 外链安全跳转提示 + 白名单
• ✨ 附件下载确认页 go.php
• ✨ 文章底部版权信息（变量替换）
• ✨ 页脚备案信息（ICP + 公安）
• ✨ 建站时间 + 累计访客统计
• ✨ 三种评论系统支持（原生/Twikoo/Waline）
• ✨ 作品展示自定义页面模板
• ✨ 智能网址识别
• ✨ Logo + Favicon 自定义
• ✨ 响应式设计（移动端/平板/桌面）
• ✨ SEO 优化（OGP / Twitter Card / Schema.org）
• ✨ 阅读时间 + 字数统计
• ✨ 内容过时警告
• ✨ 搜索快捷键 Ctrl+K
• ✨ 后台 themeConfig() 配置面板
• ✨ window.DevFolio JS 配置桥接

📄 许可

本主题基于 GPL 2.0 协议发布，可自由使用、修改和分发。

🔗 链接

• 作者博客：blog.wzu.me
• Typecho 官网：typecho.org
• Typecho 主题开发文档：docs.typecho.org/themes

下载链接