将CSS部分和SMARTY + PHP放在一起

我想如何将CSS部分放在一起在Smarty + php生成的html文件中。 CSS应该包含在标题中，但如果页面确实有一些单独的CSS样式呢？

我使用模板引擎Smarty。首先，我制作了标题（收集所有共同使用的内容），并使用smarty语法将其包含在html文件的头部。如果在页面中有一些单独的css部分，我把css放在'include语句'下面。与Smarty的语法

HTML文件

{include file='_include/header.inc.html'} 

    <link rel="stylesheet" href="/assets/style/top.css"> 
    <script type="text/javascript"> 
     $(function(){ 
      $('#eyecatch ul').bxSlider({ 
       pager: false, 
       auto: true, 
       pause: 5000 
      }); 
     }) 
    </script> 
    <article> 
    </article> 

{include file='_include/footer.inc.html'}

但我的同事检查使用Smarty生成的代码，并说：“这不是好的做法，因为要在一个地方放在一起，甚至将其作品”

标题下方有一个标记，因为我没有在标题中放置这一行。

你有什么好的想法来清理/整理Smarty的代码，正如他指出的那样？

来源

2014-10-19 Tosh

如果你想保留css/js在一起，你需要使用模板继承。

例如main.tpl创建一个主文件：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    {block name="css"} 
     <link rel="stylesheet" href="stylesheets/mystyle.css" media="all" /> 
    {/block} 
    {block name="js"} 
     <script src="js/jquery-1.11.1.min.js"></script> 
    {/block} 
</head> 
<body> 

{block name="content"}{/block} 
<script> 
{block name="js-code"} 

    function test() { 
    } 
{/block} 
</script> 
</body> 
</html>

你在这里定义块，你想更换/添加/追加内容。

现在您的最后一页您使用下面的代码扩展此文件：

{extends file='main.tpl'} 

{block name="css" append} 
    <link rel="stylesheet" href="stylesheets/pagestyle.css" media="all" /> 
{/block} 


{block name="js" append} 
    <script src="js/jquery.validate.min.js"></script> 
{/block} 

{block name="js-code" append} 

    function otherFunction() { 

    } 

{/block} 

{block name="content"} 
    this is content 
{/block}

正如你看到一些块有append的选择，因为你不希望替换父块（什么是做默认），但你想添加一些额外的内容（加载额外的风格文件，加载额外的JS文件或添加额外的JavaScript代码）。

结果你会得到这样的：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title>  
    <link rel="stylesheet" href="stylesheets/mystyle.css" media="all" />  
    <link rel="stylesheet" href="stylesheets/pagestyle.css" media="all" />  
    <script src="js/jquery-1.11.1.min.js"></script>  
    <script src="js/jquery.validate.min.js"></script> 
</head> 
<body> 
    this is content 
<script> 


    function test() { 
    } 


    function otherFunction() { 

    } 

</script> 
</body>

正如你看到的款式，现在在一个地方，而不是JS在HTML文档的许多地方

来源

2014-10-19 09:09:04

非常感谢。现在很清楚。 – Tosh 2014-10-20 01:46:04