Ghost主题问题解决记录

记录再用主题的一些修改问题，以及一些以后可能需要使用的知识点。

日期时间的修改以及格式，图片地址的替换方式，略缩图的调用方法以及使用云存储处理图片的源码设置。

日期问题

标准的仅具有日期格式为：

格式            | 显示          |
----------      | ------------- |
dd/MM/yyyy      | 06/03/2007    |
dd-MMM-yyyy     | 06-Mar-2007   |
MM/dd/yyyy      | 03/06/2007    |
MMM dd, yyyy    | Mar 06, 2007  |
MMMMM dd, yyyy  | March 06, 2007|
yyyy.MM.dd      | 2007.06.03    |
yyyy/MM/dd      | 2007/06/03    |
yyyy-MM-dd      | 2007-06-03    |  

可以使用“日期时间格式”列表来控制“日期和时间”字段的格式。并不是“日期时间格式”中的所有格式都可以转换。可以转换的标准日期和时间格式如下：

格式            | 显示          |
----------      | ------------- |
dd-MM-yyyy HH'h'mm            |06-03-2007 13h44
dd-MM-yyyy HH'h'MM'min'        |06-03-2007 13h44min
dd-MMM-yyyy HH:mm            |06-Mar-2007 13:44
dd/MM/yyyy HH'h'mm            |06/03/2007 13h44
dd/MM/yyyy HH:mm            |06/03/2007 13:44
dd/MM/yyyy hh:mm a zzz        |06/03/2007 01:44 PM PST
dd/MM/yyyy HH:mm zzz        |06/03/2007 13:44 PST
dd/MM/yyyy HH:mm:ss            |06/03/2007 13:44:25
dd/MM/yyyy hh:mm:ss a zzz    |06/03/2007 01:44:25 PM PST
dd.MM.yyyy HH:mm:ss            |06.03.2007 13:44:25
MM/dd/yyyy HH:mm            |03/06/2007 13:44
MM/dd/yyyy hh:mm a zzz        |03/06/2007 01:44 PM PST
MM/dd/yyyy HH:mm zzz        |03/06/2007 13:44 PST
MM/dd/yyyy HH:mm:ss            |03/06/2007 13:44:25
MM/dd/yyyy hh:mm:ss a zzz    |03/06/2007 01:44:25 PM PST
MMMMM dd, yyyy hh:mm a zzz    |March 06, 2007 01:44 PM PST
yyyy-MM-dd HH.mm            |2007-03-06 13.44
yyyy-MM-dd hh:mm a zzz        |2007-03-06 01:44 PM PST
yyyy.MM.dd hh:mm a zzz        |2007.03.06 01:44 PM PST
yyyy/MM/dd hh:mm a zzz        |2007/03/06 01:44 PM PST
yyyy/MM/dd HH:mm zzz        |2007/03/06 13:44 PST

解释

字母序列     |描述                            |示例  
----------      | ------------- | ------------- |
d        |一个月中一位或两位数的日期        |1 - 31
dd        |一个月中两位数的日期            |01 - 31
DDD        |一年中三位数的日期                |001 - 366
EEE        |一周中缩写的日期                |Mon - Sun
EEEE    |一周中日期的全称                |Monday - Sunday
M        |一位或两位数的月份                |1 - 12
MM        |两位数的月份                    |01 - 12
MMM        |三个字母的月份缩写                |Jan - Dec
MMMMM    |月份的全称                        |January - December
y        |一位或两位数的年份                |0 - 99
yy        |两位数的年份                    |00 - 99
yyyy    |四位数的年份                |1999、2000、2010  

字母序列|描述                                    |显示
------------| ------------------------------------- | --------------- |
a        |表示 AM 或 PM    AM 或 PM
h        |上午/下午 (1-12) 中一位或两位数的小时数    |    1 - 12
hh        |上午/下午 (01-12) 中两位数的小时数        |01 - 12
H        |一天 (0-23) 中一位或两位数的小时数        |0 - 23
HH        |一天 (00-23) 中两位数的小时数            |00 - 23
m        |一小时中一位或两位数的分钟数            |0 - 59
mm        |一小时中两位数的分钟数                    |00 - 59
s        |一分钟中一位或两位数的秒数                |0 - 59
S        |一位、两位或三位数的毫秒数                |0 - 999
ss        |一分钟中两位数的秒数                    |00 - 59
SSS        |三位数的毫秒数                            |000 - 999
z 或 zzz|三个字母的时区缩写                        |EST、CST 等。
Z        |相对于 GMT 的时区                        |-0500、-0600 等。  

