如何完全分离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/