LeleQTheme - 清新简约的Typecho博客主题

screenshot.png

📚 目录

  • [主题介绍]
  • [主题架构]
  • [功能特点]
  • [安装方法]
  • [主题配置]
  • [特色功能]
  • [特色页面模板]
  • [插件介绍]
  • [使用教程]
  • [常见问题]
  • [更新日志]
  • [版权信息]

🌟 主题介绍

LeleQTheme是一款清新简约的响应式Typecho博客主题，专为个人博客设计，完美兼容Typecho 1.2.1版本。主题界面设计简洁美观，功能丰富实用，支持移动设备访问，给用户提供良好的阅读体验。

设计理念

  • 简约至上: 摒弃繁杂元素，专注内容呈现
  • 用户体验: 优化阅读体验，构建友好交互界面
  • 个性化定制: 提供丰富的自定义选项，满足个性化需求
  • 响应式设计: 自适应各种设备，完美兼容PC、平板和手机

🏗️ 主题架构

LeleQTheme采用模块化设计，结构清晰，便于定制和扩展：

LeleQTheme/
├── css/                    # 样式文件目录
│   ├── base.css            # 基础样式
│   ├── m.css               # 移动端响应式样式
│   ├── like.css            # 点赞功能样式
│   ├── share.css           # 分享功能样式
│   └── ...                 # 其他样式文件
├── js/                     # JavaScript文件目录
│   ├── comm.js             # 通用脚本
│   ├── like.js             # 点赞功能脚本
│   ├── share.js            # 分享功能脚本
│   └── ...                 # 其他脚本文件
├── images/                 # 图片资源目录
├── functions.php           # 主题核心功能
├── index.php               # 首页模板
├── header.php              # 页头模板
├── footer.php              # 页脚模板
├── post.php                # 文章页模板
├── page.php                # 独立页面模板
├── page-*.php              # 特殊页面模板
│   ├── page-about.php      # 个人简历页面模板
│   ├── page-tags.php       # 标签汇总页面模板
│   └── page-text-list.php  # 文章列表页面模板
├── comments.php            # 评论模板
├── archive.php             # 归档页面模板
└── 404.php                 # 404错误页面模板

✨ 功能特点

响应式设计

  • ✅ 自适应PC端、平板和手机等多种设备尺寸
  • ✅ 针对移动端优化的交互体验和布局结构
  • ✅ 采用媒体查询技术，确保在各种分辨率下均可正常显示

首页布局

  • ✅ 精美Banner轮播展示（支持最多3张轮播图）
  • ✅ 分类栏目展示（支持自定义背景图）
  • ✅ 精选文章区域（按分类展示，支持选项卡切换）
  • ✅ 个人名片展示（展示个人信息及二维码）
  • ✅ 最新文章列表（可自定义显示数量）
  • ✅ 站长推荐栏目（支持自定义文章）
  • ✅ 热门文章排行榜（基于访问量自动排序）

文章相关

  • ✅ 自动提取文章缩略图功能
  • ✅ 文章浏览量自动统计（无需额外插件）
  • ✅ 文章点赞功能（带动画效果）
  • ✅ 多平台分享按钮（微信、QQ、微博等）
  • ✅ 内容相关文章推荐
  • ✅ 文章作者信息展示

广告与变现

  • ✅ 首页多个广告位设置
  • ✅ 文章页面专属广告位
  • ✅ 移动端适配的广告展示

社交功能

  • ✅ 顶部社交媒体图标（QQ、电话、邮箱、微信）
  • ✅ 底部社交账号展示（微信公众号等）
  • ✅ 友情链接管理（集成Links插件）

📥 安装方法

  1. 下载主题文件压缩包，解压后将获得LeleQTheme文件夹
  2. 将整个LeleQTheme文件夹上传至您的Typecho站点的/usr/themes/目录中
  3. 进入Typecho后台 → 控制台 → 外观，找到"LeleQTheme"主题并启用

  4. 安装Links友情链接插件（如果需要友情链接功能）：

    • 将Links文件夹（位于主题包中）上传至您的Typecho站点的/usr/plugins/目录中
    • 进入Typecho后台 → 控制台 → 插件，启用Links插件
  5. 进入Typecho后台 → 外观 → 设置外观，根据需要配置主题选项

