常见问题解决方案：Eleventy Photo Gallery 项目-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00052/article/details/144627300

常见问题解决方案：Eleventy Photo Gallery 项目

eleventy-photo-gallery Starter site for creating a responsive image gallery using the Eleventy static site generator 项目地址: https://gitcode.com/gh_mirrors/el/eleventy-photo-gallery

一、项目基础介绍

Eleventy Photo Gallery 是一个使用 Eleventy 静态站点生成器创建的响应式图片库的起始项目。该项目可以帮助用户快速搭建自己的图片或艺术画廊。项目主要使用的编程语言为 JavaScript，并且利用了 SCSS 进行样式预处理。

二、新手常见问题及解决步骤

问题一：如何搭建和运行项目？

解决步骤：

克隆项目到本地：使用 git clone https://github.com/tannerdolby/eleventy-photo-gallery.git 命令。
进入项目目录：使用 cd eleventy-photo-gallery 命令。
安装依赖：在项目根目录下运行 npm install。
构建项目：运行 npm run build 命令进行构建。
启动本地服务：运行 npm run start 或 npm run dev。

问题二：如何添加自己的图片？

解决步骤：

将图片放入项目中的 images 文件夹。

在 _data/gallery.json 文件中添加图片的元数据，格式如下：

[
    {
        "title": "图片标题",
        "date": "拍摄日期",
        "credit": "图片作者",
        "linkToAuthor": "作者链接",
        "src": "图片文件名",
        "alt": "图片描述",
        "imgDir": "/images/"
    }
]