Bako - 个人作品集与简历 Typecho 主题

Bako是一个专业美观的个人作品集主题，专为Typecho博客系统设计。集成了现代化的界面设计、响应式布局和丰富的功能，适合个人开发者、设计师、自由职业者展示作品和提供服务。

screenshot.png

? 主题架构

Bako主题采用模块化架构设计，主要包括以下核心部分：

核心文件结构

  • index.php - 首页模板，包含Hero区域、关于我、技能展示等模块
  • functions.php - 主题函数文件，包含所有自定义功能和主题设置选项
  • header.php - 页头模板，包含导航菜单和Logo设置
  • footer.php - 页脚模板，包含版权信息和社交媒体链接
  • post.php - 文章页面模板，支持内容可见性和代码高亮
  • archive.php - 文章归档页面模板
  • archive-custom.php - 自定义归档页面，采用时间线布局
  • comments.php - 评论模板，美观现代的评论区设计
  • page.php - 独立页面模板

目录结构

  • /css - 所有样式文件
  • /js - JavaScript脚本文件
  • /images - 主题图片资源
  • /lang - 语言文件（支持多语言）
  • /fonts - 字体文件
  • /webfonts - Web字体图标

✨ 主题特色功能

1. 响应式设计

  • 完美适配电脑、平板和手机等各种屏幕尺寸
  • 针对移动端优化的导航菜单和内容布局
  • 自动调整图片和组件大小，确保最佳显示效果

2. 个性化首页

  • 可自定义Hero区大图背景
  • 可配置的个人简介和技能展示
  • 成就统计模块，支持动态数字统计效果
  • 服务项目展示，清晰展示您的专业服务

3. 作品集展示

  • 作品集网格布局，支持过滤和分类
  • 作品详情页面，展示项目详细信息
  • 支持图片灯箱效果，优化浏览体验
  • 可设置作品集加载更多功能

4. 增强的文章功能

  • 代码高亮显示，支持多种编程语言
  • 代码块一键复制功能
  • 自动生成文章摘要
  • 支持内容可见性控制（登录可见、回复可见）
  • 文章二维码分享功能

5. 时间线归档

  • 美观的时间线布局展示文章归档
  • 按年月分组展示文章
  • 动画效果增强用户体验

6. 评论系统增强

  • 现代化评论区设计
  • 多层嵌套回复支持
  • 自适应移动端的评论表单
  • 优化的评论者信息显示

7. 联系功能

  • 内置联系表单，支持直接发送邮件
  • 社交媒体链接整合
  • 微信二维码弹窗显示

? 主题配置选项

Bako主题提供丰富的配置选项，可以在Typecho后台"外观设置"中进行配置：

基础设置

  • Logo设置
  • 网站标题和副标题
  • 版权信息

Hero区域设置

  • 背景图片
  • 标题和描述文字
  • 两个可自定义按钮

关于模块设置

  • 个人照片
  • 简介文字
  • 个人信息（姓名、技能、地区、邮箱）
  • 简历下载按钮和微信二维码

技能展示设置

  • 技能描述
  • 四项主要技能和熟练度百分比

成就统计设置

  • 四项可自定义统计数字
  • 标题和图标设置

服务项目设置

  • 六个服务项目展示
  • 标题、描述和图标设置

作品集设置

  • 分类过滤设置
  • 作品集布局设置

博客设置

  • 文章显示数量
  • 文章摘要长度
  • 阅读更多文字

联系方式设置

  • 地址、电话、邮箱
  • 联系表单收件邮箱
  • 谷歌地图API密钥

社交媒体设置

  • Facebook、Twitter、Instagram等社交媒体链接
  • 图标显示设置

? 详细功能使用教程

1. 内容可见性功能

Bako主题支持两种内容可见性控制：

登录可见

在文章编辑器中使用以下短代码：

[login]这里是只有登录用户才能看到的内容[/login]

回复可见

在文章编辑器中使用以下短代码：

[reply]这里是需要评论后才能查看的内容[/reply]

2. 代码高亮使用

Bako主题内置Prism.js代码高亮支持，使用方法：

Markdown格式

```php
function example() {
    echo "Hello World!";
}
```

支持的语言

  • HTML/XML
  • CSS
  • JavaScript
  • PHP
  • Python
  • Java
  • C/C++
  • SQL
  • Bash
  • 等多种编程语言

3. 文章缩略图设置

文章缩略图可以通过以下方式设置：

  1. 在文章编辑页面上传第一张图片作为缩略图
  2. 在文章自定义字段中添加 thumb 字段并填入图片URL

4. 作品集项目添加

作品集项目通过自定义分类和文章实现：

  1. 创建一个名为"作品集"的分类
  2. 在该分类下发布文章
  3. 设置文章缩略图

  4. 在文章自定义字段中添加：

    • project_client - 客户名称
    • project_date - 项目日期
    • project_url - 项目链接
    • project_category - 项目分类（用于过滤）

5. 二维码功能使用

二维码功能主要用于微信分享：

  1. 在主题设置中上传您的微信二维码图片
  2. 设置"关于我"部分的"联系我"按钮文字
  3. 访问者点击按钮后将显示二维码弹窗

6. 时间线归档使用

时间线归档页面自动按年月组织文章，使用方法：

  1. 创建一个独立页面
  2. 选择"时间线归档"模板
  3. 发布页面并添加到导航菜单

7. 多媒体功能

主题支持多种多媒体内容的嵌入：

视频嵌入

[video]https://www.youtube.com/watch?v=your_video_id[/video]

图片画廊

[gallery]图片1.jpg|图片2.jpg|图片3.jpg[/gallery]

? 插件兼容性

Bako主题与以下Typecho插件兼容性良好：

  • ArticlePoster - 文章海报生成
  • HandlersManager - 自定义路由管理
  • Links - 友情链接管理
  • Sitemap - 网站地图生成
  • HighSlide - 图片灯箱效果
  • CodeHighlighter - 代码高亮（主题已内置Prism.js，无需此插件）
  • TeStore - 插件商店

? 移动端优化

Bako主题针对移动设备进行了全面优化：

  • 响应式导航菜单，支持触控操作
  • 自适应布局，确保在各种屏幕尺寸下美观
  • 针对触屏优化的交互元素和按钮大小
  • 优化的图片加载和显示
  • 移动端专用CSS修复和增强

? 性能优化

  • 精简的CSS和JavaScript文件
  • 延迟加载非关键资源
  • 优化的图片加载
  • 代码压缩和合并
  • 字体图标替代图片图标

? 主题依赖

Bako主题使用了以下框架和库：

  • Bootstrap 4 - 响应式布局框架
  • jQuery - JavaScript库
  • Font Awesome - 图标库
  • Simple Line Icons - 线性图标集
  • Slick Carousel - 轮播图插件
  • mCustomScrollbar - 自定义滚动条
  • Isotope - 过滤和排序布局
  • Infinite Scroll - 无限滚动加载
  • Waypoints - 滚动触发动画
  • CounterUp - 数字计数动画
  • Prism.js - 代码高亮
  • Animate.css - CSS动画库

? 更新日志

版本 1.0.0 (初始发布)

  • 发布Bako主题基础功能
  • 响应式设计支持
  • 作品集和博客功能
  • 联系表单集成

?‍? 关于作者

本插件由乐乐主题创作室开发，专注于Typecho主题定制、插件开发、网站优化与SEO服务。

购买主题

Bako.zip