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

Question

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

目前我有 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 或 less.So，我该如何避免这种情况样板 typing.Can 我只是喜欢下面

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 导入

Optimizing CSS/JS imports for Static website using common a JS document

html

javascript

css

web