如何使不同页面上的菜单项大小不同答案

【问题标题】：How to make menu items different size on different pages如何使不同页面上的菜单项大小不同
【发布时间】：2016-12-04 18:11:00
【问题描述】：

我正在写博客。我有几页： -家 -最新帖子等等

所以我希望这些页面上的标题大小不同。具体来说，如果页面是“索引”并且如果页面是“新”，我希望“主页”字体大小为 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>

【问题讨论】：

标签： html css web.py

【解决方案1】：

如果您想使用一个通用的基础，但根据使用的模板做不同的事情，您需要参数化基础，并在模板文件中设置您想要的值并在基础中使用它。

例如，考虑改变基础，使每个菜单项都采用一个类。如果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 模板中定义的变量可用作基本模板中的属性。

【讨论】：