Question

来自服务器端编程背景，这可能是一个noob问题。

目前我的css布局如下，并且JS也以类似的方式布局。

<link type ="text/css" href="css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="css/custom.css" rel="stylesheet">
<link type="text/css" href="css/template.css" rel="stylesheet">

但我还有大约40-50个html页面需要编码和删除，并且所有页面或多或少共享相同的CSS / JS。所以，我如何避免这种样板输入。我可以像下面这样做< / p>

var navBar = ['<div class="hi-icon-wrap hi-icon-effect-9 hi-icon-effect-9a" text-align="">',
                        '<a class="hi-icon hi-icon-fa-home" style="text-decoration:none!important" href="index" title="Blah"></a>Home',
                        '<a class="hi-icon hi-icon-fa-wrench" style="text-decoration:none!important" href="tools" title="Blah"></a>Tools',
                        '<a class="hi-icon hi-icon-fa-folder-o" style="text-decoration:none!important"href="blog" title="Blah"></a>Blog',
                        '<a class="hi-icon hi-icon-fa-user" style="text-decoration:none!important" href="about" title="Blah"></a>About Me',
                    '</div>'].join('\n')

我的意思是使用相同的逻辑来打印<script>和<link>标签？如果是这样，它是否有任何缺点或是否有更好的方法。

Answer 1

由于您使用的是Jekyll，因此您应该只使用内置的Includes feature。

您所做的只是在项目的根文件夹中有一个_includes文件夹，并在其中添加js-css.html个文件，其中包含您的所有<script>和<link>标记引用JS和CSS文件。

然后在您的模板中，您将拥有：

{% include js-css.html %}

在您的<head>标记处。

使用常见的JS文档优化静态网站的CSS / JS导入

1 个答案: