Microblog的Jade页面代码
发布于 12 年前 作者 chrisbi 10129 次浏览 最后一次编辑是 8 年前

发现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,有兴趣可以去看下。

正解,非常感谢!

嗯嗯,好的,我会试着写下,感谢!

顶一下楼主,也正在学习!楼主可以再把完善一下。

这页面真着真舒服,最好把独立出去

回到顶部