請關注我的小站：http://oideas.herokuapp.com/

1.佈局之前的準備工作

上一章我們已經搭建好了環境，本站就開始我們的OMinds的開發吧。

在開始之前，先讓我們來裝點東西，打開cmd，切換到project目錄，輸入命令：

npm install -g supervisor

效果如下圖（由於正在等待安裝只截了一部分）：

注意：每次我們更新代碼後，都需要手動停止並重啓應用，使用 supervisor 模塊可以解決這個問題，每當我們保存修改的文件時，supervisor 都會自動幫我們重啓應用。所以這裏安裝supervisor ，以便於我們能方便看到自己的佈局效果。

在任何你覺得合適的地方，建立一個文本文檔，寫入內容如下：

@echo off
cd E:\nworks\OMinds
supervisor app.js

其中cd E:\nworks\OMinds 是你的項目目錄，保存之後，重命名爲server.bat，以後啓動server只需點擊server.bat即可。

注意：假如你的project在e盤，而bat在桌面上，那麼需要在以上代碼@echo off後面添加一行代碼：

e:

表示切換到e盤。

OK，準備工作已經做好，讓我們跑一下server看看吧：

2.開始佈局（本站只使用chrome瀏覽器做效果，如果你自己的網站佈局已做好，可以跳過這一章）

首先實現導航欄，在public文件夾下建立images、js兩個目錄，加上已經存在的stylesheets目錄，共3各目錄，打開style.css，清空裏面的內容，加入以下css：

body{
	margin: 0 auto;
	padding: 0;
	background: url(../images/bgnoise_lg.png) repeat left top;
	font: bold 12px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
ul {
	list-style: none;	
}
#navigation {
	margin: 20px auto;	
	text-transform: uppercase;
	color: #444;
}

#navigation:after {
	clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

#navigation ul {	
	 margin: 0 auto;
	 padding:0;
}

#navigation li {
	float: left;
	border-style: solid; 
	border-width: 1px;
    border-color: #BABABA #BABABA #BABABA #FFF;
	box-shadow: 0 1px rgba(255,255,255,1) inset;
	-webkit-box-shadow: 0 1px rgba(255,255,255,1) inset;
	background: #F7F7F7; /* Old browsers */
	background: -moz-linear-gradient(top, #F7F7F7 0%, #EDEDED 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F7F7F7), color-stop(100%,#EDEDED)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); /* IE10+ */
	background: linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#EDEDED',GradientType=0 ); /* IE6-9 */	
}

#navigation li:hover, #navigation li.current {
	box-shadow: 0 1px rgba(255,255,255,0.2) inset;
	-webkit-box-shadow: 0 1px rgba(255,255,255,0.2) inset;
	border-color: #262626 !important;
	background: #4D4D4D; /* Old browsers */
	background: -moz-linear-gradient(top, #4D4D4D 0%, #262626 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4D4D4D), color-stop(100%,#262626)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #4D4D4D 0%,#262626 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #4D4D4D 0%,#262626 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #4D4D4D 0%,#262626 100%); /* IE10+ */
	background: linear-gradient(top, #4D4D4D 0%,#262626 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4D4D4D', endColorstr='#262626',GradientType=0 ); /* IE6-9 */
}

#navigation a {
	display: block;
	padding: 10px 15px;
	color: #444;
	text-decoration: none;
	text-shadow: 0 1px #FFF;
}

#navigation a:hover, #navigation li.current a {
	color: #FFF;
	text-shadow: 0 1px #000;
}

#navigation li:first-child {
	border-left-color: #BABABA;
	border-radius: 100px 0 0 100px;
}

#navigation li:last-child {
	border-radius: 0 100px 100px 0;
}

在images文件夾裏把我們的背景圖片添加進去：

