Eleventy博客文章模板无法加载CSS文件求助

问题描述 #

使用HTML、CSS和Eleventy搭建个人博客时，首页和博客列表页的CSS加载正常，但文章页面无法加载指定的post.css文件。

核心问题分析 #

1. CSS文件未同步到输出目录：.eleventy.js仅配置了public-css和assets目录的静态文件复制，page-css目录下的post.css未被同步到public输出目录，导致页面请求时找不到文件。
2. 相对路径层级错误：base.njk中使用../css/page-css/{{ cssFile }}的相对路径加载CSS，而Eleventy生成的文章页面通常位于子目录（如/posts/2024-04-05-new-article/），相对路径会指向错误位置。
3. HTML标签闭合异常：article.njk中<h1>标签误用<h2>闭合，虽不直接影响CSS，但会导致HTML结构错误。

修复步骤 #

1. 配置静态文件复制规则 #

修改.eleventy.js，添加page-css目录的复制配置，确保该目录下的文件能同步到输出目录：

const {DateTime } = require("luxon");

module.exports = function(eleventyConfig) {
    
    eleventyConfig.addPassthroughCopy('./src/css/public-css/reset.css');
    eleventyConfig.addPassthroughCopy('./src/css/public-css/main.css');
    eleventyConfig.addPassthroughCopy('./src/css/page-css'); // 新增此行
    eleventyConfig.addPassthroughCopy('./src/assets')
    
    eleventyConfig.addFilter("postDate", (dateObj) => { 
        return DateTime.fromJSDate(dateObj).toLocaleString(DateTime.DATE_MED);
    })

    return {
      dir: {
        input: "src",
        output: "public"
      }
    }
  };

2. 改用根路径加载CSS #

修改base.njk中的CSS链接，将相对路径改为根路径（以/开头），确保所有页面都能正确定位到CSS文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="/css/public-css/reset.css">
    <link rel="stylesheet" href="/css/public-css/main.css">
    <link rel="stylesheet" href="/css/page-css/{{ cssFile }}" />
</head>
<body>
    {% include 'header.njk' %}
    <main>
        {{ content | safe }}
    </main>
    {% include 'footer.njk' %}
</body>
<script src="https://kit.fontawesome.com/f40fa953b8.js" crossorigin="anonymous"></script>
</html>

3. 修复HTML标签闭合错误 #

修改article.njk中的标题标签，确保<h1>标签正确闭合：

---
layout: 'base.njk'
cssFile: 'post.css'
---
<article class="main-article">

    <div class="article-head">
        <div class="article-head-left">
            <h1 class="article-title">{{ title }}</h1> <!-- 修正闭合标签 -->
            <h2 class="article-subheader">{{ description }}</h2>
            <span class="article-author"><a href="#">{{ author }}</a>{{ author-description }}</span>
            <time class="publication-time">{{ date }}</time>
        </div>
        <div class="article-head-right">
            <figure class="main-article-figure">
                <img src="{{ image }}" alt="{{ imageAlt }}">
                <figcaption>{{ imageAlt }}</figcaption>
            </figure>
        </div>
    </div>
    <hr>

    {{ content | safe }}

</article>

完成以上修改后，重新运行Eleventy构建命令，文章页面即可正常加载post.css文件。

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