HarmonyHues主题

主题名称 HarmonyHues主题

主题作者星语社长

主题版本 1.1.2

博客程序 TYPECHO

技术栈 PHP、HTML、CSS、JS

是否开放 GitHub下载

前言

在个性化需求日益增长的网络时代，拥有一个独特且美观的博客主题显得尤为重要。作为一位Typecho用户，我一直致力于寻找一个既能体现个人风格，又能提供卓越用户体验的主题。经过一番探索与学习，我决定亲自开发一个属于自己的Typecho主题——HarmonyHues。本文将深入探讨这个主题的设计理念、功能特性以及开发过程。

设计理念

HarmonyHues的设计灵感源自自然界中的和谐之美。我希望能够通过这个主题，将自然界的色彩和谐地融入到博客的每一个角落，让用户在阅读的同时，感受到一种宁静与美好。主题的色彩搭配灵感来源于日出日落、四季更替，旨在为用户营造一个舒适宜人的阅读环境。

开发过程

1、确定主题结构

在开发之初，我首先明确了主题的结构。Typecho的主题通常由以下几部分组成：

-- header.php：头部文件，包含博客的标题、导航栏等。
-- footer.php：底部文件，包含版权信息、友情链接等。
-- index.php：首页模板，展示最新的文章列表。
-- post.php：文章内容模板，展示文章的详细内容。
-- archives.php：存档页面模板，展示所有文章的列表。
-- links.php：友情链接模版，展示朋友们的博客列表。
-- page.php：页面模板，用于展示静态页面。
-- 404.php：404错误页面模板。
-- ...省略更多

2、设计主题样式

在样式设计上，我选择了简洁而富有自然气息的配色方案，并充分利用CSS3的新特性来提升页面的视觉效果。为了实现响应式布局，我采用了媒体查询技术，确保主题在不同设备上都能完美显示。

3、技术栈

HarmonyHues主题采用了以下现代技术：

HTML & CSS3: 确保主题在各种浏览器中的兼容性和美观性。
jQuery & Bootstrap 4: 提供丰富的交互功能和响应式布局支持。
iconfont图标: 提供清晰可辨的图标，提升用户体验。
jQuery LazyLoad: 优化图片加载，提升页面加载速度。
FancyBox5: 提供优雅的lightbox效果，增强媒体展示体验。

4、实现功能模块

在功能实现方面，我参考了Typecho的官方文档和一些优秀的开源主题，逐步实现了文章列表、文章内容、评论系统等功能。此外，我还添加了一些自定义功能，以满足个人化的 blogging 需求。

5、优化与测试

在开发过程中，我不断地进行优化和测试，确保主题的稳定性和兼容性。通过在不同设备和浏览器上进行测试，我修复了多个兼容性问题，并对代码进行了精简和优化，以提升主题的性能。

主题功能

自适应布局（PC / 移动完美兼容）
顶部导航栏多模式切换（全屏沉浸式 / Mini简约式）
智能主题系统（深色模式 / 浅色模式 / 自动适配系统主题）
视觉增强方案：支持图片懒加载 + 点击放大预览（Lightbox效果）
SEO优化：内置优化策略，轻松达成LightHouse 100分评级
文章编辑：内置文章内插入视频、网盘下载、提示框、折叠框功能
内置插件：代码高亮（支持多种语言）、回复邮件提醒、友情链接、sitemap、表情包等等（免插件）
特色独立页面：我的装备、明信片留言等等
持续更新支持，更多惊喜等你发现...

安装与食用

HarmonyHues主题https://github.com/wugeng20/HarmonyHuesTheme

下载主题压缩包，解压后上传至 Typecho 主题目录（usr/themes/）
【重要】把解压后的文件夹重命名为 HarmonyHues
登录 Typecho 后台，进入外观管理，启用主题即可
进入主题设置，根据需求进行配置

预览

结语

HarmonyHues主题，是我匠心独运的一次探索，目前正如春日之苗，不断汲取养分，茁壮成长。虽然尚未开源，但我诚挚欢迎您的宝贵建议与反馈，它们将如磨刀石般，助我砥砺前行，不断完善这一主题。希望通过这篇介绍，能够点燃更多人对Typecho主题开发的热情，也期待更多志同道合的开发者，能够加入我们的行列，共同书写Typecho社区的辉煌未来！

©版权申明

- 本文由作者 @星语原创发布在BIIBII站点。未经许可，禁止转载。

全部 39 条评论

子夜歌
13天前 WIN10 Chrome146

因为主题侧栏没有标签云模块
我增加了一个，，大佬看怎么样
<?php
/**
标签云（所有标签）- 紧凑微圆角版（完美适配深/浅主题）
*@author 您的名字@link https://example.com@update 2025-02-24
*/
if (!defined('__TYPECHO_ROOT_DIR__')) {
exit;
}
?>

