Jekyll博客中同一JavaScript脚本首页生效文章页失效原因排查

嘿，我来帮你拆解下这个问题的原因，以及对应的解决办法～

核心原因分析 #

1. 元素选择器不匹配 #

你写的脚本里只针对.post-summary类的元素添加悬停效果，但文章页的相邻文章导航链接，它的HTML类名大概率不是.post-summary——毕竟首页的文章摘要和文章页的相邻导航是两个不同的组件，Jekyll默认生成的模板里，这俩的类名肯定不一样。脚本找不到对应的元素，自然就不会生效啦。

2. 脚本加载范围有限 #

如果这段jQuery脚本只放在了首页的模板文件里（比如index.html），没有在文章页的模板（比如_layouts/post.html）里引用，那文章页根本就没加载这段脚本，效果当然出不来。

具体解决办法 #

方法1：修正选择器，覆盖所有需要的元素 #

1. 打开你的文章页，右键点击上一篇/下一篇的链接，选择「检查元素」，查看它的类名（比如可能是.adjacent-post、.related-post-link之类的）。
2. 修改脚本里的选择器，同时包含首页和文章页的目标类：

$(document).ready(function() {
  // 同时匹配首页文章摘要和文章页相邻导航的链接
  $('.post-summary, .adjacent-post-link').hover(
    function() { $(this).animate({opacity: 1}, 100); },
    function() { $(this).animate({opacity: .7}, 100); }
  );
});

把上面的.adjacent-post-link换成你实际查到的类名就行。

方法2：确保脚本全局加载 #

把这段脚本放到Jekyll项目的全局公共模板里，比如_includes/footer.html（所有页面都会加载底部的这个文件），或者单独的全局JS文件（比如assets/js/main.js）并在所有页面的模板里引用它，这样不管是首页还是文章页，都会加载这段脚本。

方法3：用CSS替代jQuery（更推荐） #

其实这种简单的悬停透明度变化，用CSS过渡就能实现，比jQuery更高效，还不用考虑脚本加载的问题：

/* 给所有需要的元素设置初始状态和过渡效果 */
.post-summary, .adjacent-post-link {
  opacity: 0.7;
  transition: opacity 0.1s ease-in-out;
}
/* 悬停时的状态 */
.post-summary:hover, .adjacent-post-link:hover {
  opacity: 1;
}

把这段CSS放到你的全局样式文件里（比如assets/css/style.css），同样替换.adjacent-post-link为你文章页导航的实际类名即可。

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