Поставьте CSS части вместе с SMARTY + PHP

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

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

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

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

3 2
html css php smarty

3 ответа:

Если вы хотите сохранить 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, потому что вы не хотите заменять родительский блок (что делается по умолчанию), но вы хотите добавить дополнительное содержимое (файл файл Extra тип нагрузки, дополнительные нагрузки 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

Вы можете использовать gulp или grunt сжать все css, которые используют один и тот же макет в одном файле, добавить пространство имен для селектора id/class.

0

Окружите его {literal}...{/literal}

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

0