如何用Jekyll从单份MD生成多HTML或添加预览样式？

问题1：从单份index.md生成两种HTML文件 #

可以通过Jekyll的布局+内容复用实现，无需复制文件或额外工具：

1. 创建两个布局文件：

   • _layouts/fragment.html（用于生成无结构的内容片段）：

     {{ content }}
     

   • _layouts/preview.html（用于生成带完整结构和样式的预览版）：

     <!DOCTYPE html>
     <html>
     <head>
       <meta charset="utf-8">
       <title>内容预览</title>
       <style>
         /* 复制你自有网站的核心CSS样式，示例： */
         .content-wrap {
           max-width: 800px;
           margin: 2rem auto;
           padding: 0 1rem;
           line-height: 1.7;
           font-family: sans-serif;
         }
         h1, h2 {
           color: #2d3748;
         }
         p {
           margin-bottom: 1rem;
         }
         /* 其他需要的样式 */
       </style>
     </head>
     <body>
       <div class="content-wrap">
         {{ content }}
       </div>
     </body>
     </html>
     

2. 复用index.md内容生成两个输出文件：

   • 保持index.md的内容不变，通过Front Matter指定生成片段文件：

     ---
     layout: fragment
     permalink: /index1.html
     ---
     # 你的Markdown内容
     ...
     

   • 创建preview-index.md，用来渲染index.md的内容生成预览版：

     ---
     layout: preview
     permalink: /index2.html
     ---
     {% capture raw_content %}{% include_relative index.md %}{% endcapture %}
     {{ raw_content | remove: '---' | remove: '---' | markdownify }}
     

     （注：remove: '---'是为了移除index.md中的Front Matter块，避免被渲染到页面中）

执行bundle exec jekyll build后，会自动生成index1.html（纯内容片段，无头部尾部）和index2.html（带完整结构与样式的预览文件）。

问题2：无需浏览器插件给预览版添加样式 #

上面的preview.html布局已经内置了<style>标签，直接把你自有网站的核心CSS复制进去即可。生成的index2.html在浏览器中打开后，会直接加载内置样式，完全不需要依赖浏览器插件。

如果你的样式是独立的CSS文件，也可以在preview布局中用<link>标签引入本地CSS文件（比如<link rel="stylesheet" href="/assets/css/preview.css">），只要路径正确，预览时就能正常加载样式。

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