为标题创建布局，包括登录/注销链接

Question

在我的Express JS网络应用程序中，我需要创建一个布局视图，该视图附加到所有其他视图。布局应包含标头和登录或注销链接，具体取决于用户身份验证条件。

布局.pug：

doctype html
html
head
title= title
link(rel='stylesheet', href='/bootstrap/css/bootstrap.css')
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='/jquery/jquery.min.js')
script(src='/bootstrap/js/bootstrap.min.js')    
block extraHeader
block extraScript
body
block content

home.pug，包含顶部的布局，如果用户已登录，则可能包含注销链接。

extends layout
block content
h1= title
p Welcome to #{title}

如何在layout.pug中生成标头？

Answer 1

您需要在body标记和block content之间添加代码：

body
div Header goes here
block content

您也可以使用条件逻辑来控制其中的按钮：

body
div Header goes here
if(user)
button(onclick='logout()') Logout
else
button(onclick='login()') Login
block content

在一行中使用三元运算符：

body
div Header goes here
button(onclick= user ? "logout()" : "login()")= user ? "Logout" : "Login"
block content

当然，这假设您的路由在渲染函数中传递一个名为"user"的变量。