昨天有朋友注意到我关于玉,简单方法做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
知道为什么我不能这样做吗?任何的想法?任何建议?非常感谢。 我正在阅读,无法解决它!