⚙️ 主题配置

基础设置

  • LOGO图片: 设置网站LOGO，显示在页面顶部左侧
  • 顶部广告: 设置顶部广告图片及链接，位于顶部LOGO右侧

Banner轮播设置

  • 轮播图片: 最多支持3张轮播图（推荐尺寸：620×400px）
  • 轮播内容: 每张Banner可设置标题、简介和跳转链接

精选栏目设置

  • 精选分类: 可选择要在精选区域显示的分类ID，多个用逗号分隔
  • 展示效果: 分类内容以选项卡形式展示，支持鼠标悬停切换

个人信息设置

  • 头像设置: 上传个人头像图片，显示在个人名片区域
  • 名片信息: 设置姓名、职业、网站地址、所在地等基本信息
  • 二维码: 上传个人微信二维码图片，方便访客与您联系

分类栏目设置

  • 背景图片: 为最多5个分类设置独立的背景图片
  • 展示效果: 分类以图文并茂的方式展示，包含分类名称和文章数量

文章设置

  • 最新文章: 设置首页显示的最新文章数量（默认12篇）
  • 站长推荐: 设置要在站长推荐区域显示的文章ID列表

广告位设置

  • 首页广告: 设置首页侧边栏的两个广告位图片和链接
  • 文章页广告: 设置文章页面的专属广告位图片和链接

底部信息设置

  • 站点地图: 设置网站地图、所有文章、标签合集等链接
  • 社交账号: 上传微信号和公众号二维码图片
  • 版权信息: 设置网站版权文字、备案号等信息

个人简历页面设置

  • 基本信息: 设置简历页面的姓名、职业、学历、出生日期等
  • 联系方式: 设置简历页面显示的联系电话、邮箱和地址
  • 专业技能: 可设置3项个人专业技能，支持自定义技能熟练度

🔥 特色功能

自动缩略图提取

主题会智能从文章中提取第一张图片作为缩略图。如需手动指定缩略图，可以：

  1. 在文章编辑页面添加自定义字段thumb，值为缩略图URL
  2. 或者在文章内容开头插入图片

如果文章没有图片且未设置自定义字段，主题会从内置的默认图片中随机显示一张。

浏览量统计

内置文章浏览量统计功能，无需额外安装插件。首次启用主题时，系统会自动为数据库添加必要的字段。统计数据显示在文章页面和文章列表中。

文章点赞功能

内置文章点赞功能，支持动画效果，并使用localStorage记录用户点赞状态，避免重复点赞。点赞数据保存在数据库中。

文章分享功能

支持一键分享文章到QQ、QQ空间、微博、微信等平台，帮助扩大文章传播范围。

自适应宽度

针对不同设备尺寸和分辨率优化，在PC端、平板和手机等各种设备上均能提供良好的浏览体验。

📝 特色页面模板

LeleQTheme内置了三种特色页面模板，可满足不同内容展示需求：

文章列表页面

  • 模板文件: page-text-list.php
  • 功能介绍: 以纯文本列表形式展示所有文章，按时间倒序排列
  • 适用场景: 网站导航、站点地图、文章归档等

标签汇总页面

  • 模板文件: page-tags.php
  • 功能介绍: 展示站点所有标签的汇总，按使用频率显示大小
  • 适用场景: 标签云、内容索引等

个人简历页面

  • 模板文件: page-about.php
  • 功能介绍: 美观的个人简历展示页面，左侧为基本信息，右侧为详细内容
  • 适用场景: 个人介绍、作者简历、团队成员介绍等

使用方法：创建页面时，在右侧"自定义模板"下拉框中选择对应的模板即可。

🔌 插件介绍

Links友情链接插件

  • 功能: 管理网站友情链接，支持分类、排序等功能
  • 位置: 位于主题包中的Links目录
  • 安装方法: 将Links目录上传到网站的/usr/plugins/目录，在后台启用
  • 使用方法: 启用后，在Typecho后台"管理"菜单中会出现"友情链接"选项
  • 显示位置: 友情链接将显示在首页底部区域

