ghost里html文件怎么打开,Ghost配置5——添加归档页面
用了一个来月,总体来讲Ghost是令人满意的。虽然界面可配置化程度不如WordPress,但一些小的功能定制起来也非常容易。
例如添加一个归档页面。
添加静态页面
在ghost博客中,每一个发表的文章都会有一个对应的URL地址。如果你不想让它出现在首页的文章列表中,仅希望使用自定义的链接去访问它,那么就需要用到Ghost的静态页面功能。如下图所示:
将Turn this post into a page选中,这篇文章将不会出现在文章列表中。
添加页面模板
点击发布归档以后,使用指定的URL在浏览器中去访问,会出现404的错误。因为博客系统找不到对应的模板去显示页面内容。
这个时候,需要手动在ghost目录下创建该页面的文件。以本文为例,为归档页面指定了访问URL为xxx/archives,所以在ghost/content/themes/casper下,要创建一个page-archives.hbs文件。
关于生成页面元素的脚本,网络上大部分帖子都是在这个hbs中加入了相关jquery的处理。但这有一个不便之处:修改的是页面文件,所以每次修改都需要重启ghost。
所以笔者决定使用code injection的功能,将相关脚本注入到页面中。
添加元素脚本
脚本分两部分:1.生成对应的HTML元素,2.元素CSS样式
生成HTML
这部分主要是参考了这篇帖子,使用Ghost的API取得对应文章的相关属性进行显示。这部分的脚本,要注入到归档这篇文章的code injection中(不是全局!)
/**
* 调用ghost API,完成文章归档功能
* 所需组件:jQuery、moment.js
* @ldsun.com
*/
jQuery(document).ready(function() {
//获取所有文章数据,按照发表时间排列
$.get(ghost.url.api('posts', {
limit: 'all',
order: "published_at desc"
})).done(function(data) {
var posts = data.posts;
var count = posts.length;
for (var i = 0; i < count; i++) {
//调用comentjs对时间戳进行操作
//由于ghost默认是CST时区,所以日期会有出入,这里消除时区差
var time = moment(posts[i].published_at).utcOffset("-08:00");
var year = time.get('y');
var month = time.get('M')+1;
var date = time.get('D');
if( date<10 ) date = "0"+date;
var title = posts[i].title;
var url = posts[i].url;
var img = posts[i].feature_image;
//首篇文章与其余文章分步操作
if (i > 0) {
var pre_month = moment(posts[i - 1].published_at).utcOffset("-08:00").get('month')+1;
//如果当前文章的发表月份与前篇文章发表月份相同,则在该月份ul下插入该文章
if (month == pre_month) {
var html = "
"+ month + "/" + date +""+title+"";
$(html).appendTo(".archives .list-"+year+"-"+month);
}
//当月份不同时,插入新的月份
else{
var html = "
"+year+"-"+month+"
- "+date+"日"+title+"
";
$(html).appendTo('.archives');
}
}else{
var html = "
"+year+"-"+month+"
- "+month+"/"+date+""+title+"
";
$(html).appendTo('.archives');
}
}
}).fail(function(err) {
console.log(err);
});
});
创建CSS样式
以下内容注入到Post Header中
ul.archives-list li {
display: flex;
margin-bottom: 8px;
background-color: #FFEFEF;
padding: 8px;
border-radius: 4px;
}
ul.archives-list li time {
margin-right: 16px;
}
ul.archives-list li a {
flex: 1;
}
ul.archives-list li div {
margin-right: 16px;
width: 60px;
height: 40px;
background-size: cover;
background-position: center;
}
添加导航
在Ghost后台的Design中,可以添加一条导航路径,点击保存即可看到在网站的导航中出现了对应的链接。
重启Ghost
以上简单4步完成后,重启Ghost即可查看效果。
如果对CSS效果有自己的想法,可以随时修改注入的js和css代码。重新发布即可,无需重启Ghost!
ghost里html文件怎么打开,Ghost配置5——添加归档页面相关推荐
- PDF文件如何修改编辑,怎么添加空白页面
在很多的时候,我们都会使用到PDF文件,对于PDF文件,不熟悉的小伙伴,还是会头疼的,而熟悉的小伙伴会知道,修改编辑PDF文件,是需要使用到PDF编辑器的,在编辑文件的时候,想要在文件中添加页面怎么添 ...
- tif文件在html打开,电脑里tif文件怎么打开?你学会了吗
tif文件是比较少见的一种格式,它是比较灵活的位图格式,主要用来存储包括照片和艺术图在内的图像.最近有win7系统的用户遇到了tif格式的文件,但是不知道要怎么打开tif文件.下面,小编就来跟大家讲解 ...
- GHOST-简易使用手册,快速读懂GHOST里的意思,快来GET它吧
成员之路 学习编程技术,关注这个公众号足够了 相信大伽对于重装是有一定的了解了,除了之前讲的PE微系统里面的PE一键装机的工具外,我们还可以使用到GHOST 这个工具,来完成我们所需要的重装系统. ...
- Ghost配置2——添加代码高亮
使用Ghost的初体验,主题外观都很满意,除了代码段的显示效果. 没有代码高亮,这效果怎么说呢?就像是使用了文本编辑器在写代码,说不上离经叛道,但就是从心底觉得一个字:土. 用Ghost加高亮做关键字 ...
- 在微信里接收文件后如何指着文件用咱编的APP打开?
咱编的APP要打开TXT文件,简单的实现就是在里面放个按钮点击下找到文件打开,可是安卓的路径那个烦呢. 能否在微信里收到文件就用咱的APP打开呢?当然可以啦. 会者不难,其实只要编个个activity ...
- 运行易语言必须放在c盘才能打开,易语言怎样写隐藏运行图片里的文件
易语言如何运行图片中的文件,. 俄那是exe程序,想打开软件自动运行, 请问需要什么样的命令~ 需要的模块.版本 2 写到文件 (取运行目录 () + "\Temp.exe", # ...
- mysql怎么加载bak文件_bak是什么文件格式,bak文件怎么打开? mysql 在服务器里备份(直接拷贝数据文件)-宝商在线...
.bak是备份文件,为文件格式扩展名,这类文件一般在.bak前面加上应该有原来的扩展名比如windows.dll.bak,或是windows_dll.bak,有的则是由原文件的后缀名和bak混合而成, ...
- 如何使用Ghost制作系统镜像文件
如果采用传统的系统安装方法,即使拥有最先进的电脑,速度再快.性能再高, Windows的安装速度也仍然是令人头痛的.而且每次安装完操作系统后,都要安装各种软件,进行各种设置,那么每一次重新安装系统就都 ...
- 迅雷里打开php文件怎么打开,php文件怎么打开
你是不是在网上下载东西的时候下载下来一个php的文件?是不是想知道php文件怎么打开?别着急,看完本文的介绍你就知道下载下来的php文件是怎么回事了. 首先笔者要告诉你,在网上下载下来的那个php文件 ...
最新文章
- aurora IP中选择了小端支持,但小端体现在了什么地方呢?
- ST表 (模板) 洛谷3865
- Memcache 安装与使用
- python 如何查看列表(List)的维度? (需要将List转换成numpy数组)
- JQuery中text()、html()和val()的区别
- Delphi - 被廉价甩卖的传奇
- Log4j.properties 配置详解
- 疑问:当流量被封禁之后(论资本之力):防流量被恶意盗挖(抛砖篇)
- 2、Intellij IDEA中启动Broker
- oracle中入库判断空串,不同数据库和SpringDataJPA对字段值null,''空值的判断
- SpringMVC自定义拦截器拦截请求后返回中文时乱码
- ArcGIS案例学习笔记4_2_水文分析批处理地理建模
- JAVA实现网页版斗地主_Java实现斗地主最简代码实例
- 银行招聘计算机考试时间,秋季银行招聘考试时间是什么时候?
- kubernetes【工具】kind【1】入门实践
- asp.net gridview itemtemplate中控件事件获取行参数
- 冒泡排序法(Java实现)
- PowerShell:无法加载文件 XXXXXXX,因为在此系统上禁止运行脚本
- virtualbox和Hyperv
- 华为防火墙-1-安全区域
热门文章
- Chrome+ProxySwitchySharp+Putty
- Material Design Lite组件之按钮
- 软件机器人加持财务共享服务中心,助力企业财务转型
- 字体“XX”不支持样式“Regular”。
- Linux 命令手册大全 ! 建议收藏 !纯手打
- 蓝桥杯c语言校内选拔赛试题,2013年蓝桥杯校内选拔赛C语言B组.docx
- ws键盘右键_QTP 视频图像鼠标右键的录制
- 【06月10日】A股ROE最高排名
- 服务器操作系统2018,SOLIDWORKS2017、2018、2019对电脑配置和操作系统的要求!
- Vmware 自适应分辨率设置