Ghost配置5——添加归档页面

40次阅读

共计 2821 个字符,预计需要花费 8 分钟才能阅读完成。

用了一个来月,总体来讲 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 中(不是全局!)
<!– 注入到 Post Footer 中 –>
<script type = “text/javascript”>
/**
* 调用 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 = “{{@blog.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 = “<li><time>”+ month + “/” + date +”</time><div style=’background-image: url(” + img + “)’ /><a href='”+url+”‘>”+title+”</a></li>”;
$(html).appendTo(“.archives .list-“+year+”-“+month);
}
// 当月份不同时,插入新的月份
else{
var html = “<div class=’item’><h3><i class=’fa fa-calendar fa-fw’ aria-hidden=’true’></i> “+year+”-“+month+”</h3><ul class=’archives-list list-“+year+”-“+month+”‘><li><time>”+date+” 日 </time><a href='”+url+”‘>”+title+”</a></li></ul></div>”;
$(html).appendTo(‘.archives’);
}
}else{
var html = “<div class=’item’><h3><i class=’fa fa-calendar fa-fw’ aria-hidden=’true’></i> “+year+”-“+month+”</h3><ul class=’archives-list list-“+year+”-“+month+”‘><li><time>”+month+”/”+date+”</time><div style=’background-image: url(” + img + “)’ /><a href='”+url+”‘>”+title+”</a></li></ul></div>”;
$(html).appendTo(‘.archives’);
}
}
}).fail(function(err) {
console.log(err);
});
});
</script>
创建 CSS 样式
以下内容注入到 Post Header 中
<!– 脚本需要用到 moment.js 依赖 –>
<script src=”//cdn.bootcss.com/moment.js/2.14.1/moment.min.js”></script>
<!– CSS 样式定义 –>
<style type=”text/css”>
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;
}
</style>
添加导航
在 Ghost 后台的 Design 中,可以添加一条导航路径,点击保存即可看到在网站的导航中出现了对应的链接。
重启 Ghost
以上简单 4 步完成后,重启 Ghost 即可查看效果。如果对 CSS 效果有自己的想法,可以随时修改注入的 js 和 css 代码。重新发布即可,无需重启 Ghost!

正文完
 0