Question

我在Jekyll中创建一个样式指南，并使用Collections定义指南的不同元素。例如，Library(lattice) data$rank <- rank(data$count) colVec <- rep("white", nrow(data)) colVec[data$label == "AA"] <- "red" barchart(count ~ sample, groups = as.factor(rank), stack = TRUE, data = data, as.table = TRUE, col = colVec, ylab = "Counts")，headings等

我试图将Sass分成与部分匹配的文件，一对一，并且我想将Sass文件渲染为每个集合的一部分。

所以，比如：

lists

基本上，我想要的是＆＃34;在此目录中包含一个与我的集合中此条目同名的文件。如果它不存在，就不要破坏。＆＃34;

我该怎么做？我已经探索过将文件路径存储在一个变量中，但似乎无法使其工作。

提前致谢。

Answer 1

可以做到。

这适用于Jekyll 3，但它当然可以移植到Jekyll 2。从基本安装（jekyll new）

开始

_config.yml

collections:
  guide:
  sasssamples:

样式指南文件

我们的样本将分组在_guide集合中。

示例文件： _guide / header / header1.hmtl

---
title: Header level 1
---
<h1>Header level 1</h1>

SCSS样本

我们希望我们的SCSS样本包含在我们的css/main.scss中，并使用我们其他SCSS文件中定义的变量。我们的样本将在css/main.scss
我们不希望我们的SCSS示例呈现为css，因此没有.scss扩展名。切换到.txt扩展名
我们想要从列表中访问SCSS样本。我们将它们放在sasssamples集合中。

示例文件： _sasssamples / header / header1.txt

---
---
h1{
  color: $brand-color;
  border: 1px solid $brand-color;
}

SCSS样本集成

在bootstraping scss文件的最后添加此代码（在基础Jekyll安装上css/main.scss）

<强> CSS / main.scss

[ original code ... ]

{% comment %} Selecting a collection the Jekyll 3 way. See https://github.com/jekyll/jekyll/issues/4392 {% endcomment %}
{% assign scssCollection = site.collections | where: 'label', 'sasssamples' | first %}
{% comment %}
    Printing documents in sasssamples collection.
    All SCSS from style guide are sandboxed in .guide class
    This allows us to apply styles only to style guide html samples
{% endcomment %}
.guide{
    {% for doc in scssCollection.docs %}
        {{ doc.content }}
    {% endfor %}
}

样式指南

<h2>Style guide</h2>
{% comment %}Selecting a collection the Jekyll 3 way. See https://github.com/jekyll/jekyll/issues/4392 {% endcomment %}
{% assign guideCollection = site.collections | where: 'label', 'guide' | first %}
{% assign scssCollection = site.collections | where: 'label', 'sasssamples' | first %}

{% comment %} Looping hover style guide samples {% endcomment %}
{% assign samples = guideCollection.docs %}
{% for sample in samples %}
    <article>
        <h3>Element : {{ sample.title }}</h3>
        <h4>Render</h4>
        <div class="guide">
            {{ sample.content }}
        </div>
        <h4>html code</h4>
        {% highlight html %}{{ sample.content }}{% endhighlight %}
        {% comment %}
        Changing a path like : _guide/headers/header1.html
        to :                   _sasssamples/headers/header1.txt
        {% endcomment %}
        {% assign scssPath = sample.path | replace: '_guide', '_sasssamples' %}
        {% assign scssPath = scssPath | replace: '.html', '.txt' %}
        {% comment %} Try to find a SCSS sample with equivalent path {% endcomment %}
        {% assign scssSample = scssCollection.docs | where: 'path', scssPath | first %}
        {% comment %}We print SCSS sample only if we found an equivalent path{% endcomment %}
        {% if scssSample != nil %}
            <h4>SCSS code</h4>
            {% highlight css %}{{ scssSample.content }}{% endhighlight %}
        {% endif %}
    </article>
{% endfor %}

完成！

Answer 2

似乎只会错过分配正确的路径

{% if _includes/_sass/{{ entry.title | append: ".scss"}}

需要替换为scss文件的相对路径：

{% assign scssPath = 'relative/path/to/your/scss/' %}
{% if {{ entry.title | append: ".scss"  | prepend: scssPath }} != nil %}

包含文件，但仅限于存在？

2 个答案:

_config.yml

样式指南文件

SCSS样本

SCSS样本集成

样式指南