Exyone Blog

用Eleventy搭建静态博客的完整指南

2026-06-02T00:00:00Z

为什么选择Eleventy

Eleventy（简称11ty）是一个简单而强大的静态站点生成器。与Hexo、Hugo等框架不同，Eleventy不强制使用特定的模板引擎或项目结构，给予开发者最大的自由度。

Eleventy的优势

零配置起步：开箱即用，无需复杂配置
多模板引擎：支持Nunjucks、Liquid、Handlebars等
构建速度快：纯JavaScript实现，构建效率高
灵活的数据目录：通过_data目录管理全局数据

项目结构

一个典型的Eleventy博客项目结构如下：

src/
├── _data/          # 全局数据
├── _includes/      # 模板组件
│   ├── layouts/    # 布局模板
│   └── partials/   # 局部模板
├── css/            # 样式文件
├── posts/          # 博客文章
├── categories/     # 分类页面
├── tags/           # 标签页面
└── index.njk       # 首页

开始搭建

首先安装Eleventy：

npm install @11ty/eleventy --save-dev

然后在项目根目录创建.eleventy.js配置文件，定义输入输出目录和自定义过滤器。

模板引擎选择

Eleventy支持多种模板引擎，推荐使用Nunjucks，因为它功能丰富且语法直观：

---
layout: base.njk
title: Hello World
---
<h1>用Eleventy搭建静态博客的完整指南</h1>

数据驱动

Eleventy的数据文件可以放在_data目录中，支持JSON、JS、YAML等多种格式：

{
  "site": {
    "title": "My Blog",
    "description": "A simple blog"
  }
}

结语

Eleventy的灵活性和简洁性使其成为构建静态博客的理想选择。通过合理的项目结构设计，可以搭建出既美观又高效的博客系统。

CSS自定义属性实现主题切换

2026-05-20T00:00:00Z

CSS自定义属性基础

CSS自定义属性（Custom Properties）允许我们在样式表中定义可复用的变量：

:root {
  --primary-color: #4f46e5;
  --text-color: #1e293b;
}

主题系统设计

通过定义一组语义化的设计令牌（Design Tokens），可以实现统一的主题管理：

颜色系统：主色、辅色、背景色、文字色
排版系统：字体族、字号比例、行高
间距系统：内外边距、栅格间距
阴影系统：不同层级的阴影效果

实际应用

在设计博客主题时，将CSS自定义属性与媒体查询结合，可以实现暗色模式的自动切换：

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0f172a;
    --text-color: #e2e8f0;
  }
}

总结

CSS自定义属性为前端主题系统提供了强大的基础能力，使得样式维护和主题切换变得简单而优雅。

响应式设计的最佳实践

2026-05-15T00:00:00Z

移动优先策略

移动优先（Mobile First）是现代响应式设计的核心思想。先为小屏幕设计基础样式，再通过媒体查询逐步增强大屏体验。

弹性布局方案

CSS Grid：适合二维布局，如文章列表、分类网格
Flexbox：适合一维布局，如导航栏、卡片内容
相对单位：使用rem、em、%代替固定像素值

断点选择

合理的断点应该基于内容，而非设备：

/* Mobile: < 768px */
/* Tablet: 768px - 1199px */
/* Desktop: >= 1200px */

响应式图片

使用srcset和sizes属性，根据视口宽度加载合适尺寸的图片：

<img src="small.jpg"
     srcset="medium.jpg 768w, large.jpg 1200w"
     sizes="(max-width: 768px) 100vw, 50vw">

总结

响应式设计不是一次性工作，而是一个持续优化的过程。关注内容、渐进增强，才能打造出真正优秀的跨设备体验。

读书笔记：代码整洁之道

2026-05-01T00:00:00Z

为什么要写整洁的代码

代码的阅读次数远多于编写次数。整洁的代码不仅能减少维护成本，更能体现开发者的专业素养。

有意义的命名

好的命名应当揭示意图，避免误导性缩写：

// Bad
int d; // 经过的天数

// Good
int elapsedTimeInDays;

函数原则

短小精悍：函数应该只做一件事
单一职责：每个函数不超过20行
避免副作用：函数要么做什么，要么返回值，不要两者兼得

注释的艺术

注释不能美化糟糕的代码。与其花时间写注释解释混乱的代码，不如花时间清理代码本身。

好的代码本身就是最好的文档。

总结

代码整洁之道不仅是技术规范，更是一种职业态度。每次提交代码时，都应该让代码比你发现它时更整洁。

记一次周末徒步

2026-04-20T00:00:00Z

出发

周末清晨，阳光正好。背上简单的行囊，和朋友驱车前往郊外的徒步路线。

山间小径

山路蜿蜒，两侧是郁郁葱葱的树林。空气清新，夹杂着泥土和草木的芬芳。

徒步的意义不在于抵达终点，而在于沿途的风景和感受。

溪水边

途中经过一条清澈的小溪，溪水潺潺，在阳光下泛着粼粼波光。我们停下来休息，把脚浸入清凉的溪水中，疲惫一扫而空。

登顶

经过两个小时的攀登，终于到达山顶。眼前的景色令人震撼——连绵的群山在蓝天白云下延伸，城市在远方若隐若现。

返程

下山时已是傍晚，夕阳将天空染成金色。这次徒步不仅锻炼了身体，更让心灵得到了放松。在城市快节奏的生活中，偶尔放慢脚步，亲近自然，是一种难得的幸福。

Docker容器化部署实践

2026-04-10T00:00:00Z

为什么选择Docker

Docker容器化部署可以解决"在我机器上能跑"的经典问题，确保开发、测试、生产环境的一致性。

Dockerfile编写

# 构建阶段
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 运行阶段
FROM nginx:alpine
COPY --from=builder /app/_site /usr/share/nginx/html

多阶段构建

多阶段构建可以有效减小最终镜像体积。构建阶段包含所有开发依赖，运行阶段只包含产物和运行时。

Docker Compose编排

version: '3.8'
services:
  blog:
    build: .
    ports:
      - "8080:80"
    restart: unless-stopped

总结

Docker容器化让部署变得可重复、可预测。结合CI/CD流水线，可以实现一键部署的自动化流程。