我无法将.jade转换/编译为.html

时间:2015-12-07 08:38:32

标签: javascript html node.js pug

昨天有朋友注意到我关于玉,简单方法做html模板和优化HTML代码所以我决定测试它。我安装了nodejs和npm但是当我想从" archive" .jade导出/编译到" archive" .html时错误到了。终端当时没有工作。

PS:看看导航文本的语法是否正确,但它不完全是我想要做的因为我想要显示(2个按钮,登录和注册)如果会话不存在且 "嗨'用户名'" 如果存在

命令不起作用1:jade -p ./index-layout.jade -Po ./

命令不起作用2:jade -p ./index-layout.jade -Po ./index.html

Template.jade

doctype html
html
  head
    //Foundation requeriments
    link(rel='stylesheet', href='../public/css/foundation.min.css')

    //Index/Home Page CSS
    link(rel='stylesheet', href='../public/css/home.css')

    //title
    title Inicio ~ LOL Ratings

    //body
    body
        header#header
            //nav height aprox 75px
            include ./navigator.jade
            h1#header-title LOL Ratings
            //Only the 'pro' or champion browser
            main.row
                section.column.large-8
                    h1#header-title LOL Ratings
                    p#slogan ¿Ya sabes que buscar?¡Encuéntralo!
                    form#searcher-wrapper.row
                        input.colums.large-10(type="text" placegolder="Busca tu 'PRO' o campeón por nombre" name="search")
                        button.colums.large-2(type="submit") GO
            section#analytics
                h1#analytics-title Predicción LCS
                //.align-center make be able center the columns (FOUNDATION FLEXBOX)

                //TODO ESTO SE TENDRIA QUE REPETIR CON UN FOREACH
                #analytics-wrapper.row.align-center
                    //logo team 1
                    figure.colums.large-2.team-logo#team1
                    //match information
                    .info
                        //align-justify makes the columns float left & right
                        .row.align-justify.team-names
                            //text-left-align makes the text align to the left way
                            .column.large-4.text-left-align
                                h3.blue-color Team 1
                            //text-right-align makes the text align to the right way
                            .column.large-4.text-right-align
                                h3.red-color Team 2
                        //Information and percentages
                        .row.align-justify.percentages
                            //text-left-align makes the text align to the left way
                            .column.large-6.text-left-align
                                h3 percentage1
                            //text-right-align makes the text align to the right way
                            .column.large-6.text-right-align
                                h3 percentage2
                        //color-percentage will be the "div" color, green or red depends the result
                        .progress#team2-color-percentage(role="progressbar" tabindex="0" aria-valuenow="50" aria-valuemin="0" aria-valuetext="50 percent" aria-valuemax="100")
                            .progress-meter#team1-color-percentage(style="width: 50%")
                        //logo equipo 2
                        figure.colums.large-2.team-logo#team1
                //TODO ESTO SE TENDRIA QUE REPETIR CON UN FOREACH

navigator.jade

//top navigator
nav#navigator
    //navigator floating right:0, top:0
    ul
        li.nav.element
            a(href="pros.html") pros
        li.nav.element
            a(href="champions.html") champions
        li.nav.element
            a(href="teams.html") teams
        li.nav.element
            a(href="live-feed.html") live feed
    //VARIABLE
    //OPTION1: SESSION OFF ----> both buttons
    button#login.btn ¡Iniciar Sesión!
    button#signup.btn ¡Registrate!
    //OPTION2: SESSION ON ----> Hola 'username'
    p#loged-message Hola #[span#username.bold ]
    //VARIABLE  

enter image description here

enter image description here

知道为什么我不能这样做吗?任何的想法?任何建议?非常感谢。 我正在阅读,无法解决它!

0 个答案:

没有答案