Valen Hexo https://blog.talentstore.cn/favicon.png https://blog.talentstore.cn/ All rights reserved 2026, Valen 技术 · 设计 · 生活 Valen's Blog 2026-07-25T10:54:20.813Z Valen Hexo 是一款基于 Node.js 的静态博客框架，凭借极快的生成速度和丰富的主题生态，成为众多开发者搭建个人博客的首选。它将 Markdown 文件编译为静态 HTML，既轻量又安全，配合 GitHub Pages 即可实现零成本托管。本文将从安装配置到部署上线，带你完整走一遍 Hexo 博客的搭建流程。

为什么选择 Hexo

在众多静态站点生成器（Hugo、Jekyll、VuePress）中，Hexo 依然有它独特的优势：

  • 生成速度快：几百篇文章仅需数秒即可完成编译
  • 主题生态丰富：官方主题市场收录了数百款风格各异的主题
  • 插件系统完善：支持代码高亮、搜索、RSS、SEO 优化等扩展
  • GitHub Pages 零成本托管：无需服务器，一次配置即可永久运行

安装与配置

开始之前，请确保本机已安装 Node.js（建议 LTS 版本）和 Git。然后全局安装 Hexo 命令行工具：

1
2
3
4
npm install -g hexo-cli
hexo init my-blog
cd my-blog
npm install

初始化完成后，目录结构如下：

1
2
3
4
5
6
7
8
my-blog/
├── _config.yml        # 站点配置文件
├── package.json
├── scaffolds/         # 模板文件
├── source/
│   ├── _posts/        # 文章目录
│   └── _drafts/       # 草稿目录
└── themes/            # 主题目录

提示：推荐使用 VS Code 配合 Markdown All in One 插件进行写作，可获得实时预览、快捷键加粗、自动补全等便利。在 scaffolds/ 中自定义模板，可以让 hexo new 生成的文章自带预设的 Front-matter。

主题定制

Hexo 主题基于 EJS 模板引擎渲染，样式则使用 Stylus 或 Sass 预处理器编写。你可以在 themes/ 目录下克隆或修改主题：

1
git clone https://github.com/theme-author/hexo-theme-valencheng themes/valencheng

修改主题时，重点关注 layout/ 下的 EJS 模板与 source/css/ 下的样式文件。定制颜色、字体、布局通常只需调整这几个变量文件。

常用配置项

在站点 _config.yml 中，以下三项最为关键：

  • permalink：控制文章 URL 格式，如 :year/:month/:day/:title/ 或更简洁的 :title/
  • theme：指定当前使用的主题名称，需与 themes/ 下的目录名一致
  • deploy：部署插件配置，决定博客推送到哪里

部署到 GitHub Pages

首先安装部署插件：

1
npm install hexo-deployer-git --save

然后在 _config.yml 中配置 deploy 字段：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/yourname/yourname.github.io.git
  branch: main

执行 hexo clean && hexo g && hexo d 即可一键生成并部署。稍等片刻，访问 https://yourname.github.io 就能看到你的博客上线了。

总结

Hexo 的上手门槛低，但扩展性很强。从安装、目录结构、主题定制到 GitHub Pages 部署，整套流程不到半小时即可跑通。掌握之后，你可以进一步探索插件开发、多语言支持、CI/CD 自动部署等进阶玩法，让博客真正成为你的个人技术名片。

]]> https://blog.talentstore.cn/2026/07/20/hexo-blog-guide/ 2026-07-20T02:00:00.000Z Hexo 是一款基于 Node.js 的静态博客框架，凭借极快的生成速度和丰富的主题生态，成为众多开发者搭建个人博客的首选。它将 Markdown 文件编译为静态 HTML，既轻量又安全，配合 GitHub Pages]]> 使用 Hexo 搭建个人博客的完整指南 2026-07-25T10:54:20.813Z Valen 玻璃拟态（Glassmorphism）是近年来备受推崇的 UI 设计趋势，它通过模糊、透明和细腻的边框，模拟出真实玻璃的通透质感，让界面呈现出层次分明的空间深度。这种风格在 macOS、iOS 以及各类现代 Web 应用中随处可见。本文将从核心属性出发，带你打造一套完整的玻璃质感界面。

