keystonejs實戰之頁頭頁腳

mo0n1andin 發布于2019-08-01 18:42 / 2731人閱讀

摘要：前兩篇介紹了入門相關知識及對整體可用性評估，這篇介紹下開始實際運用中的頁頭頁腳部分，因為馬上項目忙了，這個先匆匆的作個收尾。

前兩篇介紹了入門相關知識及對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文檔。

云服務器 GPU云服務器頁頭頁腳頁頭頁底調用php keystonejs 頁腳

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52022.html

keystonejs實戰之頁頭頁腳

摘要：前兩篇介紹了入門相關知識及對整體可用性評估，這篇介紹下開始實際運用中的頁頭頁腳部分，因為馬上項目忙了，這個先匆匆的作個收尾。前兩篇介紹了入門相關知識及對keystonejs整體可用性評估，這篇介紹下開始實際運用中的頁頭頁腳部分，因為馬上項目忙了，這個先匆匆的作個收尾。不管是用WordPress還是其他CMS系統，應用最寬泛的也是最基礎的就是企業宣傳類網站，我們就講下keystone...

wendux 2019-08-30 14:11 評論0 收藏0
keystonejs實戰之頁頭頁腳

摘要：前兩篇介紹了入門相關知識及對整體可用性評估，這篇介紹下開始實際運用中的頁頭頁腳部分，因為馬上項目忙了，這個先匆匆的作個收尾。前兩篇介紹了入門相關知識及對keystonejs整體可用性評估，這篇介紹下開始實際運用中的頁頭頁腳部分，因為馬上項目忙了，這個先匆匆的作個收尾。不管是用WordPress還是其他CMS系統，應用最寬泛的也是最基礎的就是企業宣傳類網站，我們就講下keystone...

Jensen 2019-08-22 15:32 評論0 收藏0
微信域名被封的原因及解決辦法

摘要：微信官方在對微信中推廣活動的第三方網頁內容管控越來越嚴格，如果活動效果稍微好一些，自己的網址域名可能就會被封殺，用戶打不開，造成頁面流量的損失和客戶的流失。最近常常聽到搞微商，微信推廣的在叫苦，由于微信域名屏蔽，哀鴻遍野。微信官方在對微信中推廣活動的第三方網頁內容管控越來越嚴格，如果活動效果稍微好一些，自己的網址域名可能就會被封殺，用戶打不開，造成頁面流量的損失和客戶的流失。搞這個沒...

monw3c 2019-07-01 11:20 評論0 收藏0
二列布局

摘要：寬度自適應兩列布局兩列布局可以使用浮動來完成，左列設置左浮動，右列設置右浮動，這樣就省的再設置外邊距了。橫向兩列布局頁頭導航左上右上左下右上右下頁腳 1、寬度自適應兩列布局　　兩列布局可以使用浮動來完成，左列設置左浮動，右列設置右浮動，這樣就省的再設置外邊距了。　　當元素使用了浮動之后，會對周圍的元素造成影響，那么就需要清除浮動，通常使用兩種方法。可以給受到影響的元素設置 clear...

MobService 2019-08-29 12:19 評論0 收藏0
二列布局

摘要：寬度自適應兩列布局兩列布局可以使用浮動來完成，左列設置左浮動，右列設置右浮動，這樣就省的再設置外邊距了。橫向兩列布局頁頭導航左上右上左下右上右下頁腳 1、寬度自適應兩列布局　　兩列布局可以使用浮動來完成，左列設置左浮動，右列設置右浮動，這樣就省的再設置外邊距了。　　當元素使用了浮動之后，會對周圍的元素造成影響，那么就需要清除浮動，通常使用兩種方法。可以給受到影響的元素設置 clear...

stormgens 2019-08-01 16:35 評論0 收藏0