标签: roots-toolkit

将玉变量从内容传递到页面标题？

我正在尝试使用Jade将内容块中的变量包含到更大的页面布局中.我想为页面<title>标记添加语义内容标题.

我正在使用优秀的roots.cx工具包在Jade和Stylus中构建一个网站.

我有2个文件:pagelayout.jade和page142.jade.

该pagelayout文件包含一个基本的Jade页面模板(为简单起见而编辑):

!!!
html
   head
       title #{page.title} | My Great Site
body
   != content

Run Code Online (Sandbox Code Playgroud)

该page142文件包含一些将包含在以下内容中的唯一内容!= content:

- var page = { title: 'Page 142' }
h1 Content header of page 142

Run Code Online (Sandbox Code Playgroud)

我希望最终的HTML看起来像什么:

<html><head><title>Page 142 | My Great Site</title></head>
<body><h1>Content header of page 142</h1></body></html>

Run Code Online (Sandbox Code Playgroud)

目前,我得到一个编译器TypeError:

Cannot read property 'title' of undefined

Run Code Online (Sandbox Code Playgroud)

我假设我得到了这个错误,因为Jade变量的范围可能仅适用于从模板到内容,反之亦然.

如何将页面变量从内容传递到页面布局？我发现的所有StackOverflow 帖子只显示从页面布局到内容的变量.

roots-toolkit pug

hao*_*ike

2017 05-23

6
推荐指数

1
解决办法

4890
查看次数

光滑的旋转木马滑动显示在彼此的顶部

我正在尝试使用slick-carousel作为100vh我单页网站上某个部分的滑块.

我正在使用jade,browserify,sass等.这是输出:

我将html/css简化为背景颜色,但实际内容却相同.

正如您所看到的那样,幻灯片显示在彼此之上,并且它们也被克隆.当您使用centerMode和无限设置时,我看到光滑的克隆会滑动.

这是我的代码:

玉:

  section.services
    .slick
      .red
      .green
      .blue

Run Code Online (Sandbox Code Playgroud)

SCSS:

section.services {
    @extend .padding0;
    @include bgcolor(#fff);

    .slick, .slick * {
        outline: none;
    }
}

.red {
    height: 100px;
    background: red;
}

.blue {
    height: 100px;
    background: blue;
}

.green{
    height: 100px;
    background: green;
}

Run Code Online (Sandbox Code Playgroud)

JS:

window.jQuery = window.$ = require('jquery');
slick = require('slick-carousel');

//DOM Ready
$(function(){  
    $('.slick').slick({
        slidesToShow: 1,
        speed: 300,
        autoplay: true,
        dots: true
    });
});

Run Code Online (Sandbox Code Playgroud)

我迷失在这里,希望你们中的一个可以提供帮助.

html css jquery roots-toolkit slick.js

Fer*_*las

lucky-day

1
推荐指数

1
解决办法

2403
查看次数