如何在Eleventy的JavaScript文件中访问集合对象与JSON数据

问题描述 #

• 我是Eleventy新手，正在自学。现有带下拉菜单的gallery.html页面，配套JS文件会根据下拉选项动态添加HTML内容。
• 尝试在src/js目录的JS文件中访问.eleventy.js里定义的portraits集合，直接写collections.portraits时，控制台报错：

  ReferenceError: collections is not defined

• 尝试访问src/_data/photos.json中的数据，写photos.aKey时，控制台报错：

  ReferenceError: photos is not defined

解决方法 #

Eleventy的collections和_data目录下的数据都是构建时的服务端数据，无法直接在前端JS文件中访问。需要先把数据注入到HTML页面的全局作用域，再让前端JS读取。

1. 访问src/_data/photos.json数据 #

在gallery.html模板中，将photos数据挂载到全局window对象，且这段代码要放在自定义JS文件引入之前：

<script>
  // 注入_data中的photos数据到全局
  window.photos = {{ photos | dump | safe }};
</script>
<!-- 引入你的自定义JS文件 -->
<script src="/js/你的脚本文件名.js"></script>

之后在JS文件中，即可通过photos.aKey（或window.photos.aKey）访问对应数据。

2. 访问portraits集合数据 #

同样在gallery.html模板中注入集合数据：

<script>
  // 注入portraits集合数据到全局
  window.portraitsCollection = {{ collections.portraits | dump | safe }};
</script>

在JS文件中，通过window.portraitsCollection就能访问集合内容。

关键说明 #

• dump过滤器用于将Eleventy的数据转换为JSON字符串，safe过滤器避免HTML转义数据内容，确保注入的是合法的JS对象。
• 必须保证数据注入的script标签在自定义JS之前执行，否则JS运行时会找不到对应数据。

内容的提问来源于stack exchange，提问作者Gaëlle Bono