HTML — соедините части CSS вместе с SMARTY + Stack Overflow

Question

HTML — соедините части CSS вместе с SMARTY + Stack Overflow

Как полностью отделить CSS-файл

Я думаю, как разместить части CSS вместе в HTML-файл, созданный Smarty + php.
CSS должен быть включен в заголовок, но что если на странице есть какой-то индивидуальный стиль CSS?

Я использую шаблонизатор Smarty. Сначала я сделал заголовок (собрал все, что используется совместно) и включил его в заголовок html-файла с синтаксисом smarty.
И если на странице есть какая-то отдельная часть css, я помещаю css ниже «включения».

HTML-файл с синтаксисом Smarty

{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, как он указал?

2

css html php smarty smarty3

Решение

Другие решения

Ты можешь использовать глоток или grunt сжимать все CSS, которые используют одну и ту же компоновку в одном файле, добавить пространство имен для идентификатора / селектора класса.

0

окружить его {literal}…{/literal}

источник — http://www.smarty.net/docsv2/en/language.function.literal

0

Источник

Accepted Answer

Если вы хотите сохранить 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-документа

4