/ 标签云专属样式 - 使用主题变量，自动适配深色模式 /
.tagcloud-list {
list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.tagcloud-item {
margin: 0;
}
.tagcloud-link {
display: inline-block; padding: 0.1rem 0.3rem; background: var(--bg-color-primary); /* 使用主题次级背景色（浅灰/深灰） */ border-radius: 0.5rem; font-size: 0.85rem; color: var(--font-color-main); /* 使用主题主文字颜色（黑/白） */ text-decoration: none; transition: all 0.2s ease;
}
.tagcloud-link:hover {
background: var(--color-primary); /* 使用主题主色（蓝色） */ color: #fff !important; /* 悬停时文字强制变白，确保清晰可读 */
}
.tagcloud-count {
font-size: 0.75rem; margin-left: 0.2rem; opacity: 0.7; color: var(--font-color-main-light); /* 使用主题浅色文字（深色下自动变浅） */
}
.text-center {
text-align: center; color: var(--font-color-muted); /* 使用主题柔和文字 */
}
标签云 <div class="widget-content tagcloud-widget scroll-cover"> <?php $limit = 20; $db = Typecho_Db::get(); $tags = $db->fetchAll($db->select('mid', 'name', 'slug', 'count') ->from('table.metas') ->where('type = ?', 'tag') ->order('count', Typecho_Db::SORT_DESC) ->limit($limit)); if (!empty($tags)): ?> <ul class="tagcloud-list"> <?php foreach ($tags as $index => $tag): $tagUrl = Typecho_Common::url('/tag/' . $tag['slug'] . '/', $this->options->siteUrl); ?> <li class="tagcloud-item"> <a class="tagcloud-link" href="<?php echo $tagUrl; ?>" title="<?php echo htmlspecialchars($tag['name']); ?> 共 <?php echo $tag['count']; ?> 篇文章"> <span class="tagcloud-name"><?php echo htmlspecialchars($tag['name']); ?></span> <span class="tagcloud-count">(<?php echo $tag['count']; ?>)</span> </a> </li> <?php endforeach; ?> </ul> <?php else: ?> <div class="text-center">暂无标签</div> <?php endif; ?> </div>
子夜歌
15天前安卓 Chrome144

移动端，导航的自定义菜单和自动生成菜单不能对齐。和前面图标的距离不一样
1. 星语博主
  14天前 WIN10 Chrome145
  
  @子夜歌:
  已优化，后面发布
子夜歌
27天前 WIN10 Chrome145

最近一直在找相册插件，不过没找到好用的，发现一个只支持1.21版的相册模板，挺不错的，不过模板不支持1.3版，而且，是一个纯粹的相册模板，，我就想着把它移植到这个主题，用独立页面形式，，，但因为技术有限，出现很多问题没成功，，，不知道大佬有没时间把它加进你的主题里，这样会让这个主题更加优秀。
相册模板地址：https://typechx.com/themes/light.html
一个根据Light 修改的博客主题相册https://liuqingwushui.top/photo.html
1. 星语博主
  27天前 WIN10 Chrome144
  
  @子夜歌:
  后面会添加相册这个功能
吴蛋蛋
29天前 WIN10 Chrome134

你好，这里再反馈2个问题：
1、你看看我之前发的评论和你回复的，有些没有显示出来；
2、因为有白天与黑夜模式，所以我logo准备了两个，对应不同的背景，现在就只能调用一种模式下的logo，是否考虑加上黑夜模式的logo
1. 星语博主
  29天前 WIN10 Chrome144
  
  @吴蛋蛋:
  感谢建议已添加LOGO图标日间URL和夜间模式URL
吴蛋蛋
29天前 WIN10 Chrome134

3、若文章无图片，并且外观设置里填写了·自定义缩略图·选项，则取自定义缩略图图片
应该是外观设置还没有建设完全？
1. 星语博主
  29天前 WIN10 Chrome144
  
  @吴蛋蛋:
  已优化，可以github下载最新代码
  1. 吴蛋蛋
    29天前 WIN10 Chrome134
    
    @星语:
    LOGO图自适应有点问题，我logo放上去会显示不全；
    目前展示发现这些bug，期待更新更多功能，感谢提供了这么好的主题
  2. 吴蛋蛋
    29天前 WIN10 Chrome134
    
    @星语:
    另外反馈一个问题，后台文章设置单栏，但是没有效果
    1. 星语博主
      29天前 WIN10 Chrome144
      
      @吴蛋蛋:
      感谢反馈，已修复
子夜歌
1个月前 WIN10 Chrome145

代码高亮是在哪个文件里，代码高高的颜色想改一下，

前言