Shulou(Shulou.com)06/01 Report--

Please follow my small site: http://oideas.herokuapp.com/

1. Preparatory work before layout

In the last chapter, we have set up the environment, so let's start the development of our OMinds.

Before we begin, let's decorate something, open cmd, change to the project directory, and enter the command:

Npm install-g supervisor

The effect is as follows (only partially truncated while waiting for installation):

Note: every time we update the code, we need to manually stop and restart the application. Using the supervisor module can solve this problem. Every time we save the modified file, supervisor will automatically restart the application for us. So install supervisor here so that we can easily see our own layout effect.

Wherever you think it is appropriate, create a text document and write as follows:

@ echo offcd E:\ nworks\ OMindssupervisor app.js

Where cd E:\ nworks\ OMinds is your project directory. After saving, rename it to server.bat, and start server later, just click server.bat.

Note: if your project is on the e disk and the bat is on the desktop, you need to add a line of code after the above code @ echo off:

E:

Means to switch to e disk.

OK, the preparations are done. Let's run server and have a look:

two。 Start layout (this site only uses chrome browser to do the effect, if your own website layout has been done, you can skip this chapter)

First, implement the navigation bar, create two directories p_w_picpaths and js under the public folder, and add the existing stylesheets directory to a total of 3 directories. Open style.css, clear the contents, and add the following css:

