前两篇介绍了入门的相关知识和keystonejs的整体易用性测评。本文介绍的是实际应用的页眉页脚部分，因为项目很快就要忙了，所以赶快做个画龙点睛吧。无论你使用WordPress还是其他CMS系统，使用最广泛也是最基础的就是企业宣传网站。下面说说keystonejs实现的头尾变换。效果如下：PCheaderPCfootermobilepageheadermobilefooter具体修改也很简单，先找到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:'联系人',key:'联系人',href:'/联系人'},];res.locals.navLinksCN=[{label:'Home',key:'home',href:'/'},{label:'News',key:'blog',href:'/blog'},{label:'workdisplay',key:'gallery',href:'/gallery'},{label:'联系我们',key:'contact',href:'/contact'},];res.locals.user=req.user;下一个（）;};然后找到H:workspacekeystonejs-projecttemplateslayoutsdefault.pug文件，复制一份，重命名为main.pug，接下来就是具体的HTML+CSS部分。在site.css下引入我们自定义的样式文件，如：link(href="/styles/style.css",rel="stylesheet");添加标题代码，例如：//-HEADERdiv(style='width:100%')//-通过更改./routes/middleware.js中的navLinks数组来自定义站点的导航//-...或完全更改此标头以适合您的设计。.box1#head.navBox.mabox.weimaimg(src='../images/ma.jpg')a.nav-left(href='index')img(src='../images/logo.svg').nav-rightdiva.weibo(href='',target='_blank')a.weixina.gouwuche(href='',target='_blank').nav-centerul.menu中的每个链接导航链接CNli(class=(section==link.key?'active':null)):a(href=link.href)=link.labelnav(role='navigation').navbar.navbar-default.container-fluid.navbar-header.text-rightbutton(type='button').navbar-togglespan.sr-only切换导航span.icon-barspan.icon-barspan.icon-bar添加页脚代码，如：//-FOOTER//-.container:#footer.box1.foot#foot.top.box2返回顶部.box2.dianshangspanxxx电商渠道：pa(href="http://"target="_blank")天猫a(href="http://"target="_blank")京东a(href="http://"target="_blank")苏宁a(href="http://"target="_blank")WeChatMall.cont.d1img(src='../images/ma2.jpg').d2p正月初五科技有限公司p电话：400-8888-888p北京市朝阳区朝阳门大街88号.d3img(src='../images/ma2.jpg')p.bei?2014-2017版权所有|正月初五|京ICP备88888888-1号最后在具体视图中参考页面把默认模板改成main，比如：extends../layouts/mainOK，重启应用看看效果备注：pug模板引擎中文文档哈巴狗文档。
