Tos*_*shi 4 html css php smarty smarty3
如何完全分离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>
您在此处定义了要替换/添加/附加内容的块。
现在在您的最终页面中，您使用以下代码扩展此文件：
{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 文档的许多部分