Microblog的Jade页面代码
发现Nodejs这个比较新鲜的东西,一时鸡血,找这个教程学了下。比较蛋疼的是Express3默认支持Jade模板。好吧,学了写下,其实还挺不错的一种写法,跟少按了很多Shift,各种缩进,跟写Python 似的。把教程里的代码都转过来了。实际运行有个问题未能解决,到了/u/username 的时候,CSS加载不进来,求高手解决,其他页面运行正常。
index.jade
extends layout
block content
- if(!user){
div.hero-unit
h1 欢迎来到 Microblog
p Microblog 是一个基于 Node.js 的微博系统。
p
a.btn.btn-primary.btn-large(href='/login') 登录
a.btn.btn-large(href='/reg') 立即注册
- } else{
include say
- }
include posts
posts.jade
- posts.forEach(function(post,index){
- if(index%3==0){
div.row
- }
div.span4
h2
a(href='/u/'+ post.user)= post.user
|说
p
small= post.time
p= post.post
- })
- if(posts.length % 3 != 0)
div.row
login.jade
extends layout
block content
form.form-horizontal(method='post')
fieldset
legend 用户登入
div.control-group
label.control-label(for='username') 用户名
div.controls
input.input-xlarge(type='text',id='username',name='username')
div.control-group
label.control-label(for='password') 口令
div.controls
input.input-xlarge(type='password',id='password',name='password')
div.form-actions
button.btn.btn-primary(type='submit') 登入
layout.jade
!!! transitional
html(xmlns='http://www.w3.org/1999/xhtml')
script(src='javascript/jquery.js')
script(src='javascript/bootstrap.js')
head
meta(http-equiv='Content-Type', content='text/html; charset=utf-8')
title= title
link(rel='stylesheet',type='text/css', href='stylesheets/bootstrap.css')
style
body{padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px;}
link(rel='stylesheet',type='text/css', href='stylesheets/bootstrap-responsive.css')
body
div.navbar.nvarbar-fixed-top
div.navbar-inner
div.container
a.btn.btn-navbar(data-toggle='collapse',data-target='.nav-collapse')
span.icon-bar
span.icon-bar
span.icon-bar
a.brand(href='/') Microblog
div.nav-collapse
ul.nav
li(class='active')
a(href='/') 首页
- if(!user){
ul.nav
li
a(href='login') 登入
li
a(href='/reg') 注册
- } else{
ul.nav
li
a(href='/logout') 登出
- }
div#container.container
- if(success){
div.alert.alert-success
= success
- }
- if(error){
div.alert.alert-error
= error
- }
block content
hr
footer
p
a(href='http://www.byvoid.com') BYVoid
|2012
reg.jade
extends layout
block content
form.form-horizontal(method='post')
fieldset
legend 用户注册
div.control-group
label.control-label(for='username') 用户名
div.controls
input.input-xlarge(type='text',id='username',name='username')
p.help-block 你的帐户名称,用于登录和显示。
div.control-group
label.control-label(for='password') 口令
div.controls
input.input-xlarge(type='password',id='password',name='password')
div.control-group
label.control-label(for='password-repeat') 重复输入口令
div.controls
input.input-xlarge(type='password',id='password-repeat',name='password-repeat')
div.form-actions
button.btn.btn-primary(type='submit') 注册
say.jade
form.well.form-inline.center(method='post',action='/post',style='test-align:center;')
input.span8(name='post',type='text')
button.btn.btn-success(type='submit')
i.icon-comment.icon-white 发言
user.jade
extends layout
block content
- if(user){
include say
- }
include posts
5 回复
木有人啊,附上作者BYVoid 的Microblog的源代码https://github.com/BYVoid/microblog,有兴趣可以去看下。
正解,非常感谢!
嗯嗯,好的,我会试着写下,感谢!
顶一下楼主,也正在学习!楼主可以再把完善一下。
这页面真着真舒服,最好把独立出去