成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

keystonejs實(shí)戰(zhàn)之頁(yè)頭頁(yè)腳

mo0n1andin / 2739人閱讀

摘要：前兩篇介紹了入門相關(guān)知識(shí)及對(duì)整體可用性評(píng)估，這篇介紹下開(kāi)始實(shí)際運(yùn)用中的頁(yè)頭頁(yè)腳部分，因?yàn)轳R上項(xiàng)目忙了，這個(gè)先匆匆的作個(gè)收尾。

前兩篇介紹了入門相關(guān)知識(shí)及對(duì)keystonejs整體可用性評(píng)估，這篇介紹下開(kāi)始實(shí)際運(yùn)用中的頁(yè)頭頁(yè)腳部分，因?yàn)轳R上項(xiàng)目忙了，這個(gè)先匆匆的作個(gè)收尾。

不管是用WordPress還是其他CMS系統(tǒng)，應(yīng)用最寬泛的也是最基礎(chǔ)的就是企業(yè)宣傳類網(wǎng)站，我們就講下keystonejs實(shí)現(xiàn)的頭尾改造，效果如下圖：
PC頁(yè)頭

PC頁(yè)腳

移動(dòng)頁(yè)頭

移動(dòng)頁(yè)腳

具體改造也很簡(jiǎn)單，首先找到H:workspacekeystonejs-projectroutesmiddleware.js文件，然后增加navLinksCN代碼如下：

exports.initLocals = function(req, res, next) {
    res.locals.navLinks = [
        { label: "Home", key: "home", href: "/" },
        { label: "Blog", key: "blog", href: "/blog" },
        { label: "Gallery", key: "gallery", href: "/gallery" },
        { label: "Contact", key: "contact", href: "/contact" },
    ];
    res.locals.navLinksCN = [
        { label: "首頁(yè)", key: "home", href: "/" },
        { label: "新聞動(dòng)態(tài)", key: "blog", href: "/blog" },
        { label: "作品展示", key: "gallery", href: "/gallery" },
        { label: "聯(lián)系我們", key: "contact", href: "/contact" },
    ];
    res.locals.user = req.user;
    next();
};

然后找到H:workspacekeystonejs-projecttemplateslayoutsdefault.pug文件，復(fù)制一份，改名如main.pug，接下來(lái)就是具體的HTML+CSS部分了。

在site.css下方再引入我們自定義的樣式文件如：link(href="/styles/style.css", rel="stylesheet")；

添加header代碼，如：

        //- HEADER
        div(style="width:100%")

            //- Customise your site"s navigation by changing the navLinks Array in ./routes/middleware.js
            //- ... or completely change this header to suit your design.
            
            .box1#head
                .navBox
                    .mabox
                        .weima
                            img(src="../images/ma.jpg")
                    a.nav-left(href="index")
                        img(src="../images/logo.svg")
                    .nav-right
                        div
                            a.weibo(href="",target="_blank")
                            a.weixin
                            a.gouwuche(href="",target="_blank")
                    .nav-center
                    
                        ul.menu
                            each link in navLinksCN
                                li(class=(section == link.key ? "active" : null)): a(href=link.href)= link.label

                        nav(role="navigation").navbar.navbar-default
                            .container-fluid
                            .navbar-header.text-right
                                button(type="button").navbar-toggle
                                    span.sr-only 切換導(dǎo)航
                                    span.icon-bar
                                    span.icon-bar
                                    span.icon-bar

添加footer部分代碼，如：

        //- FOOTER
        //- .container: #footer

        .box1.foot#foot
            .top
                .box2 返回頂部
            .box2
                .dianshang
                    span xxx電商渠道:
                    p 
                        a(href="http://" target="_blank") 天貓
                        a(href="http://" target="_blank") 京東
                        a(href="http://" target="_blank") 蘇寧
                        a(href="http://" target="_blank") 微信商城
                .cont
                    .d1
                        img(src="../images/ma2.jpg")
                    .d2
                        p 正月初五科技有限公司
                        p 聯(lián)系電話：400-8888-888
                        p 北京市朝陽(yáng)區(qū)朝陽(yáng)門大街88號(hào)
                    .d3
                        img(src="../images/ma2.jpg")
                p.bei ?2014-2017 正月初五   版權(quán)所有 | 京ICP備88888888號(hào)-1

最后，把具體views中頁(yè)面引用的default模板改成main，如：

extends ../layouts/main

好了，重啟下應(yīng)用看看效果吧。
備注：
pug模板引擎中文文檔pug文檔。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52022.html