之后就可以看着上面的形式修改代码来让主题按自己的要求显示日期了。
我的主题中日期的文件位置：
partials/articles.hbs 首页显示

{{#foreach posts}}
    <article class="post-listed {{post_class}}">
        <a class="post-image" href="{{url}}" title="{{title}}">
            <img src="{{image}}" alt="{{title}}"/>
        </a>

        <h2>
            <a href="{{url}}" title="{{title}}">{{title}}</a>
        </h2>

        <div class="post-meta">
            <span class="time">
                {{date format=">>==DD MMMM, YYYY==<<"}}  >>==修改这里为你需要的形式==<<   
            </span>

            {{#if tags}}
                in
                <span class="tags">
                    {{#foreach tags}}
                        <a href="{{url}}" title="{{name}}">#{{name}}</a>
                    {{/foreach}}
                </span>
            {{/if}}
        </div>
    </article>
{{/foreach}}
{{pagination}}  

partials/post-single-meta.hbs 文章页显示

<div class="post-meta">
    <span class="time">
        {{date format=">>==DD MMMM, YYYY==<<"}}   >>==修改这里为你需要的形式==<<
    </span>

    {{#if tags}}
        in
        <span class="tags">
            {{#foreach tags}}
                <a href="{{url}}" title="{{name}}">#{{name}}</a>
            {{/foreach}}
        </span>
    {{/if}}|

    <span class="share">
        {{> "share-links"}}
    </span>
</div>  

图片地址问题

通过MySql 命令解决

update posts set markdown = REPLACE(markdown, 'http://Mwulu.com/wp-content/uploads/', 'https://dl.Mwulu.com/images/');
update posts set html = REPLACE(html, 'http://Mwulu.com/wp-content/uploads/', 'https://dl.Mwulu.com/images/')  

略缩图问题

第一种方法：
修改assetscssstyles.css

.content .post-image{display:block;margin-bottom:15px}

修改后

.post-image p{
    height: 147px;
    overflow: hidden;
}

.content .post-image img{
    width: 150%;
    height: auto;
    margin-top: -20px;
    margin-left: -50px;
}
}{}  

效果：

没有居中需要自己修改，对竖条的图 只影响头部。由网友 Xiao 提供

第二种方法：
修改partialsarticles.hbs
改前：

{{#foreach posts}}
    <article class="post-listed {{post_class}}">
        <a class="post-image" href="{{url}}" title="{{title}}">
            <img src="{{image}}" alt="{{title}}"/>
        </a>

        <h2>
            <a href="{{url}}" title="{{title}}">{{title}}</a>
        </h2>

        <div class="post-meta">
            <span class="time">
                {{date format="DD MMMM, YYYY"}}
            </span>

            {{#if tags}}
                in
                <span class="tags">
                    {{#foreach tags}}
                        <a href="{{url}}" title="{{name}}">#{{name}}</a>
                    {{/foreach}}
                </span>
            {{/if}}
        </div>
    </article>
{{/foreach}}
{{pagination}}  

改后：

{{#foreach posts}}
    <article class="post-listed {{post_class}}">
        <a class="post-image" href="{{url}}" title="{{title}}">
            <img src="{{image}}-Thumbnail" alt="{{title}}"/>      //添加七牛预处理命令-Thumbnail
        </a>

        <h2>
            <a href="{{url}}" title="{{title}}">{{title}}</a>
        </h2>

        <div class="post-meta">
            <span class="time">
                {{date format="YYYY MM DD"}}
            </span>

            {{#if tags}}
                in
                <span class="tags">
                    {{#foreach tags}}
                        <a href="{{url}}" title="{{name}}">#{{name}}</a>
                    {{/foreach}}
                </span>
            {{/if}}
        </div>
    </article>
{{/foreach}}
{{pagination}}  

使用七牛的坏处是必须要自己设置略缩图，好处是可以通过七牛预处理来处理图片大小剧中或其他设置以及略缩图图片格式可以有效的加快访客打开首页的速度。

第三种方法：

.content .post-image img{
    width: 294px;
    height: 147px;
}  

显示：

强行缩放为294X147 所以没用

完结撒花OvO