Ghost博客升级到0.5.10

superlin • April 07, 2015 • No Comments

原来的Ghost博客版本为0.5.1，现在Ghost博客已经升级到0.5.10，新版本的Ghost相对于原来的版本有了很多的新功能，包括标签编辑、SEO等多个选项，新的特性是吸引人的，12bet,因此我也觉得升级我的博客到最新的0.5.10。

1.数据备份

Ghost的所有数据都存在/content下，/content/data下为数据库文件，/content/images下为所有的图片文件，/content/themes下为主题文件，将这些文件备份。

此外根目录下的config.js是博客的配置文件，因此也需要备份。

2.主题替换

此前博客使用的是Ghost 0.5.1，12博体育,主题也是挺不错的，12bet,而且还是响应式的。 my old theme

但是旧的主题的功能相对较少，页面比较单一，没有边栏，12bet,无法添加标签云等功能，这也是我要升级的重要原因之一。

新的主题同样是使用了Bootstrap，12bet,也是响应式的，但是多了边栏和简单的主题设定。 my new theme

3.新功能添加

Ghost提供了许多API，可以利用这些API实现博客的定制，12博体育,下面就列举出我主要添加的功能。

3.1.标签云（tag cloud）

添加helper：/core/server/helpers/新增tag_cloud.js

var _               = require('lodash'),  
    template        = require('./template'),
    config          = require('../config'),
    api             = require('../api'),
    tag_cloud;
tag_cloud = function (options) {  
    var tagCloudOptions = (options || {}).hash || {};
    var limit = (_.has(tagCloudOptions, 'limit') && !/all/i.test(tagCloudOptions.limit))? parseInt(tagCloudOptions.limit, 10) : 'all';
    tagCloudOptions = _.pick(tagCloudOptions, ['limit']);
    tagCloudOptions = {
        limit: 'all',
        include: ['post_count'].join(','),
        context: 'internal'
    };
    return api.tags.browse(tagCloudOptions).then(function(tags){
        var sortedTags = _.sortBy(tags.tags, 'post_count').reverse();
        if(limit !== 'all') {
            sortedTags = sortedTags.slice(0, limit);
        }
        sortedTags.forEach(function(){
            this.url = config.urlFor('tag', {tag: this}, false);
        });
        return template.execute('tag_cloud',  {tags:sortedTags});
    });
};
module.exports = tag_cloud;

添加模板：/core/server/helpers/tpl/新增tag_cloud.hbs

