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文档。
keystonejs实战之页头页脚的更多相关文章
- Delphi TdxComponentPrinter页头页脚的设定
TdxComponentPrinter页头页脚的设定 抄一段备忘.用程序控制也一样.如果是这样,那么 双击TdxComponentPrinter控件,在出现的窗口中,点击ADD,建立一个与TcxGri ...
- 【京东账户】——Mysql/PHP/Ajax爬坑之页头页尾加载
一.引言 实现京东的账户项目,有一个小功能,页头页尾加载.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.实现 原理: 用php文件分别写一个的页头和一个页尾,放在前后两个div里. ...
- Lodop打印表格带页头页尾 自动分页每页显示头尾
Lodop中有两种专门给超文本表格的方式,ADD_PRINT_TABLE和ADD_PRINT_TBURL,该方式只能用于单个表格,表格外的内容不显示,是专门用于打印html超文本表格的.使用这两个语句 ...
- Lodop打印表格带页头页尾 高度是否包含页头页尾
通过设置TableHeightScope,可以实现对ADD_PRINT_TABLE,表格带页头页尾,查看本博客另一篇博文:Lodop打印表格带页头页尾 自动分页每页显示头尾 超文本超过打印项高度,会自 ...
- Lodop打印表格带页头页尾 高度是否包含页头页尾 转载
通过设置TableHeightScope,可以实现对ADD_PRINT_TABLE,表格带页头页尾,查看本博客另一篇博文:Lodop打印表格带页头页尾 自动分页每页显示头尾 超文本超过打印项高度,会自 ...
- 开启SSI配置使shtml支持include公用的页头页脚
编写编写项目众多静态文件时,能像php等开发语言一样使用include将页面公有的header/footer/sidebar作为公用.独立.单一的文件引入到各页面上,这样修改这些页面公用部分时就能单独 ...
- django-xadmin使用之配置页眉页脚
环境:xadmin-for-python3 python3.5.2 django1.9.12 在模块的adminx.py文件中增加以下代码即可: # TIP 定义页头页脚 class GlobalSe ...
- LaTeX 页眉页脚的设置
Latex中页眉页脚的设置 1. 首先要加页眉页脚的话,需要启动宏: 我通常用fancyhdr宏包来设置页眉和页脚. \usepackage{fancyhdr} 我们在 LaTeX 中先把 page ...
- 移动端页头推荐配置 出现找不到favicon.ico错误原因和解决方法
favicon 在未指定 favicon 时,大多数浏览器会请求 Web Server 根目录下的 favicon.ico .为了保证 favicon 可访问,避免404,必须遵循以下两种方法之一: ...
随机推荐
- Day04:集合框架(下) / 集合操作——线性表(一)
对象转型 向上转型: 什么是向上造型? 子类对象赋给父类引用 父类引用指向子类对象 父类类型 引用=子类对象; 子类转成父类 默认进行(父类引用指用子类对象). 为什么需要向上造型? 子类对象可 ...
- XCTF (app1)
打开app.一个文本框,随便输入提示如下图. 打开JEB反编译. v2调用getPackageInfo获取版本信息.一般 Android 通过 PackageInfo 这个类来获取应用安装包信息,比如 ...
- Smarty快速入门
1.Smarty是用纯php语言写的类 2.功能是实现前后端分离 3.Smarty简洁高效 4.快速入门案例 1.下载 smarty源码 https://www.smarty.net/ 2.搭建PHP ...
- C++11智能指针原理和实现
一.智能指针起因 在C++中,动态内存的管理是由程序员自己申请和释放的,用一对运算符完成:new和delete. new:在动态内存中为对象分配一块空间并返回一个指向该对象的指针: delete:指向 ...
- Django基础之模型(models)层(上)
目录 Django基础之模型(models)层 单表查询 必知必会13条 神奇的双下划线查询 多表查询 外键的字段的增删改查 表与表之间的关联查询 基于双下划线的跨表查询(连表查询) 补充知识 Dja ...
- C语言经典100例(51-100)
[程序51] 题目:学习使用按位与 & . 分析:0&0=0; 0&1=0; 1&0=0; 1&1=1 #include "stdio.h" ...
- python网络爬虫(9)构建基础爬虫思路
目的意义 基础爬虫分5个模块,使用多个文件相互配合,实现一个相对完善的数据爬取方案,便于以后更完善的爬虫做准备. 这里目的是爬取200条百度百科信息,并生成一个html文件,存储爬取的站点,词条,解释 ...
- 最新省市区地区数据sql版本(2019年1月)
版本 统计标准2017版 来源 http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/ 建表 CREATE TABLE `area` ( `id` varc ...
- Linq Distinct 自定义比较
private class MyMenuComparer : IEqualityComparer { public bool Equals(ParMenu x, ParMenu y){ return ...
- sql limit i,n
limit i,n; i:为查询结果的索引值(默认从0开始),当i=0时可省略i n:为查询结果返回的数量(也就是条数) 表示从第i+1条开始,取n条数据 limit n 等同于 limit 0,n ...