内置点赞插件

  • 功能: 为文章提供点赞功能，支持动画效果
  • 文件: 主题内置，包含在css/like.css和js/like.js中
  • 特点: 无需额外安装，主题自带，使用localStorage记录点赞状态

内置分享插件

  • 功能: 为文章提供社交媒体分享功能
  • 文件: 主题内置，包含在css/share.css和js/share.js中
  • 支持平台: QQ、QQ空间、微博、微信等主流社交平台

📖 使用教程

基础设置

  1. 设置LOGO

    • 进入Typecho后台 → 外观 → 设置外观
    • 在"LOGO图片地址"中填入您的LOGO图片URL

  2. 配置Banner轮播

    • 分别设置三张Banner图片地址（推荐尺寸：620×400px）
    • 为每张Banner设置标题、简介和链接

  3. 设置个人名片

    • 上传头像和二维码图片
    • 填写个人姓名、职业、网站地址和所在地

文章管理

  1. 设置文章缩略图

    • 方法一：在文章开头插入图片
    • 方法二：在文章编辑页面添加自定义字段thumb，值为图片URL

  2. 设置站长推荐文章

    • 在主题设置中的"站长推荐文章"选项填入文章ID，多个用逗号分隔
    • 文章ID可在编辑文章页面的URL中找到，如cid=123中的123即为文章ID

  3. 设置精选栏目

    • 在主题设置中的"精选栏目ID"选项填入分类ID，多个用逗号分隔
    • 分类ID可在编辑分类页面的URL中找到，如mid=5中的5即为分类ID

页面创建

  1. 创建个人简历页面

    • 创建新页面，标题如"关于我"
    • 在右侧"自定义模板"下拉框中选择"个人简历页面"
    • 在内容编辑器中填写简历详细内容
    • 在主题设置中完善"个人简历页面设置"区域的配置

  2. 创建标签汇总页面

    • 创建新页面，标题如"标签云"
    • 在右侧"自定义模板"下拉框中选择"标签汇总页面"
    • 发布页面后，在主题设置的"页脚设置"中的"标签合集地址"填入该页面URL

  3. 创建文章列表页面

    • 创建新页面，标题如"文章归档"
    • 在右侧"自定义模板"下拉框中选择"文章列表页面"
    • 发布页面后，在主题设置的"页脚设置"中的"所有文章地址"填入该页面URL

友情链接管理

  1. 安装Links插件

    • 将主题包中的Links文件夹上传至网站的/usr/plugins/目录
    • 在Typecho后台启用Links插件

  2. 添加友情链接

    • 进入Typecho后台 → 管理 → 友情链接
    • 点击"新增链接"，填写名称、URL、分类等信息
    • 友情链接将自动显示在首页底部区域

❓ 常见问题

Q1: 安装主题后无法显示图片怎么办？

A: 请检查服务器文件权限设置，确保主题的images目录及其子文件可被正常访问。可尝试将目录权限设置为755，文件权限设置为644。

Q2: 如何修改主题的样式？

A: 可以编辑主题目录下的样式文件：

  • style.css: 主题的基本样式定义
  • css/base.css: 主要样式内容
  • css/m.css: 移动端响应式样式

Q3: 如何添加更多的社交媒体图标？

A: 您可以编辑header.php文件中的相关代码，增加更多社交媒体的图标和链接。建议使用与主题风格一致的图标。

Q4: 如何在文章中插入代码高亮？

A: Typecho默认支持代码高亮功能，在编辑文章时使用语言名 代码 的格式即可。例如:

echo "Hello World!";

Q5: 主题支持自定义字体吗？

A: 支持，您可以通过修改CSS文件中的font-family属性来更改网站字体。建议在css/base.css文件开头的全局样式部分修改。

📋 更新日志

v1.0.0 (初始版本)

  • 完整的响应式设计
  • 首页Banner轮播
  • 精选文章栏目
  • 个人名片展示
  • 分类栏目背景设置
  • 文章浏览量统计
  • 站长推荐功能
  • 多处广告位设置
  • 三种特色页面模板
  • 友情链接插件集成

👨‍💻 关于作者

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

主题购买

LeleQTheme.zip