backdrop-filter 基础

backdrop-filter 是玻璃拟态的灵魂。它对元素背后的内容应用滤镜效果，从而产生磨砂玻璃的视觉感受：

1
2
3
4
5
6
.glass-panel {
  backdrop-filter: blur(34px) saturate(180%);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
}

blur 控制模糊半径，saturate 提升饱和度让色彩更通透。记得同时写上 -webkit- 前缀以兼容 Safari。

色彩与透明度

玻璃效果的精髓在于「半透明背景 + 模糊」的组合。背景色通常使用 rgba 设置在 0.4 ~ 0.7 之间：太透明会失去玻璃感，太不透明又像普通卡片。深色模式下，可将背景改为 rgba(30, 30, 30, 0.5)，并搭配浅色文字。

边框与阴影

真实的玻璃边缘有微妙的高光，单靠背景色无法表现。需要叠加边框与多层阴影：

1
2
3
4
5
6
.glass-panel {
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

inset 高光模拟顶部受光，外层阴影营造悬浮感，两者缺一不可。

实际应用案例

下面是一个 macOS 风格的毛玻璃通知面板：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.notification {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 320px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(34px) saturate(180%);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  color: #1d1d1f;
}

将其悬浮于彩色背景之上，即可看到通透而精致的磨砂质感。

兼容性与降级

backdrop-filter 在部分旧浏览器中不被支持。推荐使用 @supports 进行渐进增强：检测到不支持时，退回为不透明背景，保证可读性。

1
2
3
4
5
6
7
8
9
.glass-panel {
  background: #f5f5f7;
}
@supports (backdrop-filter: blur(10px)) {
  .glass-panel {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(34px) saturate(180%);
  }
}

如此一来，新浏览器享受玻璃质感，旧浏览器也不会出现透明文字叠在杂乱背景上的可读性问题。

]]> https://blog.talentstore.cn/2026/07/15/css-glassmorphism/ 2026-07-15T06:30:00.000Z 玻璃拟态（Glassmorphism）是近年来备受推崇的 UI 设计趋势，它通过模糊、透明和细腻的边框，模拟出真实玻璃的通透质感，让界面呈现出层次分明的空间深度。这种风格在 macOS、iOS 以及各类现代 Web]]> CSS 玻璃拟态设计实践 2026-07-25T10:54:20.813Z Valen 当产品线逐渐壮大，页面越来越多，团队成员不断扩张，设计稿与代码之间的不一致就开始频频出现：按钮圆角一会儿是 4px 一会儿是 6px，主色调在不同页面存在微妙偏差。设计系统（Design System）正是为解决这类问题而生。它不仅是组件库，更是一套让设计与开发协同工作的语言和规则。

设计令牌

设计令牌（Design Tokens）是设计系统的原子，它把视觉决策抽象为与平台无关的键值对：

  • 颜色：color-brand-primary: #3B82F6
  • 间距：spacing-md: 16px
  • 字体：font-size-body: 14px
  • 圆角：radius-sm: 4px

令牌集中管理后，一次修改即可全局生效，天然支持多主题与深色模式切换。

组件库

借鉴原子设计理论，组件按层级递进组织：

  • 原子：按钮、输入框、图标等最小元素
  • 分子：搜索栏、表单项等组合
  • 有机体：导航栏、卡片列表等区块
  • 模板：整页布局结构

每一层都建立在下一层之上，保证视觉与交互的一致性，同时兼顾复用性。

文档与规范

组件库若没有文档，就只是代码仓库。一份好的文档应包含：

  • 使用指南：何时使用、何时不使用
  • 代码示例：可直接复制粘贴的片段
  • 设计原则：解释「为什么这样设计」背后的取舍

文档让规范可被查阅、可被遵循，也让新人快速上手。

工具链

现代设计系统的工具链已相当成熟：

  • Figma：设计师维护视觉组件与变量
  • Style Dictionary：把设计令牌编译为各平台（CSS / SCSS / iOS / Android）产物
  • Storybook：为组件提供独立的可视化沙盒与交互文档

