如何在不同的頁面上使菜單項目大小不同

我在製作博客。我有幾頁： -首頁 - 新帖等如何在不同的頁面上使菜單項目大小不同

所以我希望標題在這些網頁上是不同的大小。具體而言，如果頁面是「索引」，並且頁面是「新」，我希望「首頁」字體大小爲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

如何在不同的頁面上使菜單項目大小不同

回答

相關問題