Miccall主题的不足与修改

在这篇文章里我会汇总一下现在我使用的hexo主题(MICCALL by Miccall Metro)的一些不足之处,
因为我想在下面来单独讨论改进的各种方案,也方便随时增加条目。
下列每一项列表之上我都会预留指针,
以便归纳。

首先我们需要了解一下hexo的Themes是如何运作的,我选择了这篇文章(https://segmentfault.com/a/1190000006057336)来入门,当然以我的聪明才智,并没有细看只是打开当做一个补充罢了。
Themes文件夹里的主题文件夹里的目录

.
├── _config.yml   //记录主题配置信息
├── layout        //存放布局模板文件
│   └── _partial  //布局文件中可共用的模板
└── source        //静态资源文件夹
    ├── css
    ├── fonts
    ├── js
    └── sass

于是把整个目录拖到brackets里修改就可以了

移动链接标签至文章列表标签的外面

<div class="page_title" style="background-image: url(<%= post.thumbnail %>);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;">
    <!--标题-->
    <a href="<%- url_for(post.path) %>"><h2 class="page_title_text"> <%= post.title %> </h2></a>
    <!--段落-->
</div>

改成

<a href="<%- url_for(post.path) %>">
    <div class="page_title" style="background-image: url(<%= post.thumbnail %>);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;">
        <!--标题-->
        <h2 class="page_title_text"> <%= post.title %> </h2>
        <!--段落-->
    </div>
</a>

找到categories的描述并照葫芦画瓢写一个tag的显示就行

command⌘ + F 查找 categories ,找到了这个

<h6>
    <a class="post_category-link" href="http://localhost:4000/categories/Algorithm/"><%- list_categories(post.categories, {
        show_count: false,
        class: 'post_category',
        style: 'none'
    }) %></a>                              
</h6>

中的这个函数 list_categories
在官方文档(https://hexo.io/zh-cn/docs/helpers.html#列表)中的定义:

list_categories

插入分类列表。

<%- list_categories([options]) %>
参数 描述 默认值
orderby 分类排列方式 name
order 分类排列顺序。1, asc 升序;-1, desc 降序。 1
show_count 显示每个分类的文章总数 true
style 分类列表的显示方式。使用 list 以无序列表(unordered list)方式显示。 list
separator 分类间的分隔符号。只有在 style 不是 list 时有用。 ,
depth 要显示的分类层级。0 显示所有层级的分类;-1 和 0 很类似,但是显示不分层级;1 只显示第一层的分类。 0
class 分类列表的 class 名称。 category
transform 改变分类名称显示方法的函数 none

而且果然存在tag函数,定义如下。

list_tags

插入标签列表。

<%- list_tags([options]) %>

选项 描述 预设值
orderby 标签排列方式 name
order 标签排列顺序。1, asc 升序;-1, desc 降序。 1
show_count 显示每个标签的文章总数 true
style 标签列表的显示方式。使用 list 以无序列表(unordered list)方式显示。 list
separator 标签间的分隔符号。只有在 style 不是 list 时有用。 ,
class 标签列表的 class 名称。 tag
transform 改变标签名称显示方法的函数 none
amount 要显示的标签数量(0 = 无限制) 0

那么现在就好办了。用我从没学过html的聪明大脑很快就把tag补上了呢
……真没学过。
于是在categories的后面写了一个h6

<h6>
    <a class="post_tag-link" href="http://localhost:4000/tags/"><%- list_tags(post.tags, {
        show_count: false,
        class: 'post_tag',
        style: 'none'
    }) %></a>
</h6>

嗯嗯完美渲染。

理论上来说只需要找到background-size改成contain就行了

但已经找了一下午。并没有找到。(手动微笑)
……暂时搁置,之后问问大佬们吧。


诶找到了……顺便给作者提了几个request……口意现在我好累想睡觉……先睡会了……