三者串联，可实现「设计稿改令牌 → 自动生成代码 → 文档同步更新」的闭环。

团队协作

设计系统的成功不只在于工具，更在于流程。设计师与开发者应共同维护令牌与组件，建立变更评审机制，避免一方擅自修改导致不一致。定期同步会议、版本化的变更日志，能让系统持续进化而不失控。

总结

设计系统是一项长期投资。从令牌、组件到文档与工具链，它把分散的视觉决策收敛为统一的工程化产物。短期内看似增加了维护成本，但长远看，它显著降低了沟通损耗和重复劳动，让团队把精力真正聚焦在产品体验上。

]]> https://blog.talentstore.cn/2026/06/28/design-system-zero-to-one/ 2026-06-28T03:20:00.000Z 当产品线逐渐壮大，页面越来越多，团队成员不断扩张，设计稿与代码之间的不一致就开始频频出现：按钮圆角一会儿是 4px 一会儿是 6px，主色调在不同页面存在微妙偏差。设计系统（Design]]> 设计系统从零到一 2026-07-25T10:54:20.813Z Valen SVG 是矢量图形的天然载体，无论放大多少倍都不会失真，且每个元素都可被 CSS 和 JavaScript 独立控制。这让 SVG 成为制作轻量、流畅动画的理想选择。相比 GIF 和视频，SVG 动画体积更小、可交互、可主题化。本文将带你掌握 SVG 动画的几种核心实现方式。

SVG 动画基础

SVG 动画主要有三种实现路径：

  • SMIL：SVG 原生的 <animate> 标签，语法直观但已被标记为废弃，不推荐新项目使用
  • CSS：通过 @keyframes 和 transform 控制 SVG 元素，性能好、易维护，是首选方案
  • JavaScript：借助 GSAP、anime.js 等库实现复杂时间轴与路径动画，适合高级场景

日常需求中，CSS 方案覆盖了 80% 的场景，且性能最优。

CSS 动画 SVG

直接用 CSS 给 SVG 内部元素添加动画即可。下面的代码让一个圆形持续旋转：

1
2
3
4
5
6
7
8
.spinner {
  animation: spin 1.2s linear infinite;
  transform-origin: center;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

注意 transform-origin 必须设为 center，否则旋转中心会偏移。使用 transform-box: fill-box 可确保原点作用于元素自身。

路径动画

stroke-dasharray 与 stroke-dashoffset 是绘制「线条逐渐画出」效果的经典组合：

1
2
3
4
5
6
7
8
9
.path-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

原理是先用虚线把整条路径隐藏，再通过动画将偏移量归零，制造出笔尖沿路径移动的视觉。常用于数据图表、流程图的入场动效。

形态变化

通过改变 <path> 的 d 属性，可以实现图形之间的平滑变形（morphing）。原生的 CSS 无法直接过渡 d，需要借助 JavaScript 库，如 flubber 或 GSAP MorphSVG：

1
2
3
// 使用 flubber 在两个路径间插值
const interpolator = flubber.interpolate(circlePath, starPath);
element.setAttribute('d', interpolator(t));

形态变化在加载动画、图标切换中表现力极强，但要注意两个路径的节点数尽量接近，过渡才会自然。

性能注意事项

SVG 动画若使用不当也会掉帧：

  • 优先 transform 与 opacity：这两个属性可由 GPU 合成，不触发重排
  • will-change 提示：对动画元素加 will-change: transform，让浏览器提前创建合成层
  • 避免 animate 属性：频繁修改 width、height、fill 会触发重绘，性能较差

实战案例

加载动画与图标动效是 SVG 最常见的用武之地。一个旋转的环形 spinner 只需几行 CSS；图标的 hover 切换则可用路径动画让线条优雅地勾勒出来。把这些微动效融入界面，能显著提升产品的精致感与反馈感，而付出的体积成本几乎可以忽略。

]]> https://blog.talentstore.cn/2026/06/20/svg-animation-guide/ 2026-06-20T05:45:00.000Z SVG 是矢量图形的天然载体，无论放大多少倍都不会失真，且每个元素都可被 CSS 和 JavaScript 独立控制。这让 SVG 成为制作轻量、流畅动画的理想选择。相比 GIF 和视频，SVG 动画体积更小、可交互、可主题化。本文将带你掌握 SVG]]> SVG 动画实战指南 2026-07-25T10:54:20.813Z Valen 每次提交代码后手动构建、手动部署，既繁琐又容易出错。CI/CD 流水线能把这些重复劳动自动化：你只需 push 代码，系统就会自动完成检查、测试、构建和发布。GitHub Actions 是目前门槛最低、与代码仓库集成最紧密的方案，本文将以它为例，带你从零搭建一套前端 CI/CD 流水线。

