keystonejs實戰之頁頭頁腳

前兩篇介紹了入門相關知識及對keystonejs總體可用性評估，這篇介紹下開始實際運用中的頁頭頁腳部分，由於立刻項目忙了，這個先匆匆的做個收尾。

無論是用WordPress仍是其餘CMS系統，應用最寬泛的也是最基礎的就是企業宣傳類網站，咱們就講下keystonejs實現的頭尾改造，效果以下圖：
PC頁頭

PC頁腳

移動頁頭

移動頁腳

具體改造也很簡單，首先找到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: '首頁', key: 'home', href: '/' },
        { label: '新聞動態', key: 'blog', href: '/blog' },
        { label: '做品展現', key: 'gallery', href: '/gallery' },
        { label: '聯繫咱們', key: 'contact', href: '/contact' },
    ];
    res.locals.user = req.user;
    next();
};

而後找到H:workspacekeystonejs-projecttemplateslayoutsdefault.pug文件，複製一份，更名如main.pug，接下來就是具體的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 切換導航
                                    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 聯繫電話：400-8888-888
                        p 北京市朝陽區朝陽門大街88號
                    .d3
                        img(src='../images/ma2.jpg')
                p.bei ©2014-2017 正月初五   版權全部 | 京ICP備88888888號-1

• 最後，把具體views中頁面引用的default模板改爲main，如：

extends ../layouts/main

好了，重啓下應用看看效果吧。
備註：
pug模板引擎中文文檔pug文檔。