Laumy的技术栈
首页
支持与合作

站点开源

🕒 2025-04-19 📁 前后端 👤 laumy 🔥 41 热度

Laumy Fresh Theme

本站点是基于wordpress设计，现开源其主题代码，让感兴趣的爱好者直接可复用。源码地址：https://github.com/laumy0929/wd-laumy-fresh-theme。

🚀 快速开始

方法一：WordPress后台安装（推荐）

  1. 下载主题压缩包 laumy-fresh-theme.zip
  2. 在WordPress后台进入 外观 > 主题
  3. 点击 添加新主题 > 上传主题
  4. 选择下载的压缩包文件
  5. 点击 现在安装 并激活主题

方法二：FTP上传

  1. 解压主题文件到本地
  2. 通过FTP上传到 /wp-content/themes/laumy-fresh-theme/ 目录
  3. 在WordPress后台激活主题

方法三：Git克隆

cd wp-content/themes/
git clone https://github.com/laumy0929/wd-laumy-fresh-theme.git

🌟 主题特色

设计理念

  • 简洁美观：采用现代简约设计风格，专注于内容阅读体验
  • 响应式布局：完美适配桌面端、平板和移动设备
  • 深色模式：支持一键切换深色/浅色主题
  • 高效性能：优化的CSS和JavaScript，确保快速加载

核心功能

  • 📱 三栏布局：左侧分类导航 + 中间内容区域 + 右侧个人信息
  • 🔍 智能搜索：顶部居中搜索框，快速查找内容
  • 📂 分类管理：支持多级分类展开/收起，显示文章数量
  • 📖 文章目录：自动生成多级目录，支持滚动高亮
  • 💬 评论系统：完整的WordPress评论功能
  • 📊 数据统计：显示文章数量和阅读量统计
  • 🎨 主题切换：一键切换深色/浅色模式

⚙️ 主题配置详解

个人资料设置

进入自定义设置

  1. 在WordPress后台点击 外观 > 自定义
  2. 或者点击 外观 > 主题 中的 自定义 按钮

配置个人信息

在 作者信息 部分设置：

  • 头像：
    • 点击 选择图片 上传个人头像
    • 推荐尺寸：320×180 像素
    • 支持格式：JPG、PNG、GIF
    • 如果不上传，会显示默认头像
  • 昵称：
    • 输入你想显示的名称
    • 会显示在右侧个人信息卡片的顶部
    • 支持中文和英文
  • 职业：
    • 输入你的职业或身份标签
    • 会显示为昵称右上角的绿色徽章
    • 例如：前端工程师、全栈开发、技术博主
  • 个性签名：
    • 输入个人简介或座右铭
    • 会显示在昵称下方
    • 支持多行文本

保存设置

点击 发布 按钮保存所有设置

分类菜单配置

创建主菜单

  1. 进入 外观 > 菜单
  2. 点击 创建新菜单
  3. 输入菜单名称（如：主菜单）
  4. 选择菜单位置为 Primary Menu

添加分类到菜单

  1. 在左侧 分类 面板中选择需要的分类
  2. 点击 添加到菜单
  3. 拖拽调整分类顺序
  4. 设置父子分类关系：
    • 将子分类拖拽到父分类下方
    • 向右缩进表示层级关系

菜单结构示例

📁 技术笔记
  📁 前端开发
    📁 HTML/CSS
    📁 JavaScript
    📁 Vue.js
  📁 后端开发
    📁 PHP
    📁 Python
    📁 Node.js
  📁 运维部署
    📁 Linux
    📁 Docker
    📁 Nginx

文章缩略图设置

方法一：设置特色图片（推荐）

  1. 在编辑文章时，找到右侧 特色图片 面板
  2. 点击 设置特色图片
  3. 上传或选择图片
  4. 推荐尺寸：160×100 像素
  5. 点击 设置特色图片 确认

方法二：在文章内容中插入图片

  1. 在文章开头位置插入图片
  2. 主题会自动提取第一张图片作为缩略图
  3. 建议图片尺寸：160×100 像素或更大

缩略图优先级

  1. 特色图片（最高优先级）
  2. 文章内容第一张图片
  3. 默认占位图（如果以上都没有）

默认缩略图位置

  • 文件路径：assets/images/default-thumbnail.svg
  • 可以替换为自定义图片
  • 建议保持 160×100 像素尺寸

文章目录功能

自动生成规则

  • 基于文章中的 H2-H5 标题自动生成
  • 支持无限级嵌套目录
  • 自动编号：1、1.1、1.1.1…

使用方法

  1. 在文章中使用标准的标题标签： 
    <h2>主要章节</h2>
<h3>子章节</h3>
<h4>详细内容</h4>
  2. 目录会自动显示在文章左侧

  3. 支持点击跳转和滚动高亮

目录样式

  • 左侧：📋 剪贴板图标
  • 右侧：☰ 汉堡菜单图标
  • 支持展开/收起功能