打開views下的inde.ejs文件，在此之前，先讓我們調整一下項目的編碼，在eclipse下，右鍵->properties->resource，text file encoding 選擇utf-8，由於目前不支持gbk，index.ejs內容如下（<meta charset="utf-8">是設置編碼格式的）：

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
    <title><%= title %></title>
    <!-- begin CSS -->
    <link href="/stylesheets/style.css" type="text/css" rel="stylesheet">
	<!-- end CSS -->
  </head>
  <body>
    <div id="container" style="width: 700px; margin: 0 auto;">
	<nav id="navigation">
		<ul style="float:left;">
			<li><a href="#" title="8小時內最新">最新</a></li>
			<li><a href="#" title="24小時內評論最多">精華</a></li>
			<li><a href="#" title="無需登錄快速投稿">投稿</a></li>
			<li><a href="#">關於</a></li>
			<li><a href="#">博客</a></li>
			<li><a href="#">搜索</a></li>
		</ul>
		<ul style="margin-left:50px;float:right;">
			<li><a href="#">登陸</a></li>
			<li><a href="#">註冊</a></li>
		</ul>
	</nav>
</div>
  </body>
</html>

打開瀏覽求看一下導航的效果：

可以看到搜索與登錄之間有一塊留白，這個可以根據自己需要進行調整，我的想法是當點擊搜索時向右拉出搜索框，不過暫時不着急。

其次，實現內容佈局，再次打開style.css，添加以下css代碼：

.content {
	max-width: 690px;
	margin: 20px auto;
}
.cell {
	margin: 0 auto;
	background-color: #fff;
	clear: both;
	padding: 18px 20px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	margin-bottom: 20px;
	border-radius: 4px;
}
.cell_loc{
	float:right;
	padding:2px 6px;
	background:url(../images/bgnoise_lg.png);
	border-radius: 9px;
	border-color: #BABABA #BABABA #BABABA #FFF;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset,
				0 0 0 1px rgba(0, 0, 0, 0.2) inset;
	font-size:6px;
}
.cell_author {
	font-size: 14px;
	vertical-align: middle;
	line-height: 100%;
	margin: 0 0 17px;
}


.cell_author img {
	border-radius: 20px;
	box-shadow: 0 0 6px hsla(0, 27%, 42%, .5);
	width: 40px;
	height: 40px;
	max-width: 100%;
	vertical-align: middle;
	margin: 0 10px 0 0;
	border: 0;
}
.cell_author img:hover{
	box-shadow: 0 0 8px hsla(350, 89%, 48%, 0.69);
}
.cell_author a {
	color: #9b8878;
}


.cell_author a:hover {
	color: #300;
}


.cell_text {
	word-break: break-all;
	line-height: 160%;
}


.cell_bar {
	margin: 15px 0 0 0;
	height: 30px;
	font-size: 12px;
}


.cell_bar ul li {
	float: left;
}


.cell_bar ul li a {
	display: block;
	height: 28px;
	line-height: 30px;
	margin-right: 10px;
	text-indent: 20px;
	color: #BEBEBE;
	width: 80px;
	font-weight: 500;
}


.cell_bar ul li a:hover {
	color: #9e8c7b;
}


.cell_bar_comm {
	float: right;
	margin: 0;
	padding: 0;
}


.cell_bar_comm li {
	float: left;
}


.cell_share {
	float: right;
}
.share_icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	overflow: hidden;
	background: url(../images/share_logo.png) no-repeat;
}
.share_sn {
	float: right;
	margin-right: 5px;
	background-position: -50px 0px;
}
.share_tc {
	float: right;
	margin-right: 15px;
	background-position: -100px 0px;
}
.share_rr {
	float: right;
	margin-right: 5px;
	background-position: -150px 0px;
}

打開index.ejs，在</nav>之後添加代碼：

