话说看到别人的博客里都有好多好多的功能，像什么足迹 相册等功能，属实是有点羡慕！所以现在趁着AI可以使用，那就让AI帮我写一个页面得了，嘎嘎。

先说一下我的思路，我想的是要有新功能，但是还不需要花钱，并且适合我这种小白使用。所以我发现有些网站天生就适合储存照片，比如Unsplash。

当然我不知道别人咋想的，也好像有人这么干，但是这么干的人我发现很少，我也不知道这个搞的想法对不对。所以我先尝试着用用再说。

步骤 1：创建 Hexo 照片页面

首先在博客根目录执行命令，创建一个名为photos的页面：

1
hexo new page "photos"

执行后会生成 source/photos/index.md 文件，打开它并修改为：

1
2
3
4
5
6
---
title: 我的照片集
date: <%= new Date().toISOString() %>
layout: photos  # 对应我们要写的模板文件
comments: false  # 可选：关闭评论区
---

步骤 2：新增照片页模板（核心）

在主题文件夹 themes/你的主题名称/layout/ 下新建 photos.ejs 文件，

首先先说明一下，因为这个是我自己的hexo主题，所以可能不太适合你们使用，我主要是为了做一个笔记，但是这个思路你们可以借鉴一下哈，当然高手略过哈。我是直接使用Unsplash的api调用我自己上传的照片，这个也要说明一下，因为代码是不一样的。

粘贴以下代码

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!-- 复用主题统一的内容容器，保持宽度对齐 -->
<div class="content-wrapper">
  <!-- 页面标题（和现有文章标题风格一致） -->
  <h1 class="page-title" style="text-align: center; margin-bottom: clamp(20px, 3vw, 30px); color: var(--dark-color);">
    <%= page.title %>
  </h1>

  <!-- 照片容器：Flex响应式布局，复用主题卡片样式 -->
  <div class="photos-grid" id="unsplash-photos">
    <!-- 加载中提示 -->
    <div class="loading-tip" style="width: 100%; text-align: center; color: var(--dark-color); font-size: 1em;">
      正在加载我的照片...
    </div>
  </div>
</div>

<script>
  // ========== 替换成你自己的信息 ==========
  const UNSPLASH_ACCESS_KEY = "你的Unsplash Access Key"; // 替换成你的Access Key
  const YOUR_UNSPLASH_USERNAME = "你的Unsplash用户名"; // 替换成你的用户名（@后面的部分）
  const PHOTO_COUNT = 12; // 要展示的照片数量（最大30）
  // ======================================

  // 调用Unsplash API：获取指定用户（你）的照片
  fetch(`https://api.unsplash.com/users/${YOUR_UNSPLASH_USERNAME}/photos?per_page=${PHOTO_COUNT}&client_id=${UNSPLASH_ACCESS_KEY}`)
    .then(res => {
      if (!res.ok) throw new Error("加载失败，请检查Access Key和用户名是否正确");
      return res.json();
    })
    .then(data => {
      const photosGrid = document.getElementById("unsplash-photos");
      // 清空加载提示
      photosGrid.innerHTML = "";

      // 如果没有照片，显示提示
      if (data.length === 0) {
        photosGrid.innerHTML = `<p style="width:100%; text-align:center; color:#666; font-size:1em;">你的Unsplash账户暂无公开照片～</p>`;
        return;
      }

      // 循环渲染你的照片卡片（复用主题样式）
      data.forEach(photo => {
        const card = document.createElement("div");
        card.className = "photo-card";
        card.innerHTML = `
          <div class="photo-img-wrapper">
            <!-- 加载你的照片（选regular尺寸，平衡清晰度和加载速度） -->
            <img src="${photo.urls.regular}" alt="${photo.alt_description || '我的Unsplash照片'}" loading="lazy">
          </div>
          <div class="photo-caption">
            ${photo.alt_description || '我的照片'}
          </div>
        `;
        photosGrid.appendChild(card);
      });
    })
    .catch(err => {
      const photosGrid = document.getElementById("unsplash-photos");
      photosGrid.innerHTML = `<p style="width:100%; text-align:center; color:#e74c3c; font-size:1em;">加载失败：${err.message}</p>`;
      console.error("Unsplash API错误：", err);
    });
</script>

整段的代码 你只需要修改成为自己的api的key和账户名称，就能够显示自己上传的照片了。

当然css样式方面根据你自己使用的hexo主题样式修改哈，这里我就不多说啦，因为每一个主题的css样式都不一样。

看效果

总结

至此我的摄影页面就弄成了，当然主要还是ai牛逼。我是纯小白。

优点：

  • 以后我只需要在Unsplash这个网站中上传我拍摄的照片，那么这些我上传的照片就能够自动在我的小破站中展示，并且我无需再次修改这个页面的任何代码。
  • 我无需为了储存照片烦恼。

缺点：

  • 照片的所有权不在自己手中，
  • 每小时最多1,000 次请求，超出限制会返回 429 错误（Too Many Requests）

但是我估计我这个小破站是没啥人看的，所以我现在完全不担心这个，除非有人打我的小破站。