我正在写博客。我有几页: -家 -最新帖子 等等
所以我希望这些页面上的标题大小不同。具体来说，如果页面是“索引”，我希望“主页”字体大小为 45，“新帖子”字体大小为 24，如果页面是"new"，我希望它是反向的。怎么做？也许在“基本”文件中以某种方式指定？或者我必须以某种方式在"new"文件中更改它？
网站图片:
这是代码:
__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>
最佳答案
如果你想使用一个通用的基础，但根据正在使用的模板做不同的事情，你会想要参数化基础，并在模板文件中设置你想要的值并将它用于基础。
例如，考虑修改 base 以便每个菜单项都采用一个类。如果 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 模板中定义的变量可作为基本模板中的属性使用。
关于html - 如何在不同页面上使菜单项大小不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40961879/