將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