Microblog的Jade页面代码
发布于 2年前 作者 chrisbi 3720 次浏览

发现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
8 回复

木有人啊,附上作者BYVoid 的Microblog的源代码https://github.com/BYVoid/microblog,有兴趣可以去看下。

css载入不进来是因为你的css是相对路径,在url前面加个/就好了 例:

link(rel='stylesheet',type='text/css', href='stylesheets/bootstrap.css')

改为

link(rel='stylesheet',type='text/css', href='/stylesheets/bootstrap.css')

正解,非常感谢!

js的url你也应该一起改掉。 如果你顺道讲一些学习Jade模板语法的和block的话,这篇文章会更有价值。

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

@chrisbi 客气了~共同学习嘛!

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

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

回到顶部