在Jekyll的页面上写出SCSS代码

时间:2017-07-21 15:25:21

标签: angularjs sass jekyll

我创建了一个适用于所有意图和目的的网页,这是我们应用程序上其他开发人员的风格指南。

我在我的Jekyll项目的.scss目录中有_sass个文件,并且它创建了所有CSS文件。但是,在我的网页上,我想在一些.scss代码中显示页面中这些<pre><code>个文件的代码。

目前我在这两个地方重复了这里的代码。当它很小的时候就没那么大了,但是现在它变得越来越大,它需要 DRY - 出来。

我首先走上了使用Jekyll的{% include [path/to/file] %}的道路,然后意识到适用于_includes文件夹中的内容,我无法使用{ {1}}选项,因为include_relative文件夹不是其使用位置的子项。

其次我尝试使用角度方法,因为我已经在我的应用程序中使用它。扔了一些_sass并期望它起作用。当然,它不是因为运行它时<pre><code ng-include="'../_sass/components/_sflButton.scss'">文件夹没有生成到实际站点中。我似乎找不到让它包含它的方法。尝试在_sass中更改一些内容无效。

所以, TL; DR ,我希望能够通过Jekyll将我的_config.yml文件夹中的代码包含到我的页面中,或者找到获取{{1要加载到生成的站点中的文件夹,以便我可以使用Angular加载它。我想在这里做一个不可能完成的任务吗?愿意听取任何意味着代码只能写在一个地方的建议。

1 个答案:

答案 0 :(得分:0)

完成这项工作背后的理论如下:

  • _sass是Jekyll的特殊目录(类似于_layouts_includes),与您创建的其他目录相比,处理方式不同。其内容不会输出到目标目录。
  • 您可以编写简单的ruby程序并将它们添加到名为_plugins的目录中,Jekyll将在构建过程中运行这些自定义程序。 (被GitHub页面忽略)。
  • 现在写一个红宝石程序给&#34;阅读&#34; _sass的内容,并将结果数据格式化为哈希,并将此哈希值提供给现有site_payload
  • 哈希可以另外作为Drop实例传递,以通过Liquid模板提供数据。

如果您不熟悉Ruby和Jekyll代码库,我承认这个答案实际上并没有解决您的问题。但它将作为一个起点......