使用常见的JS文档为静态网站优化CSS / JS导入
[英]Optimizing CSS/JS imports for Static website using common a JS document
问题描述
Coming from a server side programming background, this might be a noob question. 
来自服务器端编程背景，这可能是一个菜鸟问题。
Currently I have css laid out like below and also JS in a similar fashion. 目前，我的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">
But I have around some 40-50 html pages remaining to be coded and dropped in and all pages share the same CSS/JS more or less.So, how do I avoid this boilerplate typing.Can I just do like below 但是我还有大约40-50个html页面需要编码和放入，所有页面或多或少都共享相同的CSS / JS，所以，如何避免这种样板式输入，我可以像下面这样吗
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')
I mean using the same logic to print out <script> and <link> tags?If so, does it have any disadvantages or is there a better way to do it. 我的意思是使用相同的逻辑来打印<script>和<link>标记？如果是这样，它有什么缺点吗？或者有更好的方法来打印它。
1 个解决方案
解决方案1
1 已采纳 2015-03-21 12:55:28
Since you are using Jekyll, you should just use the Includes feature built in. 由于您使用的是Jekyll，因此应该只使用内置的“ 包含”功能 。
All you do is have a _includes folder in the root folder of your project, and add a js-css.html file in there with all your <script> and <link> tags to reference the JS and CSS files. 您要做的只是在项目的根文件夹中有一个_includes文件夹，并在其中添加带有所有<script>和<link>标记的js-css.html文件，以引用JS和CSS文件。
Then in your template, you would just have: 然后，在模板中，您将只有：
{% include js-css.html %}
in your <head> tag everywhere. 在任何地方的<head>标记中。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.