CI/CD 概念

CI/CD 是两个阶段的组合：

  • 持续集成（CI）：每次提交自动运行 lint、测试、构建，尽早发现问题
  • 持续部署（CD）：构建通过后自动部署到测试或生产环境，缩短交付周期

两者的目标都是让代码从提交到上线的过程「快且可靠」。

GitHub Actions 基础

GitHub Actions 的核心是 workflow 文件，放在仓库的 .github/workflows/ 目录下，使用 YAML 描述：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: echo "Hello CI"

on 定义触发时机，jobs 定义任务，steps 是任务内的执行步骤。uses 引用官方或社区的 Action，run 执行普通 shell 命令。

前端 CI 流水线

一个标准的前端 CI 流程包含安装依赖、代码检查、测试和构建：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
jobs:
  ci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - name: Install dependencies
        run: npm ci

      - name: Lint
        run: npm run lint

      - name: Test
        run: npm test

      - name: Build
        run: npm run build

npm ci 比 npm install 更快更严格，适合 CI 环境。任何一步失败都会中断流水线，防止有问题的代码进入下一阶段。

自动部署到 GitHub Pages

构建通过后，用一个独立的 deploy job 将产物发布到 GitHub Pages：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
deploy:
  needs: ci
  runs-on: ubuntu-latest
  permissions:
    contents: read
    pages: write
    id-token: write
  environment:
    name: github-pages
    url: ${{ steps.deployment.outputs.page_url }}
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: 20
        cache: npm
    - run: npm ci
    - run: npm run build

    - name: Upload artifact
      uses: actions/upload-pages-artifact@v3
      with:
        path: ./public

    - name: Deploy to GitHub Pages
      id: deployment
      uses: actions/deploy-pages@v4

needs: ci 确保只有 CI 通过才部署，permissions 授予 Pages 写入权限。配置完成后，每次合并到 main 分支就会自动上线。

缓存优化

CI 的最大开销在于重复安装依赖。利用 actions/setup-node 的 cache: npm 可缓存 npm 全局目录，二次构建能快上数倍。此外可缓存 node_modules 或构建产物，用 actions/cache 配合唯一 key 实现：

1
2
3
4
- uses: actions/cache@v4
  with:
    path: ~/.npm
    key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}

当 package-lock.json 未变时命中缓存，跳过重新下载。

通知与集成

流水线运行结果应及时通知团队。通过 webhook 可将构建状态推送到 Slack、钉钉或飞书：

1
2
3
4
5
6
- name: Notify on failure
  if: failure()
  run: |
    curl -X POST ${{ secrets.WEBHOOK_URL }} \
      -H 'Content-Type: application/json' \
      -d '{"text":"CI 构建失败，请检查！"}'

if: failure() 保证仅在失败时触发，避免成功消息打扰。

总结

一套完整的 CI/CD 流水线，能让团队专注于写代码，把检查、构建、部署交给机器。从 GitHub Actions 入门，逐步加入缓存优化和通知集成，你会发现交付效率与代码质量都在同步提升。当自动化成为习惯，发布新版本就不再是令人紧张的事件，而是一次平淡的 push。

]]> https://blog.talentstore.cn/2026/06/10/cicd-pipeline/ 2026-06-10T07:00:00.000Z 每次提交代码后手动构建、手动部署，既繁琐又容易出错。CI/CD 流水线能把这些重复劳动自动化：你只需 push 代码，系统就会自动完成检查、测试、构建和发布。GitHub Actions]]> 从零搭建 CI/CD 流水线 2026-07-25T10:54:20.813Z