how to use hexo to build a photo wall

how to use hexo to build a photo wall

-----

You can create a photowall page easily using grouppicture tag. And you can create an album page using iframs.

blog

I want to use hexo (personal blog scheme) and next (Theme) to build a personal photo wall

----------------------

以下是使用 Hexo 构建照片墙的详细步骤：

---

​1. 准备工作​

1.1 安装 Hexo

若未安装 Hexo，先全局安装：

bash

复制

npm install -g hexo-cli

1.2 初始化 Hexo 项目

bash

复制

hexo init photo-wall
cd photo-wall
npm install

---

​2. 创建照片墙页面​

2.1 生成新页面

bash

复制

hexo new page photos

生成文件路径：source/photos/index.md

2.2 配置页面类型

编辑 source/photos/index.md，设置页面为照片墙模板：

markdown

复制

---
title: 照片墙
date: 2023-01-01
layout: photos
---

---

​3. 存放图片资源​

3.1 创建图片目录

在 Hexo 的 source 目录下创建存放图片的文件夹：

bash

复制

mkdir -p source/images/photos

将你的图片文件（如 photo1.jpg, photo2.jpg）放入此目录。

3.2 管理图片信息（可选）

若要添加标题或描述，创建数据文件 source/_data/photos.yml：

yaml

复制

- image: /images/photos/photo1.jpg
  caption: "示例图片 1"
- image: /images/photos/photo2.jpg
  caption: "示例图片 2"

---

​4. 创建照片墙模板​

4.1 新建布局文件

在主题的布局目录中创建模板文件：
（假设使用默认主题 landscape，路径为 themes/landscape/layout/photos.ejs）

html

运行

复制

<!-- themes/your-theme/layout/photos.ejs -->
<main class="photos">
  <div class="photo-grid">
    <% site.data.photos.forEach(function(photo) { %>
      <div class="photo-item">
        <img src="<%= photo.image %>" alt="<%= photo.caption %>" />
        <% if (photo.caption) { %>
          <p class="caption"><%= photo.caption %></p>
        <% } %>
      </div>
    <% }) %>
  </div>
</main>

4.2 添加 CSS 样式

在主题的样式文件中添加（如 themes/landscape/source/css/_common/components/photos.styl）：

css

复制

/* 响应式网格布局 */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  padding: 20px;
}

.photo-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.caption {
  text-align: center;
  font-size: 0.9em;
  color: #666;
}

---

​5. 配置主题​

5.1 修改主题配置文件

编辑 _config.yml，确保加载数据文件：

yaml

复制

# 启用 _data 目录
theme_config:
  data_dir: source/_data

5.2 链接到导航栏（可选）

在主题配置中添加照片墙入口：

yaml

复制

menu:
  Photos: /photos

---

​6. 本地测试与部署​

6.1 生成静态文件

bash

复制

hexo generate

6.2 启动本地服务器

bash

复制

hexo server

访问 http://localhost:4000/photos 查看效果。

6.3 部署到服务器

bash

复制

hexo deploy

---

​高级优化​

懒加载图片

在模板中为 <img> 添加懒加载属性：

html

运行

复制

<img data-src="<%= photo.image %>" class="lazyload" alt="...">

引入懒加载库（如 lozad.js）：

html

运行

复制

<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script>
  const observer = lozad();
  observer.observe();
</script>

使用 CDN 加速

修改图片路径为 CDN 地址：

yaml

复制

# photos.yml
- image: https://cdn.example.com/images/photo1.jpg

---

​示例效果​

最终照片墙会以响应式网格布局展示图片，支持标题和懒加载。

---

​可能遇到的问题​

1. ​图片未显示​：检查路径是否正确（部署后路径是否包含项目名）。
2. ​布局错乱​：确保 CSS 正确加载，或清除浏览器缓存。
3. ​数据未加载​：确认 photos.yml 位于 source/_data 目录，且文件名正确。

通过上述步骤，你可以快速构建一个美观的 Hexo 照片墙页面。