Methods to avoid syntax conflicts between Smarty and CSS, smartycss syntax conflicts

Methods to avoid syntax conflicts between Smarty and CSS, smartycss syntax conflicts_PHP tutorial

WBOY

Release： 2016-07-13 10:05:35

Original

956 people have browsed it

Methods to avoid syntax conflicts between Smarty and CSS, smartycss syntax conflicts

The examples in this article describe methods to avoid syntax conflicts between Smarty and CSS. Share it with everyone for your reference. The specific analysis is as follows:

Those who are familiar with CSS will quickly find that there is a syntax conflict between Smarty and CSS, because both require the use of curly brackets {}. Simply embedding CSS tags into the header of an HTML document will result in an "unrecognized tag" error:

<html> 
<head> 
<title>{$title}</title> 
<style type="text/css"> 
p{ 
margin::2px 
} 
</style> 
</head> 
...

Copy after login

Don’t worry because we have 3 solutions.

1. Use the link tag to extract style information from another file:

<html> 
<head> 
<title>{$title}</title> 
<link rel="stylesheet" type="text/css" href="css/default.css"/> 
</head> 
...

Copy after login

2. Use Smarty’s literal tag to surround style sheet information

These tags tell Smarty not to parse anything within this tag:

<html> 
<head> 
<title>{$title}</title> 
{literal} 
<style type="text/css"> 
p{ 
margin::2px 
} 
</style> 
{/literal} 
</head> 
...

Copy after login

3. Modify Smarty’s default delimiter

This can be done by setting the center_delimiter and center_delimiter properties:

<&#63;php 
require("Smarty.class.php"); 
$smarty=newSmarty; 
$smarty->left_delimiter=''; 
$smarty->right_delimiter=''; 
... 
&#63;>

Copy after login

While all 3 solutions will solve the problem, the first of them is probably the most convenient since putting CSS in a separate file is a common practice. Furthermore, this solution does not require modification of Smarty's important default configuration (delimiters).

I hope this article will be helpful to everyone’s PHP programming design.