Background

從去年開始就一直在使用Ghost當做我的Blog. 因為我習慣在Blog寫筆記. 但是他一直沒有 Archive Page & search function, 讓我有時候想要快速地找我之前寫過的文章變得非常的麻煩. 所以今天就決定自己來動手做 Archive page 並記錄一下.

Create Static Page for Archive

Please follow this tutorial to create the static page.

Creating a Custom Page Template on Ghost

  1. cd /var/www/ghost/content/themes/marceline (this is my theme directory)

  2. Create a page-archive-post.hbs file

page-archive-post.hbs

{{!< default}}

<header class="masthead" {{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}">
    <div class="header-wrapper">
        {{#if @blog.logo}}<figure class="logo">
            <a href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}"></a>
        </figure>{{/if}}
        <div class="title">
            <a href="{{@blog.url}}">
                <h1>{{@blog.title}}</h1>
            </a>
            <p>{{@blog.description}}</p>
            <div class="line"></div>
        </div>

        <div class="bottom">
	    <ul class="menu">
            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#"><i class="fa fa-github"></i></a></li>
            <li><a href="#"><i class="fa fa-instagram"></i></a></li>
	    </ul>
	</div>
    </div>
</header>

<section class="container">
    <article class="{{post_class}} single">
        <header class="header-post">
            {{#get "posts" limit="all" include="tags,author"}}
                {{#foreach posts}}
                    <header class="header-post">
                        <span class="meta-post">
                            <time datetime="{{date format='DD-MM-YYYY'}}">{{date format="DD MMM YYYY"}}</time>
                        </span>
                        <a href="{{url}}"><h2 class="title-post">{{{title}}}</h2></a>
                    </header>
                {{/foreach}}
            {{/get}}
        </header>
    </article>
</section>

And you can see the result. (DEMO)

Other

If you want to use ghost.url.api() and javascript to build your custom page. You can follow this tutorial.

But I have struggled using ghost.url.api(), I don't know why i always got Unauthorized(401) error. Even I follow all steps from the tutorial above. (Maybe someone can share him/her experience to me)

I still find out the solution to overcome this struggle. I modify the code in the core directory, but it's not a suggested method.

core/server/middleware/auth.js

if (req.query && req.query.client_secret) {
    req.body.client_secret = req.query.client_secret;
}

if (!req.body.client_id || !req.body.client_secret) {
    errors.logError(
        i18n.t('errors.middleware.auth.clientAuthenticationFailed'),
        i18n.t('errors.middleware.auth.clientCredentialsNotProvided'),
        i18n.t('errors.middleware.auth.forInformationRead', {url: 'http://api.ghost.org/docs/client-authentication'})
    );
    return errors.handleAPIError(new errors.UnauthorizedError(i18n.t('errors.middleware.auth.accessDenied')), req, res, next);
}

# line 58 in the auth.js
# add this line and you will not see Unauthorized(401) error again.
return next();

return passport.authenticate(['oauth2-client-password'], {session: false, failWithError: false}

If you have an interest in seeing code. please see in my github.

Reference