深色模式配置

启用深色模式

  1. 在页面顶部找到主题切换按钮（太阳/月亮图标）
  2. 点击即可切换深色/浅色模式
  3. 设置会自动保存到浏览器本地存储

深色模式特性

  • 自动调整所有颜色
  • 背景色：深灰色 (#181a1b)
  • 文字色：浅色 (#eceff1)
  • 卡片背景：深色 (#202225)

📱 响应式设计说明

桌面端 (>1200px)

  • 完整三栏布局
  • 左侧分类导航：260px
  • 右侧个人信息：300px
  • 中间内容区域：自适应宽度

平板端 (992px-1200px)

  • 保持三栏布局
  • 侧边栏宽度自动调整
  • 内容区域适当缩小

移动端 (<768px)

  • 单列布局
  • 隐藏网站标题和部分导航
  • 搜索框居中显示
  • 保留主题切换功能

🎨 自定义样式

CSS变量

主题使用CSS变量，便于自定义：

:root {
  --header-height: 56px;
  --sidebar-left-width: 260px;
  --sidebar-right-width: 300px;
  --container-max-width: 1800px;
  --gap: 14px;
  --color-bg: #ffffff;
  --color-text: #222;
  --color-muted: #666;
  --color-primary: #3498db;
  --color-border: #e6e6e6;
}

自定义颜色

在 外观 > 自定义 > 颜色 中调整：
– 主色调
– 背景色
– 文字颜色
– 边框颜色

📁 文件结构

laumy-fresh-theme/
├── style.css                 # 主题样式文件
├── index.php                 # 首页模板
├── single.php                # 文章页面模板
├── category.php              # 分类页面模板
├── search.php                # 搜索结果模板
├── page.php                  # 页面模板
├── header.php                # 头部模板
├── footer.php                # 底部模板
├── functions.php             # 主题功能文件
├── comments.php              # 评论模板
├── searchform.php            # 搜索表单
├── screenshot.png            # 主题截图
├── assets/
│   ├── js/
│   │   └── theme.js         # 主题JavaScript
│   └── images/
│       ├── default-thumbnail.svg    # 默认缩略图
│       └── default-profile.svg      # 默认头像
└── README.md                 # 说明文档

🔧 高级功能配置

评论系统设置

  1. 进入 设置 > 讨论
  2. 启用 嵌套评论 功能
  3. 设置评论审核规则
  4. 配置评论通知

搜索功能优化

  1. 进入 设置 > 固定链接
  2. 选择 文章名 或 自定义结构
  3. 保存设置以优化搜索

性能优化

  1. 启用WordPress缓存插件
  2. 压缩图片文件
  3. 定期清理数据库
  4. 使用CDN加速

🎯 使用技巧

分类管理最佳实践

  • 使用清晰的分类名称
  • 合理设置分类层级（建议不超过3级）
  • 定期整理和合并相似分类
  • 为每个分类添加描述

文章写作建议

  • 使用标准的H2-H5标题结构
  • 在文章开头插入相关图片
  • 设置合适的特色图片
  • 添加适当的标签

用户体验优化

  • 定期更新个人资料
  • 保持分类结构清晰
  • 使用高质量的缩略图
  • 及时回复评论

🐛 常见问题解答

Q: 分类不显示或显示异常？

A: 检查以下设置：
1. 在 外观 > 菜单 中是否设置了主菜单
2. 菜单位置是否选择为 Primary Menu
3. 分类是否已添加到菜单中
4. 分类是否有文章内容

Q: 个人资料头像不显示？

A: 检查以下设置：
1. 在 外观 > 自定义 > 作者信息 中是否上传了头像
2. 图片格式是否支持（JPG、PNG、GIF）
3. 图片大小是否合适（建议320×180像素）

Q: 文章缩略图显示异常？

A: 尝试以下方法：
1. 设置文章特色图片
2. 在文章开头插入图片
3. 检查图片格式和大小
4. 替换默认缩略图文件

Q: 深色模式切换不生效？

A: 检查以下设置：
1. 确保浏览器支持localStorage
2. 清除浏览器缓存
3. 检查是否有JavaScript错误
4. 尝试刷新页面

Q: 移动端显示异常？

A: 检查以下设置：
1. 主题已针对移动端优化
2. 检查是否有其他插件冲突
3. 清除浏览器缓存
4. 检查CSS是否被其他插件覆盖

Q: 文章目录不显示？

A: 检查以下设置：
1. 文章内容是否包含H2-H5标题
2. 标题标签是否正确使用
3. 检查JavaScript是否正常加载
4. 查看浏览器控制台是否有错误

📞 交流方式

  • 作者：Laumy
  • 邮箱：laumy0929@gmail.com
  • 网站：https://www.laumy.tech/
  • GitHub：https://github.com/laumy0929/wd-laumy-fresh-theme

📄 许可证

本主题基于 GPL v2 或更高版本开源协议发布。

发表你的看法

\t↑