如何在不同的页面上使菜单项目大小不同

我在制作博客。我有几页： -首页 - 新帖等如何在不同的页面上使菜单项目大小不同

所以我希望标题在这些网页上是不同的大小。具体而言，如果页面是“索引”，并且页面是“新”，我希望“首页”字体大小为45，“新文章”字体大小为24。怎么做？也许在“基本”文件中以某种方式指定？或者我不得不以某种方式在“新”文件中改变它？

图片的网站的：下面的代码：

__base.html

$def with (page) 

<html> 
<head> 
    <title>S. Gera | Vision</title> 
<style> 
    #menu { 
     width: 200px; 
     float: right; 
    } 
</style> 
</head> 
<body> 

<ul id="menu"> 
    <li><a style="font-size: 45; text-decoration: none" href="/">Home</a></li> 
<li><a style="font-size: 24; text-decoration: none" href="/new">New Post</a></li> 
</ul> 

$:page 

</body> 
</html>

__index.html

$def with (posts) 

<html> 
<h1 style="color: Grey; font-family: Georgia; text-align: Left">Blog posts</h1> 

<ul> 
$for post in posts: 
    <li> 
     <strong> <a style="color: Black; text-decoration: none; font-size: 18" href="/view/$post.id">$post.title</a> </strong> 
     <a style="color: Blue; font-size: 15">| $datestr(post.posted_on)</a> 
     <a style="color: Red; font-size: 11; font-family: Arial; text-decoration: none" href="/edit/$post.id">(Edit)</a> 
    </li> 
</ul> 
</html>

__new.html

$def with (form) 

<html> 
<h1 style="color: Grey; font-family: Georgia; text-align: Left">New Blog Post</h1> 

<form action="" method="post"> 
$:form.render() 
</form> 
<html>

__view.html

$def with (post) 

<h1>$post.title</h1> 
$datestr(post.posted_on)<br/> 

$post.content

__edit.html

$def with (post, form) 

<html> 
<h1>Edit $form.d.title</h1> 

<form action="" method="post"> 
$:form.render() 
</form> 


<h2>Delete post</h2> 
<form action="/delete/$post.id" method="post"> 
    <input type="submit" value="Delete post"/> 
</form> 
</html>

来源

2016-12-04 r_metal

如果你想使用一个共同的基础，但根据正在使用的模板上做不同的事情，你会想参数化底座，并在底座中使用模板文件&中设置的值。

例如，考虑改变基地，使每个菜单项都需要一个班级。如果page.selected_menu匹配，则它将该类别设置为active，否则，该类别设置为""。

=== base.html === 
... 
<ul id="menu"> 
<li> 
    <a class="$('active' if page.selected_menu == 'home' else '')" 
     href="/">Home</a></li> 
<li> 
    <a class=$('active' if page.selected_menu == 'new' else '')" 
     href="/new">New Post</a></li> 
</ul> 
...

使用CSS来从ul>li>a显示ul>li>a.active不同。

然后，在您的模板中，设置您想要设置为“活动”的菜单的值。例如：

=== new.html === 
$var selected_menu: new 

=== home.html === 
$var selected_menu: home

var模板中定义的变量可用作基本模板中的属性。

来源

2016-12-04 20:29:42 pbuck

如何在不同的页面上使菜单项目大小不同

回答

相关问题