Question

如何完全分离css文件

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

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

使用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清理/整理我的代码吗？

Answer 1

如果你想将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文档的许多部分

Answer 2

您可以使用gulp或grunt压缩在一个文件中使用相同布局的所有css，为id / class selector添加命名空间。

Answer 3

用{literal} ... {/literal}

围绕它

来源 - http://www.smarty.net/docsv2/en/language.function.literal

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

3 个答案: