【基于node.js+express的web开发备忘】--技术分享（TShare）站点-布局（layout）

最新推荐文章于 2024-04-28 10:50:56 发布

MCpang

最新推荐文章于 2024-04-28 10:50:56 发布

阅读量2.4k

点赞数

分类专栏： Nodejs 文章标签： nodejs博客案例 express web开发

本文链接：https://blog.csdn.net/MCpang/article/details/34927911

版权

Nodejs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

express 4.2.0 默认不适用layout的模版布局，视图模版ejs+bootstrap(模版样式)可以使用include引入页面模版：

<%include xxx/xxx/模版文件名 %>，其中ejs的文件后缀可带可不带。

另外，express 4.2.0已经去除文件存放位置的限制，可以放到工程的任何自定义的路径下，采用"."向上一级目录引用。

其中views/index.ejs为主视图文件，主要内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title><%= title %> - TShare</title>
		<link rel='stylesheet' href='/myall/css/style.css' />
		<script type="text/javascript" src="/jquery/jquery-1.7.2.min.js"></script> 
		<!- 外部组件引用--bootstrap 页面样式 ->
		<link rel='stylesheet' href='/bootstrap/css/bootstrap.css' />
		<link rel="stylesheet" href="/bootstrap/css/bootstrap-responsive.css" >
		<script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script>
		<!- 外部组件引用--markitup 文本编辑器 ->
		<link rel="stylesheet" type="text/css" href="/MarkitUp/markitup/skins/markitup/style.css">
		<link rel="stylesheet" type="text/css" href="/MarkitUp/markitup/sets/default/style.css">
		<script type="text/javascript" src="/MarkitUp/markitup/jquery.markitup.js"></script>
		<script type="text/javascript" src="/MarkitUp/markitup/sets/default/set.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#qcontent').markItUp(mySettings);
			});
		</script>
	</head>
	<body>
		<% include common/header %>
		<% include common/content %>
		<% include common/footer %>
	</body>
</html>

views/common/header.ejs，内容如下：

<script type="text/javascript">
	function search() {
		$('#searchInput').val('');
	}
</script>

<div class="navbar navbar-fixed-top">
	<div class="navbar-inner">
		<div class="container">
			<a class="brand" href="/"><img src="/myall/img/logo.png" class="img-rounded"></a>
			<div class="navbar-search pull-left">
				<input type="text" class="search-query" placeholder="Search" id="searchInput" value="输入关键词可以自动搜索话题..." οnclick="search();" οnblur="this.value='输入关键词可以自动搜索话题...'">
			</div>
			<div class="nav-collapse">
				<ul class="nav"> 
					<% if(toUrl == '/') {%>
						<li class="active"><a href="/">首页</a></li>
					<% } else {%>
						<li><a href="/">首页</a></li>
					<% }%>
					<% if(user) { %>
						<% if(toUrl == '/question') {%>
							<li class="active"><a href="/question">提问</a></li>
						<% } else {%>
							<li><a href="/question">提问</a></li>
						<% }%>
						<% if(toUrl == '/resource') {%>
							<li class="active"><a href="/resource">资源</a></li>
						<% } else {%>
							<li><a href="/resource">资源</a></li>
						<% }%>
						<% if(toUrl == '/sky') {%>
							<li class="active"><a href="javascript:void(0);">空间</a></li>
						<% } else {%>
							<li><a href="javascript:void(0);">空间</a></li>
						<% }%>
						<% if(toUrl == '/message') {%>
							<li class="active"><a href="javascript:void(0);">信件</a></li>
						<% } else {%>
							<li ><a href="javascript:void(0);">信件</a></li>
						<% }%>
						<% if(toUrl == '/chatGroup') {%>
							<li class="active"><a href="javascript:void(0);">聊天室</a></li>
						<% } else {%>
							<li ><a href="javascript:void(0);">聊天室</a></li>
						<% }%>
						<li><a href="/logout">退出</a></li>
						
					<% } else { %>
						<% if(toUrl == '/login') {%>
							<li class="active"><a href="/login">登录</a></li>
						<% } else {%>
							<li><a href="/login">登录</a></li>
						<% }%>
						<% if(toUrl == '/reg') {%>
							<li class="active"><a href="/reg">注册</a></li>
						<% } else {%>
							<li><a href="/reg">注册</a></li>
						<% }%>
						
					<% } %>
				</ul> 
			</div> 
			<div class="navbar-search pull-right" style="margin-top:10px;">
				<span id="sysTime" style="font-size:12px;font-weight:bold;color:red;margin-right:10px;"></span>
				<% if(user) { %>
					<span style="font-size:12px;font-weight:bold;color:red;">
						<% if(user.userName) { %>
							<img src="<%= user.headUrl %>" class="img-rounded" style="width:20px;height:20px;">
							<a href="/user/<%=user.userName%>"><%= user.nickName %></a>
						<% } %>
					</span>
				<% } %>
			</div>
			<script type="text/javascript">
				function showTime() {
					var sysDate = new Date();
					var year = sysDate.getFullYear();
					var month = sysDate.getMonth() + 1;
					var day = sysDate.getDate();
					var hour = sysDate.getHours();
					var minute = sysDate.getMinutes();
					var sec = sysDate.getSeconds();
					
					month = month > 9 ? month : "0"+month;
					day = day > 9 ? day : "0"+day;
					hour = hour > 9 ? hour : "0"+hour;
					minute = minute > 9 ? minute : "0"+minute;
					sec = sec > 9 ? sec : "0"+sec;
					
					document.getElementById("sysTime").innerHTML = year+"年"+month+"月"+day+"日 "+hour+"时"+minute+"分"+sec+"秒";
					
					setTimeout("showTime()", 1000);
				}
				showTime();
			</script>
		</div> 
	</div> 
</div>

views/common/content.ejs，内容如下：

<% if(toUrl == '/') { %>
	<% include ../content/home %>
<% } else if(toUrl == '/reg') { %>
	<% include ../content/reg %>
<% } else if(toUrl == '/login') { %>
	<% include ../content/login %>
<% } else if(toUrl == '/question') { %>
	<% include ../content/publish_question %>
<% } else if(toUrl == '/resource') { %>
	<% include ../content/resource %>
<% } %>

/views/common/footer.ejs，内容如下：

<div class="footer">
	<p>Designed and built with all the love in the world by <a href="javascript:void(0);" οnclick="window.open('http://my.csdn.net/MCpang');">@MCpang</a></p>
	<p>On the basis of node.js & express 4.2.0 - 2014</p>
</div>

以上仅作为备忘与分享，若有错误，请大家指正或讨论！