如何通过HTML超链接关联多张图片搭建年份图片导航层级

你当前使用的是基于jQuery Poptrox插件的灯箱相册模板，所有带class="image"的缩略图链接点击事件都会被插件默认拦截，触发单图弹窗预览逻辑，所以直接修改href属性不会触发页面跳转，之前插入的代码片段不生效也是这个原因。

根据你要的交互效果，三选一即可：

方案1：点击缩略图直接跳转到对应年份目录 #

• 第一步：直接修改每个缩略图<a>标签的href属性，指向对应年份的目录路径，替换原来的单张全尺寸图片路径，示例代码：

<article class="thumb">
    <a href="2022/index.html" class="image no-lightbox"><img src="images/thumbs/01.jpg" alt="2022年德克萨斯旅行" /></a>
    <h2>2022</h2>
    <p>德克萨斯旅行</p>
</article>
<article class="thumb">
    <a href="2021/index.html" class="image no-lightbox"><img src="images/thumbs/02.jpg" alt="2021年普里斯特湖出游" /></a>
    <h2>2021</h2>
    <p>普里斯特湖</p>
</article>
<article class="thumb">
    <a href="2020/index.html" class="image no-lightbox"><img src="images/thumbs/03.jpg" alt="2020年北亚利桑那旅行" /></a>
    <h2>2020</h2>
    <p>北亚利桑那</p>
</article>

• 第二步：排除插件对这些跳转链接的拦截，打开assets/js/main.js，找到Poptrox初始化代码块，新增selector配置项，过滤掉不需要触发灯箱的链接：

$('#main').poptrox({
    selector: 'a.image:not(.no-lightbox)', // 新增这行，排除带no-lightbox类的链接
    baseZIndex: 10000,
    fadeSpeed: 300,
    // 保留文件里原有的其他配置参数不要动
})

方案2：不修改JS配置实现跳转 #

如果不想动插件初始化代码，直接把需要做页面跳转的a标签上的image类去掉即可，Poptrox默认只绑定带image类的链接，去掉类名后插件不会拦截点击事件，会直接按照href路径跳转。可以自己加个自定义类比如thumb-link，在css里补下和原来一致的显示样式就行。

方案3：保留缩略图灯箱预览，点击文字跳转目录 #

如果需要点击缩略图还是看单图预览，点年份标题/描述跳转到对应目录，不需要改任何JS配置，直接给标题和描述文字包上跳转链接即可，示例：

<article class="thumb">
    <a href="images/fulls/01.jpg" class="image"><img src="images/thumbs/01.jpg" alt="" /></a>
    <h2><a href="2022/index.html">2022</a></h2>
    <p><a href="2022/index.html">德克萨斯旅行</a></p>
</article>

你贴的代码里有两处语法错误，顺手修复避免样式错乱：

1. Footer模块前的注释缺失开头的<，把!-- Footer --改成<!-- Footer -->
2. Footer里的标题标签不匹配，把<h2>text goes here</p>改成<h2>text goes here</h2>

内容的提问来源于stack exchange，提问作者sinewaves