相關(guān)文章

  • keystonejs實(shí)戰(zhàn)之頁(yè)頭頁(yè)腳

    摘要：前兩篇介紹了入門相關(guān)知識(shí)及對(duì)整體可用性評(píng)估，這篇介紹下開(kāi)始實(shí)際運(yùn)用中的頁(yè)頭頁(yè)腳部分，因?yàn)轳R上項(xiàng)目忙了，這個(gè)先匆匆的作個(gè)收尾。 前兩篇介紹了入門相關(guān)知識(shí)及對(duì)keystonejs整體可用性評(píng)估，這篇介紹下開(kāi)始實(shí)際運(yùn)用中的頁(yè)頭頁(yè)腳部分，因?yàn)轳R上項(xiàng)目忙了，這個(gè)先匆匆的作個(gè)收尾。 不管是用WordPress還是其他CMS系統(tǒng)，應(yīng)用最寬泛的也是最基礎(chǔ)的就是企業(yè)宣傳類網(wǎng)站，我們就講下keystone...

    wendux 評(píng)論0 收藏0

  • keystonejs實(shí)戰(zhàn)之頁(yè)頭頁(yè)腳

    摘要：前兩篇介紹了入門相關(guān)知識(shí)及對(duì)整體可用性評(píng)估，這篇介紹下開(kāi)始實(shí)際運(yùn)用中的頁(yè)頭頁(yè)腳部分，因?yàn)轳R上項(xiàng)目忙了，這個(gè)先匆匆的作個(gè)收尾。 前兩篇介紹了入門相關(guān)知識(shí)及對(duì)keystonejs整體可用性評(píng)估，這篇介紹下開(kāi)始實(shí)際運(yùn)用中的頁(yè)頭頁(yè)腳部分，因?yàn)轳R上項(xiàng)目忙了，這個(gè)先匆匆的作個(gè)收尾。 不管是用WordPress還是其他CMS系統(tǒng)，應(yīng)用最寬泛的也是最基礎(chǔ)的就是企業(yè)宣傳類網(wǎng)站，我們就講下keystone...

    Jensen 評(píng)論0 收藏0

  • 微信域名被封的原因及解決辦法

    摘要：微信官方在對(duì)微信中推廣活動(dòng)的第三方網(wǎng)頁(yè)內(nèi)容管控越來(lái)越嚴(yán)格，如果活動(dòng)效果稍微好一些，自己的網(wǎng)址域名可能就會(huì)被封殺，用戶打不開(kāi)，造成頁(yè)面流量的損失和客戶的流失。 最近常常聽(tīng)到搞微商，微信推廣的在叫苦，由于微信域名屏蔽，哀鴻遍野。微信官方在對(duì)微信中推廣活動(dòng)的第三方網(wǎng)頁(yè)內(nèi)容管控越來(lái)越嚴(yán)格，如果活動(dòng)效果稍微好一些，自己的網(wǎng)址域名可能就會(huì)被封殺，用戶打不開(kāi)，造成頁(yè)面流量的損失和客戶的流失。搞這個(gè)沒(méi)...

    monw3c 評(píng)論0 收藏0

  • 二列布局

    摘要：寬度自適應(yīng)兩列布局兩列布局可以使用浮動(dòng)來(lái)完成，左列設(shè)置左浮動(dòng)，右列設(shè)置右浮動(dòng)，這樣就省的再設(shè)置外邊距了。橫向兩列布局頁(yè)頭導(dǎo)航左上右上左下右上右下頁(yè)腳 1、寬度自適應(yīng)兩列布局　　兩列布局可以使用浮動(dòng)來(lái)完成，左列設(shè)置左浮動(dòng)，右列設(shè)置右浮動(dòng)，這樣就省的再設(shè)置外邊距了。 　　當(dāng)元素使用了浮動(dòng)之后，會(huì)對(duì)周圍的元素造成影響，那么就需要清除浮動(dòng)，通常使用兩種方法?？梢越o受到影響的元素設(shè)置 clear...

    MobService 評(píng)論0 收藏0

  • 二列布局

    摘要：寬度自適應(yīng)兩列布局兩列布局可以使用浮動(dòng)來(lái)完成，左列設(shè)置左浮動(dòng)，右列設(shè)置右浮動(dòng)，這樣就省的再設(shè)置外邊距了。橫向兩列布局頁(yè)頭導(dǎo)航左上右上左下右上右下頁(yè)腳 1、寬度自適應(yīng)兩列布局　　兩列布局可以使用浮動(dòng)來(lái)完成，左列設(shè)置左浮動(dòng)，右列設(shè)置右浮動(dòng)，這樣就省的再設(shè)置外邊距了。 　　當(dāng)元素使用了浮動(dòng)之后，會(huì)對(duì)周圍的元素造成影響，那么就需要清除浮動(dòng)，通常使用兩種方法?？梢越o受到影響的元素設(shè)置 clear...

    stormgens 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<