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

标签 php html css smarty smarty3

如何完全分离css文件

我在考虑如何将 CSS 部分放在 Smarty + php 生成的 html 文件中。 CSS 应该包含在 header 中,但是如果页面确实有一些单独的 CSS 样式怎么办?

我使用模板引擎 Smarty。首先,我制作了 header (收集所有常用的东西。)并使用 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>

您在此处定义了要替换/前置/附加内容的 block 。

现在在您的最终页面中,您使用以下代码扩展此文件:

{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}

如您所见,对于某些 block ,有 append 选项,因为您不想替换父 block (默认情况下完成的),但您想添加一些额外的内容(加载额外的样式文件,加载额外的 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 文档的许多部分中

关于php - 将 CSS 部分与 SMARTY + PHP 放在一起,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26447640/

相关文章:

php Action 方法: how to redirect the user input to userinput+required extension?

Javascript 脚本不会在 HTML 中加载

php - Magento 观察者未查看产品详细信息

php - 将数据从 Controller 传递到 Laravel 嵌套 View

php - Slim 框架 INSERT 查询不起作用

jquery - 使用 CSS 对齐 div 以填充父容器的宽度

java - 在Struts2中,如何以HTML格式正确显示文本(从文本区域收集)?

html - 消失的 DIV 或 DIV 边框

php - 如何在 PHP 中创建类似 bind_param() 的函数?

javascript - Div 覆盖在 IE 中的对象上