<ul class="content tag-cloud">  
    {{https://www.liuwanlin.info/superlin%e7%9a%84%e8%af%bb%e4%b9%a6%e7%ac%94%e8%ae%b0-52/foreach tags}}
    <a href="{{url}}" class="tag-item">{{name}}<span class="post-count">{{post_count}}</span></a>
    {{/foreach}}
</ul>

注册helper：/core/server/helpers/index.js注册helper

//第40行
coreHelpers.tag_cloud = require('./tag_cloud');
//第113行（Async theme helpers后面）
registerAsyncThemeHelper('tag_cloud', coreHelpers.tag_cloud);

使用：只需要在适当的位置添加如下代码，可以设定limit值限定标签个数

{{tag_cloud limit="all"}}

注意：模板可以在主题目录下的partials里面重写覆盖。后面的例子也是如此。

3.2.最近文章（recent posts）

添加helper：/core/server/helpers/新增recent_posts.js

var _               = require('lodash'),  
    template        = require('./template'),
    config          = require('../config'),
    api             = require('../api'),
    recent_posts;
recent_posts = function (options) {  
    var recentPostsOptions = (options || {}).hash || {}, limit;
    if(_.has(recentPostsOptions, 'limit')){
        limit = parseInt(recentPostsOptions.limit, 10);
    } else {
        limit = 3;
    }
    recentPostsOptions = {
        limit: limit
    };
    return api.posts.browse(recentPostsOptions).then(function(posts){
        return template.execute('recent_posts',  {posts: posts.posts});
    });
};
module.exports = recent_posts;

添加模板：/core/server/helpers/tpl/新增recent_posts.hbs

<div class="content recent-post">  
    {{https://www.liuwanlin.info/superlin%e7%9a%84%e8%af%bb%e4%b9%a6%e7%ac%94%e8%ae%b0-52/foreach posts}}
    <div class="recent-single-post">
        <a href="{{url}}" class="post-title">{{title}}</a>
        <div class="date">{{date format="MMMM DD, YYYY"}}</div>
    </div>
    {{/foreach}}
</div>

注册helper：/core/server/helpers/index.js注册helper

//第41行
coreHelpers.recent_posts = require('./recent_posts');
//第114行（Async theme helpers后面）
registerAsyncThemeHelper('recent_posts', coreHelpers.recent_posts);

使用：只需要在适当的位置添加如下代码，可以设定limit值限定文章数目，默认3篇

{{recent_posts}}

3.3.关键字（meta keywords）

这个helper主要是用于SEO，可以将文章标签放到meta头部的keywos中。

添加helper：/core/server/helpers/新增meta_keywords.js

var _           = require('lodash'),  
    config      = require('../config'),
    filters     = require('../filters'),
    meta_keywords;
meta_keywords = function () {  
    var keywords,
        blog;
    if (_.isString(this.relativeUrl)) {
        blog = config.theme;
        if (!this.relativeUrl || this.relativeUrl === '/' || this.relativeUrl === '' || this.relativeUrl.match(//page/)) {
            keywords = blog.title;
        } else {
            keywords="";
            if (this.post && this.post.tags) {
                this.post.tags.forEach(function(value) {
                    if (!keywords=="") {
                        keywords+=",";
                    }
                    keywords+=value.name;
                });
                keywords+=","+blog.title;
            }
        }
    }
    return filters.doFilter('meta_keywords', keywords).then(function (keywords) {
        keywords = keywords || "";
        return keywords.trim();
    });
};
module.exports = meta_keywords;

注册helper：/core/server/helpers/index.js注册helper

//第42行
coreHelpers.meta_keywords = require('./meta_keywords');
//第115行（Async theme helpers后面）
registerAsyncThemeHelper('meta_keywords', coreHelpers.meta_keywords);

使用：固定如下代码

<meta name="keywords" content="{{meta_keywords}}">

3.4.上下篇链接

core/server/controllers/frontpage.js的single方法对应的就是获取单篇博文内容。

第384行附近添加next和previous

postLookup.include = 'author,tags,fields,next,previous';

修改主题下的post.hbs模板，在适当位置增加链接

<nav class="row">  
    {{https://www.liuwanlin.info/superlin%e7%9a%84%e8%af%bb%e4%b9%a6%e7%ac%94%e8%ae%b0-52/if previous}}
     <div class="col-md-6">
         <a href="{{previous.url}}" title="Previous Post"><i class="fa fa-chevron-left"></i> {{previous.title}}</a>
     </div>
     {{/if}}
      {{https://www.liuwanlin.info/superlin%e7%9a%84%e8%af%bb%e4%b9%a6%e7%ac%94%e8%ae%b0-52/if next}}
      <div class="col-md-6" style="text-align:right; float: right">
           <a href="{{next.url}}" title="Previous Post">{{next.title}} <i class="fa fa-chevron-right"></i></a>
       </div>
      {{/if}}
</nav>

3.5.归档（archives）

简单的按时间顺序列出博文。

先在/core/server/routes/frontend.js中添加路由，然后在/core/server/controllers/frontend.js添加处理函数。

代码略。

3.6.联系（contact）

主要用于联系页面，发送消息到我的邮箱，可以去联系页面试试哦

也是先添加路由，再添加处理函数，这里用到了nodemailer模块。

具体代码略。

4.优化

页面加载优化：之前用到多个css和js文件，合并了css和js，之前最近文章和标签云是通过/rss来获取，明显加载有延时，将这部分功能移到后台，最近文章和标签云的加载速度明显加快。通过Chrome DevTools的Network看出页面重新加载速度由4s变为了不到2s，好的情况下只有1s。

为部分标签（tags）添加图标：选取了部分图片，使用Photoshop简单处理图片,得到了几个常用的100*100的图标。

SEO：google webmaster中重新添加sitemap，并手动添加博文链接，同时通过ghost的新功能手动为博文添加meta_title和meta_description。此外前文提到的为文章添加关键字（meta_keywords）也是SEO的操作之一。

至此新博客的迁移升级全部完成，后续工作就是进行优化。

拓展内容

  • Ghost SEO教程
  • Ghost for Beginners：全面的Ghost使用
Author image
关于 superlin
Beijing, CN 主页
The reason why a great man is great is that he resolves to be a great man.
 
 
默认颜色 边栏居左 边栏居右
Copyright © 2020, 12bet   网站地图   12博bet   12博娱乐 . All Right Reserved