<div class="content">
  		<div class="cell">
  			<div class="cell_author" >
  				<img src="/images/tem.jpg" title="OMinds">
  				<a href="/>">OMinds</a>
  				<span class="cell_loc" title="1樓">1#</span>
  			</div>
  			<div class="cell_text" title='' >
				OMinds，發表你的心事，你可以不用登錄，不用在乎是否會被別人嘲笑，因爲在這裏大家都是一樣的沒有誰會嘲笑你。 				
  			</div>
  			<div class="cell_bar">
  				<ul style="padding:0">
  					<li><a id="putgoods" name="putgoods" href="#" title="10個贊" >贊[10]</a></li>
  					<li><a id="putbads" name="putbads" href="j#" title="10個踩">踩[10]</a></li>
  				</ul>
  				<ul class="cell_bar_comm">
  					<li><a href="#" title="10條評論" >評[10]</a></li>
  					<div class="bshare-custom" style="float:right;height:28px;margin-top: 4px;"><a title="分享到QQ空間" class="bshare-qzone"></a>
  					<a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
  					<a title="分享到人人網" class="bshare-renren"></a>
  					<a title="分享到騰訊微博" class="bshare-qqmb"></a>
  					<a title="分享到網易微博" class="bshare-neteasemb"></a>
  					<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=;pophcol=2&lang=zh"></script>
  					<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
  					<script type="text/javascript" charset="utf-8">
						bShare.addEntry({
					        title:"OMinds分享",
					        summary:'分享你的心事。' ,
							vTag:'OMinds'});
					</script>
  				</ul>
  			</div>
  		</div>
		</div>
  	</div>

其中images/tem.jpg爲：

好，刷新瀏覽器看看效果如何：

好基本上小站原型已成，下面做一下修剪，在views目錄下新建header.ejs、footer.ejs文件，將index.ejs中</nav>以上的代碼全部拷貝到header.ejs中，並在index.ejs的最頂端添加代碼：

<%- include header%>

將index.ejs中最後一個</div>及以後的代碼提取到footer.ejs中，並在indes.ejs中添加代碼:

<%- include footer%>

那麼，最後index.ejs中應該爲：

<%- include header%>
	<div class="content">
  		<div class="cell">
  			<div class="cell_author" >
  				<img src="/images/tem.jpg" title="OMinds">
  				<a href="/>">OMinds</a>
  				<span class="cell_loc" title="1樓">1#</span>
  			</div>
  			<div class="cell_text" title='' >
				OMinds，發表你的心事，你可以不用登錄，不用在乎是否會被別人嘲笑，因爲在這裏大家都是一樣的沒有誰會嘲笑你。 				
  			</div>
  			<div class="cell_bar">
  				<ul style="padding:0">
  					<li><a id="putgoods" name="putgoods" href="#" title="10個贊" >贊[10]</a></li>
  					<li><a id="putbads" name="putbads" href="j#" title="10個踩">踩[10]</a></li>
  				</ul>
  				<ul class="cell_bar_comm">
  					<li><a href="#" title="10條評論" >評[10]</a></li>
  					<div class="bshare-custom" style="float:right;height:28px;margin-top: 4px;"><a title="分享到QQ空間" class="bshare-qzone"></a>
  					<a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
  					<a title="分享到人人網" class="bshare-renren"></a>
  					<a title="分享到騰訊微博" class="bshare-qqmb"></a>
  					<a title="分享到網易微博" class="bshare-neteasemb"></a>
  					<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=;pophcol=2&lang=zh"></script>
  					<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
  					<script type="text/javascript" charset="utf-8">
						bShare.addEntry({
					        title:"OMinds分享",
					        summary:'分享你的心事。' ,
							vTag:'OMinds'});
					</script>
  				</ul>
  			</div>
  		</div>
		</div>
  	</div>
<%- include footer%>

以上的首頁是沒什麼問題了，有了顯示，就需要有數據來源，來源就是通過投稿頁，那麼下面來佈局投稿頁面，先在header.ejs中把代碼：

<li ><a href="#" title="無需登錄快速投稿">投稿</a></li>

修改爲：

<li ><a href="/upminds" title="無需登錄快速投稿">投稿</a></li>

表示我們通過upminds地址訪問投稿頁面，直接拷貝複製index.ejs文件命名爲：upminds.ejs，將header和footer以外的代碼刪除。再次打開style.css添加css：

.upideas_content {
	position: relative;
	width: 690px;
	margin: 0 auto;
	padding: 0 10px 0 10px;
}

.clear_fix {
	display: block;
}

