Hexo主题折腾日记(一) 从cactus到icarus

Hexo主题折腾日记(一) 从cactus到icarus

前言

从Hexo建站开始,一直是使用的cactus主题,很喜欢那种简约的风格,主页文章预览的都没有的那一种。

直到昨天心血来潮想搞一个基于ghost的动态博客,同时爱上了他的默认主题casper,心想这不就是我梦寐已久的主题么,结果搜了很多的资料,发现个人维护的建站工具都是至少1年以上的,有一个基于 python 可以通过ghost部署到github pags上的工具还是基于2.7,我直接裂开,最终直接放弃了这套方案,回过头来想能不能把casper移植到hexo上呢,在github上也搜到了相应的项目,但效果emmm,不是特别能让我满意,贴一张demo供大家参考。

主要还是插件的支持度没有成熟主题的高,然后就又开始google: hexo主题推荐2019类似的关键词,终于发现了这个模版,icarus,没有cactus那么朴素,插件支持度和commit活跃度也比hexo-casper高,所以昨天花了很长很长的时间调整网页布局和文章渲染问题,最终效果我打9分吧,因为还有一点问题没有解决,等写完这个博客我再搞,下面主要把我基于别人修改的模版和自己修改的内容做一下总结,以免以后git pull之后不知道自己做了哪些修改。

icarus主题之上主要改动

  1. 主页显示两栏widget,文章只显示左边widget
  2. 文章图片居中
  3. 增加profile下面的 bio, 可以放一点自己想说的话
  4. 置顶文章
  5. 文章底部文章详细信息显示以及推荐文章模块配置
  6. 页脚访问人数显示修改

主页显示两栏widget,文章只显示左边widget

主要参考 水寒blog

配置

  1. 修改 /includes/helpers/layout.js

    1
    hexo.extend.helper.register('column_count', function () {
    2
     let columns = 1;
    3
    +        if (this.page.__post === true || this.page.__page === true) {
    4
    +            return 2;
    5
    +        }
    6
    const hasColumn = hexo.extend.helper.get('has_column').bind(this);
    7
    columns += hasColumn('left') ? 1 : 0;
    8
    columns += hasColumn('right') ? 1 : 0;
  2. 修改 /layout/common/widget.ejs

    1
    <%- partial('widget/' + widget.type, { widget, post: page }) %>
    2
    <% }) %>
    3
    <% if (position === 'left') { %>
    4
    -        <div class="column-right-shadow is-hidden-widescreen <%= sticky_class('right') %>">
    5
    +        <div class="column-right-shadow <%= (page.__page !== true && page.__post !== true) ? 'is-hidden-widescreen' : '' %> <%= sticky_class('right') %>">
    6
     <% get_widgets('right').forEach(widget => {%>
    7
         <%- partial('widget/' + widget.type, { widget, post: page }) %>
    8
     <% }) %>
  3. 修改 /layout/layout.ejs

    1
     <div class="columns">
    2
             <div class="column <%= main_column_class() %> has-order-2 column-main"><%- body %></div>
    3
             <%- partial('common/widget', { position: 'left' }) %>
    4
    +                <% if (page.__page !== true && page.__post !== true) { %>
    5
             <%- partial('common/widget', { position: 'right' }) %>
    6
    +                <% } %>
    7
         </div>
    8
     </div>
    9
     </section>
  4. 修改 /source/css/style.styl

    1
    @media screen and (min-width: screen-widescreen)
    2
        .is-1-column .container
    3
        .is-2-column .container
    4
            max-width: screen-widescreen - 2 * gap
    5
            width: screen-widescreen - 2 * gap
    6
    @media screen and (min-width: screen-fullhd)
    7
        .is-2-column .container
    8
            max-width: screen-fullhd - 2 * gap
    9
            width: screen-fullhd - 2 * gap
    10
        .is-1-column .container
    11
            max-width: screen-desktop - 2 * gap
    12
            width: screen-desktop - 2 * gapp
  5. 修改 /layout/layout.ejs

    1
     <% function main_column_class() {
    2
    switch (column_count()) {
    3
        case 1:
    4
            return 'is-12';
    5
        case 2:
    6
            return 'is-8-tablet is-9-desktop is-9-widescreen';
    7
        case 3:
    8
            return 'is-8-tablet is-8-desktop is-6-widescreen'
    9
    }
    10
    return '';
    11
    } %>
  6. 修改 /layout/common/widget.ejs

    1
    <% function side_column_class() {
    2
    switch (column_count()) {
    3
    case 2:
    4
        return 'is-4-tablet is-3-desktop is-3-widescreen';
    5
    case 3:
    6
        return 'is-4-tablet is-4-desktop is-3-widescreen';
    7
    }
    8
    return '';
    9
    } %>

文章图片居中

最开始尝试了修改 source/js/main.js 和 layout/css/style.styl , 修改的内容也是基于水寒的博客,本地 hexo server没有问题,但是 hexo g -d 之后就总是出问题,最后还是老老实实

1
<center> 
2
</center>

增加profile下面的 bio, 可以放一点自己想说的话

实现效果

配置

修改 /layout/widget/profile.ejs, 在最后加上你想说的话

1
        <% } %>