Body {margin: 0 auto; padding: 0; background: url (.. / p_w_picpaths/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 # FFF; box-shadow: 0 1px rgba (255BABABA # BABABA # FFF; box-shadow) inset;-webkit-box-shadow: 0 1px rgba (255BABABA # 555) inset; background: # F7F7F7 / * Old browsers * / background:-moz-linear-gradient (top, # F7F7F7 0% coach EDEDED 100%); / * FF3.6+ * / background:-webkit-gradient (linear, left top, left bottom, color-stop (0% color-stop F7F7F7), color-stop (100% charge EDED); / * Chrome,Safari4+ * / background:-webkit-linear-gradient (top, # F7F7F7 0% discipline EDED 100%) / * Chrome10+,Safari5.1+ * / background:-o-linear-gradient (top, # F7F7F7 0% recorded EDEDED 100%); / * Opera 11.10 + * / background:-ms-linear-gradient (top, # F7F7F7 0% preceded EDEDED 100%); / * IE10+ * / background: linear-gradient (top, # F7F7F7 0% recorded EDED 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 4D4D4D 0. 2) inset;-webkit-box-shadow: 0 1px rgba (255 4D4D4D 0. 2) inset; border-color: # 262626! important; background: # 4D4D4D; / * Old browsers * / background:-moz-linear-gradient (top, # 4D4D4D 0%, # 100%) / * FF3.6+ * / background:-webkit-gradient (linear, left top, left bottom, color-stop (0% linear 4D4D4D), color-stop (100% top 262626)); / * Chrome,Safari4+ * / background:-webkit-linear-gradient (top, # 4D4D4D 0% minus 262626%); / * Chrome10+,Safari5.1+ * / background:-o-linear-gradient (top, # 4D4D4D 0% precinct 2626%) / * Opera 11.10 + * / background:-ms-linear-gradient (top, # 4D4D4D 0%); / * IE10+ * / background: linear-gradient (top, # 4D4D4D 0%) 262626%); / * 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 00 100px;} # navigation li:last-child {border-radius: 0 100px 100px 0;}

Add our background image to the p_w_picpaths folder:

Open the inde.ejs file under views. Before that, let's adjust the encoding of the project. Under eclipse, right-> properties- > resource,text file encoding and select utf-8. Currently, gbk,index.ejs content is not supported as follows (encoding format is set):

The latest essence contributes about blog search, login and registration

Open the browser to see the effect of navigation:

You can see that there is a blank between search and login, which can be adjusted according to your own needs. My idea is to pull out the search box to the right when you click search, but take your time.

Second, implement the content layout, open style.css again, and add the following css code:

.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 (.. / p_w_picpaths/bgnoise_lg.png) Border-radius: 9px; border-color: # BABABA # FFF; box-shadow: 00 1px rgba (0,0,0,0.2) inset, 2000 1px rgba (0,0,0,0.2) inset; font-size:6px;}. Cell_author {font-size: 14px; vertical-align: middle; line-height: 100%; margin: 00 17px }. Cell_author img {border-radius: 20px; box-shadow: 00 6px hsla (0,27%, 42%, .5); width: 40px; height: 40px; max-width: 100%; vertical-align: middle; margin: 0 10px 00; border: 0;} .cell_author img:hover {box-shadow: 00 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 00; 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 (.. / p_w_picpaths/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;}

Open index.ejs and add code after that:

OMinds your thoughts OMinds, you don't have to log in, don't care whether you will be laughed at or not, because everyone here is the same and no one will laugh at you. Praise [10] step on [10] comment [10] BShare.addEntry ({title: "OMinds sharing" Summary:' shares your thoughts.' , vTag:'OMinds'})

Where p_w_picpaths/tem.jpg is:

OK, refresh the browser and see how it works:

Basically, the prototype of the small station has been completed. Do some pruning below, create new header.ejs and footer.ejs files in the views directory, copy all the above codes in index.ejs to header.ejs, and add the code at the top of index.ejs:

Extract the last and later code from index.ejs into footer.ejs and add code to indes.ejs:

Then, in the end, the index.ejs should be:

OMinds your thoughts OMinds, you don't have to log in, don't care whether you will be laughed at or not, because everyone here is the same and no one will laugh at you. Praise [10] step on [10] comment [10] BShare.addEntry ({title: "OMinds sharing" Summary:' shares your thoughts.' , vTag:'OMinds'})

There is no problem with the front page above. If there is a display, you need to have a data source. The source is through the contribution page, so let's lay out the contribution page and first put the code in header.ejs:

Contribution

Modified to:

Contribution

It means that we visit the contribution page through the upminds address, copy the index.ejs file directly and name it upminds.ejs, and delete the code other than header and footer. Open style.css again to add css:

.upstream _ content {position: relative; width: 690px; margin: 0 auto; padding: 0 10px 010px;} .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 h4 {font-size: 16px; padding: 00 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 000;}. 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;}

The code in upminds.ejs:

To contribute, you should share your Minds (thoughts) of yourself or your friends. It is not grandiose, meaningful, political, × ×, advertising, defamation, discrimination and so on. The shared Minds will be released after the review. Please indicate the source of the reprint. This site will not be responsible for any legal disputes caused by Minds. It is not allowed to steal the Minds of other members in the site. Delivery

Open the routes/index.js file, and the final content is:

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'});});}

Open the browser, click the contribution navigation, the effect:

All right, the basic layout of this site and OK, some students may say, navigation there are still a lot of things have not been realized, it does not matter, the current has been able to basically meet the needs, others can contribute, can show that other people's contributions will not be ok, others take your time.

The next chapter will link db to display the content dynamically, otherwise, how boring it is to be static all the time.

Note: some students may think, ah, why do you do this tutorial, directly give us the source code soon ok, what is still in this ink what ah, I wrote the code is very messy, is the previous ideas project code, now do is Ominds, completely start from scratch, step by step, but, do not worry, I will certainly finish, there is not much stuff, a chapter every day, basically a week and a half finished.

Please pay attention to my small station http://oideas.herokuapp.com/, it is best to register, of course, due to the use of a foreign machine, very stuck, can not ask for anything.

The source code has been uploaded to git. Click here to download

Ideas-ominds communication group: 158325682, if you want to do it together, or if you have anything you don't understand, you can contact me.

Csdn full blog address: http://blog.csdn.net/joveth/article/category/1862915

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.