keystonejs实战之页头页脚

Jensen 发布于2019-08-22 15:32 / 2911人阅读

摘要：前两篇介绍了入门相关知识及对整体可用性评估，这篇介绍下开始实际运用中的页头页脚部分，因为马上项目忙了，这个先匆匆的作个收尾。

前两篇介绍了入门相关知识及对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 页脚

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93528.html

keystonejs实战之页头页脚

摘要：前两篇介绍了入门相关知识及对整体可用性评估，这篇介绍下开始实际运用中的页头页脚部分，因为马上项目忙了，这个先匆匆的作个收尾。前两篇介绍了入门相关知识及对keystonejs整体可用性评估，这篇介绍下开始实际运用中的页头页脚部分，因为马上项目忙了，这个先匆匆的作个收尾。不管是用WordPress还是其他CMS系统，应用最宽泛的也是最基础的就是企业宣传类网站，我们就讲下keystone...

wendux 2019-08-30 14:11 评论0 收藏0
keystonejs实战之页头页脚

摘要：前两篇介绍了入门相关知识及对整体可用性评估，这篇介绍下开始实际运用中的页头页脚部分，因为马上项目忙了，这个先匆匆的作个收尾。前两篇介绍了入门相关知识及对keystonejs整体可用性评估，这篇介绍下开始实际运用中的页头页脚部分，因为马上项目忙了，这个先匆匆的作个收尾。不管是用WordPress还是其他CMS系统，应用最宽泛的也是最基础的就是企业宣传类网站，我们就讲下keystone...

mo0n1andin 2019-08-01 18:42 评论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