hugo中的layouts目录的功能：layouts覆盖主题的某些部分。Hugo 为我们提供了混合和匹配主题页面的灵活性，并编写我们自己的自定义页面。在此文件夹中，将进行主题的所有自定义。我们可以使用此目录来存储这些被覆盖的主题布局。主题和布局之间的界限是模糊的，Hugo 为我们提供了完全的灵活性，通过一个接一个地覆盖页面来慢慢创建主题。在本章中，我们将使用 layouts 文件夹来更新主页。

如果有一些自定义的页面，不想使用现有的主题，可以设置自定义布局。

  1. 在 layouts 目录下创建一个新的布局文件，例如 home1.html。 示例代码
<!DOCTYPE html>
<html>
<head>
  <title>完全自定义页面</title>
  <style>
    body { font-family: Arial; max-width: 800px; margin: 0 auto; }
    .custom-section { background: #f0f8ff; padding: 2rem; }
  </style>
</head>
<body>
  <header>
    <h1>我的独立页面</h1>
  </header>
  
  <section class="custom-section">
    <h2>完全自定义内容</h2>
    <p>这个页面不使用任何主题布局</p>
    <button id="interact">点击交互</button>
  </section>
  
  <script>
    document.getElementById('interact').addEventListener('click', () => {
      alert('自定义JavaScript生效!');
    });
  </script>
</body>
</html>
  1. 输入命令 hugo new content content/posts/custom-page.md 新建文件。修改配置
---
layout: "home1"
title: 'Custom Page'
---

把 layout 参数改为 home1，指定使用的布局文件。

  1. 通过访问 http://localhost:1313/posts/custom-page/ 查看效果。