.clear_fix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.up_content {
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	background: #fff;
	padding: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
	display: block;
	border-radius: 4px;
}

.up_bar {
	color: #666;
	width: 200px;
	float: right;
}

.up_bar h3 {
	font-size: 16px;
	padding: 0 0 20px 0;
	margin: 0;
}

.up_bar ol li {
	padding: 15px 0;
	border-top: 1px solid #efefef;
	list-style-position: inside;
	list-style-type: decimal;
	line-height: 140%;
}

.up_content_text {
	width: 422px;
	float: left;
}

.up_idea_text {
	box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
	border: 1px solid #ccc;
	background: #f9f9f9;
	font-size: 14px;
	line-height: 18px;
	padding: 10px;
	resize: none;
	width: 400px;
}
.up_idea_err{
	float: left;
	color:#FF0000;
	padding: 10px 0 0 0;
}
.up_idea_btn {
	border-radius: 2px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	background: #FF8000;
	color: #fff;
	font-size: 14px;
	line-height: 18px;
	padding: 10px 20px 10px 20px;
	border: 0 none;
	float: right;
}

upminds.ejs中的代碼：

<%- include header%>
	<div class="main">
  		<div class="upideas_content clear_fix">
  			<div class="up_content clear_fix">
  				<div class="up_bar">
  				<h3>投稿須知</h3>
  				<ol style="padding:0;">
  					<li>分享自己或朋友的Minds（心事），不浮誇、有意義，不含政治、色情、廣告、誹謗、歧視等內容。</li>
  					<li>分享的Minds（心事），將在審覈之後發佈。</li>
  					<li>轉載請註明出處，任何由Minds引發的法律等糾紛，本站概不負責。</li>
  					<li>不得盜用站內其他會員的Minds。</li>
  				</ol>
  				</div>
  				<div class="up_content_text">
  					<form method="post" action="putup" >
  						<textarea id="idea_text" name="idea_text" class="up_idea_text" rows="23" required placeholder="分享你的Minds（心事）..." ></textarea>
  						<span class="up_idea_err"></span><button type="submit" class="up_idea_btn" id="idea_btn" >投遞</button>
  					</form>
  				</div>
  			</div>
  		</div>
  	</div>
<%- include footer%>

打開routes/index.js文件，內容最終爲：

module.exports = function(app) {
  app.get('/', function (req, res) {
    res.render('index', { title: 'OMinds' });
  });
  app.get('/upminds', function (req, res) {
	    res.render('upminds', { title: 'OMinds' });
  });
};

打開瀏覽器，點擊投稿導航，效果：

好了，本站的基本佈局以及OK了，有些同學可能會說了，導航裏面不是還有很多東西沒實現嗎，不要緊，當前已經能基本滿足需求，別人能投稿，能顯示別人的投稿不就ok了嗎，其他的慢慢來。

下一章將會鏈接db，來動態顯示內容，不然，一直靜態的多沒意思啊。

注：有些同學可能回覺得，呀，你做這個教程幹嘛啊，直接把源碼給我們不久ok了嗎，還在這墨跡個什麼啊，我寫的代碼很亂，是之前ideas項目的代碼，現在做的是Ominds,完全是從頭開始做的，一步一步做的，不過，不用擔心，我一定會做完的，也沒多少東西，每天一章的話，基本上1周半就完事了。

請關注我的小站http://oideas.herokuapp.com/，最好是能註冊一下，當然，由於用的是外機，很卡，不能要求什麼了。

joveth

發佈了49 篇原創文章 · 獲贊 5 · 訪問量 9萬+

私信關注

第2章網站首頁的佈局

請關注我的小站：http://oideas.herokuapp.com/

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

大齡程序員思考

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

WebStorm 創建 Vue 項目

第4章實現用戶登錄和註冊功能

第1章述與環境搭建

android特效集錦系列之十仿新浪微博TabHost菜單

【序一】由nodejs+mongodb開發的ideas小站

第6章實現評論功能

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

第2章 網站首頁的佈局

請關注我的小站：http://oideas.herokuapp.com/

第2章網站首頁的佈局