将CSS部分与SMARTY+PHP放在一起 - Put CSS parts together with SMARTY + PHP

Put CSS parts together with SMARTY + PHP

本文关键字：SMARTY+PHP 在一起 CSS | 更新日期: 2023-09-27

如何完全分离css文件

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

我使用模板引擎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所指出的，你有什么好主意来清理/整理我的代码吗？

如果你想把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>

您在这里定义了要替换/prepend/append内容的块。

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

{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文档的许多部分

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

用{literal}包围它。。。{/literal}

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