Add Custom Page in Hugo
hugo中的layouts目录的功能：layouts覆盖主题的某些部分。Hugo 为我们提供了混合和匹配主题页面的灵活性，并编写我们自己的自定义页面。在此文件夹中，将进行主题的所有自定义。我们可以使用此目录来存储这些被覆盖的主题布局。主题和布局之间的界限是模糊的，Hugo 为我们提供了完全的灵活性，通过一个接一个地覆盖页面来慢慢创建主题。在本章中，我们将使用 layouts 文件夹来更新主页。 如果有一些自定义的页面，不想使用现有的主题，可以设置自定义布局。 在 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> 输入命令 hugo new content content/posts/custom-page.md 新建文件。修改配置 --- layout: "home1" title: 'Custom Page' --- 把 layout 参数改为 home1，指定使用的布局文件。 ...