Question

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

所以我希望这些页面上的标题大小不同。具体来说我希望“Home”字体大小为45，如果页面为“index”，则“New post”字体大小为24，如果页面为“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>

Answer 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.active不同的方式显示ul>li>a。

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

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

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

模板中定义的

var个变量可作为基本模板中的属性使用。

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

1 个答案: