Skip to content

导航栏品牌

🎨 品牌选项

你的网站现在支持多种 navbar-brand 显示方式，可以通过配置文件轻松切换：

在 config/_default/params.toml 中配置：

# 使用六角形白色 SVG logo，完美适配 light/dark mode
logo = "images/logo-js.svg"  # 完整的品牌 logo (320x56px)
# 或者使用图标版本
# logo = "images/logo-icon.svg"  # 仅图标版本 (64x64px)

特色：

  • ✅ 六角形设计，现代科技感十足
  • ✅ 纯白色设计，在蓝色/黑色背景下都清晰可见
  • ✅ 更宽的横向布局，完美适合 header 显示
  • ✅ 响应式尺寸适配 (移动端 200px → 桌面端 320px)
  • ✅ 专业的发光效果和多层次设计
  • ✅ 代码符号图标，突出技术属性
  • ✅ 几何美学，符合现代设计趋势

选项 2: 使用图标 + 文字

# 品牌图标选择 (任选其一)
brand_icon = "fas fa-user-tie"          # 专业人士图标
# brand_icon = "fas fa-code"            # 代码图标
# brand_icon = "fas fa-laptop-code"     # 编程笔记本图标
# brand_icon = "fas fa-terminal"        # 终端图标
# brand_icon = "fas fa-rocket"          # 火箭图标

header_title = "Jimmy Song"  # 你的名字

选项 3: 纯文字 (极简风格)

# 不设置 logo 和 brand_icon，只显示文字
header_title = "Jimmy Song"

主 Logo (logo-js.svg) - 320x56px

设计元素：

  • 六角形图标: 多层次六角形设计，体现技术的精密性
  • 外层边框：透明描边，定义轮廓
  • 内层背景：半透明填充，增加层次
  • 装饰点：六角形内部的微妙装饰
  • 代码符号: 居中的 </> 符号，突出编程属性
  • 分隔线: 优雅的竖线分隔图标和文字
  • 品牌文字: "JIMMY SONG" 一行显示，简洁明了
  • 装饰元素: 右侧小六角形群组，呼应主图标

视觉特点：

  • 横向宽屏设计，充分利用 header 空间
  • 纯白色配色，适配任何背景色
  • 几何美学，现代简约风格
  • 多层次设计，丰富视觉层次

图标版 Logo (logo-icon.svg) - 64x64px

设计元素：

  • 同心六角形: 三层六角形嵌套，从外到内渐变透明度
  • 中心图标: 代码符号 </>，保持品牌一致性
  • 顶点装饰: 六个顶点各有装饰点，增加细节
  • 底部标识: 小字"JS"，强化技术属性

📱 响应式适配

移动端 (< 768px)

max-width: 200px;
height: 36px;

紧凑显示，保持清晰度

桌面端 (768px - 1199px)

max-width: 260px;
height: 44px;

标准尺寸，平衡比例

超大屏幕 (≥ 1200px)

max-width: 320px;
height: 56px;

完整尺寸，最佳视觉效果

🌓 Light/Dark Mode 完美兼容

Light Mode (蓝色背景 #0a55a7)

  • ✅ 白色六角形在蓝色背景上形成强烈对比
  • ✅ 发光效果让图标更加突出
  • ✅ 透明度设计让背景色自然透过

Dark Mode (黑色背景 #1a1a1a)

  • ✅ 白色六角形在黑色背景上清晰醒目
  • ✅ 多层次设计在暗色背景下层次分明
  • ✅ 发光效果在暗色模式下更加明显

🎨 六角形设计优势

为什么选择六角形？

  1. 科技感: 六角形常见于科技、编程、网络等领域的视觉设计
  2. 稳定性: 六角形在自然界中代表最稳定的结构 (蜂巢)
  3. 现代感: 几何图形符合当前扁平化设计趋势
  4. 可扩展性: 六角形可以很好地与其他六角形拼接
  5. 差异化: 区别于常见的圆形、方形 logo，更有记忆点

设计理念

  • 精密: 六角形的精确几何体现技术的严谨
  • 网络: 六角形拼接可形成网格，暗示互联网、云原生等概念
  • 效率: 六角形是自然界最高效的空间利用形状
  • 创新: 独特的几何设计展现技术创新精神

🛠️ 使用建议

推荐配置 (技术专家/云原生专家)

# 当前配置已生效
logo = "images/logo-js.svg"
header_title = "Jimmy Song"

备选配置 (极简风格)

# 仅使用图标 + 文字
brand_icon = "fas fa-code"
header_title = "Jimmy Song"

📊 性能与技术特性

优化特性

  • ✅ SVG 矢量格式，无限缩放不失真
  • ✅ 纯几何设计，文件体积极小 (< 3KB)
  • ✅ 无外部依赖，加载速度快
  • ✅ CSS 硬件加速优化
  • ✅ 浏览器兼容性极佳

技术实现

  • 多层透明度: 使用 rgba 实现层次效果
  • 滤镜效果: feGaussianBlur 创建发光效果
  • 响应式: CSS 媒体查询适配不同屏幕
  • 语义化: 良好的 SVG 结构和注释

🔧 自定义选项

调整六角形大小

编辑 SVG 中的 polygon points 坐标：

<!-- 放大1.2倍示例 -->
<polygon points="0,-24 20.78,-12 20.78,12 0,24 -20.78,12 -20.78,-12"/>

修改透明度

调整 rgba 的 alpha 值：

fill="rgba(255,255,255,0.1)"  <!-- 更透明 -->
fill="rgba(255,255,255,0.2)"  <!-- 更不透明 -->

更换代码符号

可以替换为其他技术符号：

  • {} 大括号 (JavaScript/CSS)
  • [] 方括号 (数组/JSON)
  • () 圆括号 (函数)
  • &lt;/&gt; HTML 标签

当前状态: 已配置六角形白色 logo，完美展现技术专业性 ✨

设计亮点: 六角形 + 代码符号 + 现代白色设计 = 专业技术品牌形象！