在 Jekyll 中为静态文件添加布局答案

【问题标题】：Adding layout to static files in Jekyll在 Jekyll 中为静态文件添加布局
【发布时间】：2019-12-04 19:25:48
【问题描述】：

我正在使用 GitHub 页面发布项目中的文件。这些文件是 Java 源代码文件，我已经能够将它们作为静态文件添加到 Jekyll 作为一个集合。我需要对这些文件应用布局，例如代码格式化。我无法做到这一点。

我的静态源代码文件位于_config.yml 中定义的集合中：

collections_dir: material
collections:
  cse-solutions:
    output: true

我网站的这一部分工作正常：material/_cse-solutions 下的.java-files 在静态网站上出现在/cse-solutions 中。

但是，我需要包含标题和代码格式。为此，我试图将布局应用于这些静态文件。我目前的努力如下。首先，在_config.yml我设置

defaults:
  - scope:
      path: ""
      type: "cse-solutions"
    values:
      layout: java-code

然后我有一个包含内容的文件_layouts/java-code.html，为了简单起见

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test title </title>
  </head>
  <body>
    <h1> Test code page heading </h1>
    {{ content }}
  </body>
</html>

但是，此布局对站点上的 .java 文件没有影响。老实说，如果布局有效，我不知道输出是否会有.java-suffix。不过，我在网站上也找不到任何对应的.html-pages。

这可以吗？如果可以，我做错了什么？

编辑：我怀疑 Jekyll 只是忽略了静态文件的布局。使用 Liquid 中的jsonify，我实际上可以打印此集合的值，并且我可以看到系统已正确设置这些静态文件：

”layout”:”java_code”

但是对这些文件的格式化绝对没有影响。

(下划线，即java_code，而不是java-code，这里不是错误，因为我注意到Jekyll的某些部分不喜欢标识符中的破折号，所以我将破折号处处改为下划线。我认为Ruby不允许在标识符中使用破折号。）

【问题讨论】：

标签： jekyll

【解决方案1】：

我想你可能有点把事情复杂化了。如果我理解正确，您只是想在您的页面上显示实际的源代码，对吗？例如，您希望您的代码如下所示：

class HelloWorld 
{ 
    public static void main(String args[]) 
    { 
        System.out.println("Hello, World"); 
    } 
}

如果是这种情况，您可以简单地将编写的源代码保存为markdown 文件（.md）并让kramdown mardkown 转换器处理正确显示它。为此，您需要确保您的 _config.yml 文件中有以下内容：

kramdown:
  # Use GitHub flavored markdown, including triple backtick fenced code blocks
  input: GFM
  # Jekyll 3 and GitHub Pages now only support rouge for syntax highlighting
  syntax_highlighter: rouge

这将确保 kramdown 已启用，如果您愿意，将使用 rouge 进行语法高亮显示。

然后对于您想要的每个页面，只需创建一个pagename.md 文件并在页面顶部至少添加以下front matter：

---
layout: java-code
title:  "Here is my source code page"
---

这告诉 jekyll 使用您已经制作的“java-code”布局，并将页面的标题定义为您在引号中输入的任何内容。在前面的事情之后，只需将您的源代码复制到代码块中以进行降价。这很简单，你需要做的就是在你编码之前和之后有一行```。您可以选择将第一行设置为 ```java 以告诉 rouge 突出显示 java 语法以使其更易于阅读。

您也可以将任何降价文本放在您想要的代码块之外。这意味着您可以对代码进行描述，甚至可以在每个部分之前将代码拆分为带有文本描述的段。

综合起来，你的文件应该是这样的：

---
layout: java-code
title:  "Here is my source code page"
---

Here is my simple "Hello, world" program:

```java
class HelloWorld 
{ 
    public static void main(String args[]) 
    { 
        System.out.println("Hello, World"); 
    } 
} 
```

查看 jekyll 网站上的docs page for posts 了解更多信息，如果您不熟悉 Markdown，那么如果您进行快速 google 搜索（它是如何格式化 stackoverflow 答案的！），就会有大量使用它的指南。

【讨论】：

这种复杂方法（通过集合）的原因是我有很多这些.java-文件，它们是自动生成的（“纠结”来自.org-文件）。它们也会随着时间而改变。因此将它们转换为页面必须是自动的。但如果结果证明 Jekyll 做不到，我可以先转换为 Markdown，然后再交给 Jekyll。但这将需要另一个组件和一个流程步骤，否则该流程将是准备好的和自动的。
我一直在尝试找出一种不同的方法，但根据我的经验，我相信您至少需要一些前题才能让 Jekyll 呈现页面。我相信会添加 _config.yml 中设置的默认值。对于制作解决方案，我最好的猜测是在您创建的页面上使用 javascript 来遍历解决方案目录中的文件并将它们输出到降价块中。我现在在手机上，但我今晚会尝试看看它