2
    </div>
3
    <% } %>
4
+        <hr>
5
+        <p id="evan">修子也好,远野也好,对于情感世界发生的事,很难简单以对和错来衡量,在这样的世界里沉浮,飘落的是情感,不败的总是每年盛开的樱花。    --《情人》</p>
6
</div>
7
</div>

置顶文章

参考文章: https://removeif.github.io/2019/09/19/%E5%8D%9A%E5%AE%A2%E6%BA%90%E7%A0%81%E5%88%86%E4%BA%AB.html#more

github commit history

实现效果

使用说明

在每篇文章的top comment部分配置top字段,初始值是100,如果要置顶,需要设置为大于100的值,值越大越靠前。相等时,根据时间降序。具体设置如下

1
title: 一亩三分地自动签到脚本
2
top: 102
3
toc: true
4
recommend: 1 
5
date: 2019-09-19 22:10:43
6
thumbnail: https://cdn.jsdelivr.net/gh/removeif/blog_image/img/2019/20190919221611.png
7
tags: 
8
categories:

配置

修改 /layout/common/article.ejs

1
<% if (post.layout != 'page') { %>
2
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
3
    <div class="level-left">
4
+       <% if(post.top > 100) { %>
5
+       <div class="level-item tag is-danger" style="background-color: #3273dc;">Pin</div>
6
+       <%} %>
7
        <time class="level-item has-text-grey" datetime="<%= date_xml(post.date) %>"><%= date(post.date) %></time>
8
        <% if (post.categories && post.categories.length) { %>
9
        <div class="level-item">

文章底部文章详细信息显示以及推荐文章模块配置

参考文章: https://removeif.github.io/2019/09/19/%E5%8D%9A%E5%AE%A2%E6%BA%90%E7%A0%81%E5%88%86%E4%BA%AB.html#more

github commit history

实现效果

使用说明

在每篇文章的top comment部分配置recommend值(必须大于0),越大越靠前,相等取最新的,最多取5条。具体设置如下

1
title: 一亩三分地自动签到脚本
2
top: 102
3
toc: true
4
recommend: 1 
5
date: 2019-09-19 22:10:43
6
thumbnail: https://cdn.jsdelivr.net/gh/removeif/blog_image/img/2019/20190919221611.png
7
tags: 
8
categories:

配置

  1. 在 languages/xx.yml 中插入 recommend_posts,具体如下

    1
    widget:
    2
        follow: 'Follow'
    3
        recents: 'Recent'
    4
    +   recommend_posts: 'Recommend Posts'
    5
        links: 'Links'
    6
        tag_cloud: 'Tag Cloud'
    7
        catalogue: 'Catalogue'

    注意所使用的语言所对应的文件

  2. 修改 /layout/common/article.ejs

    1
    <div class="level-start">
    2
        <div class="level-item">
    3
    -        <span class="is-size-6 has-text-grey has-mr-7">#</span>
    4
    +        <i class="fas fa-tags has-text-grey"></i>&nbsp;
    5
            <%- list_tags(post.tags, {
    6
                class: 'has-link-grey ',
    7
                show_count: false,
    8
                
    9
    ..........
    10
    11
        </div>
    12
    </div>
    13
    <% } %>
    14
    + <!-- 部分参考自https://www.alphalxy.com/2019/03/customize-icarus/ -->
    15
    + <% if (!index && post.layout === 'post' && post.copyright !== false) { %>
    16
        + <ul class="post-copyright">
    17
        + <li><strong>本文标题:</strong><a href="<%= post.permalink %>"><%= page.title %></a></li>
    18
        + <li><strong>本文作者:</strong><a href="<%= theme.url %>"><%= theme.author %></a></li>
    19
        + <li><strong>本文链接:</strong><a href="<%= post.permalink %>"><%= post.permalink %></a></li>
    20
        + <li><strong>版权声明:</strong>本博客所有文章除特别声明外,均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明出处!
    21
        + </li>
    22
        + </ul>
    23
        + <br>
    24
        + <%- _partial('widget/recommend_posts') %>
    25
       + <br>
    26
    + br>
    27
     + %>
    28
    <% if (!index && has_config('share.type')) { %>
    29
    <%- _partial('share/' + get_config('share.type')) %>
    30
    <% } %>
  3. /layout/widget 目录下添加 recommend_posts.ejs

    1
    <span class="is-size-6 has-text-grey has-mr-7">#&nbsp;<%= __('widget.recommend_posts') %></span>
    2
    <br>
    3
    <% var i = 1;posts.forEach(post => { %>
    4
    &nbsp;<%=i %>.<a href="<%- url_for((post.link?post.link:post.path)) %>" class="is-size-6" target="_blank"><%= post.title %></a><br>
    5
    <% i++;}) %>
  4. /layout/widget 目录下添加 recommend_posts.locals.js

    1
    module.exports = (ctx, locals) => {
    2
    const { has_config, get_config, get_thumbnail } = ctx;
    3
    const { posts } = ctx.site;
    4
    if (!posts.length) {
    5
    return null;
    6
    }
    7
    const thumbnail = !has_config('article.thumbnail') || get_config('article.thumbnail') !== false;
    8
    const _posts = posts.filter((item, index, arr) => item.recommend != undefined && item.recommend > 0).sort('recommend',-1).sort('recommend',-1).limit(5).map(post => ({
    9
    link: post.link,
    10
    path: post.path,
    11
    title: post.title,
    12
    date: post.date,
    13
    thumbnail: thumbnail ? get_thumbnail(post) : null,
    14
    // fix circular JSON serialization issue
    15
    categories: () => post.categories
    16
    }));
    17
    return Object.assign(locals, { thumbnail, posts: _posts });
    18
    }

页脚访问人数显示修改

实现效果

配置

修改 /layout/common/footer.ejs 卜算子部分.

1
<% if (busuanzi) { %>
2
                <br>
3
                <span id="busuanzi_container_site_uv">
4
                <!-- <%- _p('plugin.visitor', '<span id="busuanzi_value_site_uv">0</span>') %>
5
                </span>
6
                <br> -->
7
                <span id="busuanzi_container_site_pv">
8
                    Visited by <span id="busuanzi_value_site_uv"></span> users with <span id="busuanzi_value_site_pv"></span> times
9
                </span>
10
                </span>
11
                <% } %>

# Recommend Posts
 1.1/1/2019 - 12/31/2019
 2.1/1/2019 - 12/31/2019
 3.82 年生的金智英
 4.Hexo主题折腾日记(二) 添加豆瓣和聊天插件
 5.Hexo主题折腾日记(一) 从cactus到icarus

Comments


修子也好,远野也好,对于情感世界发生的事,很难简单以对和错来衡量,在这样的世界里沉浮,飘落的是情感,不败的总是每年盛开的樱花。 --《情人》

JavaScript NLP Python RL
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×