时间戳

首页 > 解决方案 > 在 Jekyll 中为静态文件添加布局

jekyll - 在 Jekyll 中为静态文件添加布局

问题描述

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

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

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

我网站的这一部分工作正常：.java-files undermaterial/_cse-solutions出现在静态网站上的/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在网站上找到任何相应的页面。

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

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

”layout”:”java_code”

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

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

标签： jekyll

解决方案

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

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

如果是这种情况，您可以简单地将编写的源代码保存为降价文件 (.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添加至少以下内容：

---
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 网站上的帖子以获取更多信息，如果您不熟悉 markdown，那么如果您进行快速 google 搜索（它是如何格式化 stackoverflow 答案的！），就会有大量关于使用它编写的指南。

推荐阅读