嘘~ 正在从服务器偷取页面 . . .

blog优化


前言

这篇文章主要用于一些细节方面的优化说明(比如首页 banner 图的切换问题)。
具体属性请根据实际情况修改!!!

首页banner图随机显示

参考文档1:自定制 banner 图修改
参考文档2:hexo-matery主题配置
参考文档3:Math.random()函数

首先,需要在主题配置文件themes\hexo-theme-matery\_config.yml中把bannerenable属性改为true

然后在themes\hexo-theme-matery\layout\_partial\bg-cover-content.ejs中插入以下代码:

<% if (theme.banner.enable) { %>
    <script>
        // 每天切换 banner 图.  Switch banner image every day.
        //随机切换 banner 图函数。
        function getRandomIntInclusive(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值 
        }
        //适用于 banner 文件夹下的图片格式统一且命名方式为数字递增的情形
        var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + getRandomIntInclusive(0,45) + '.png';
        $('.bg-cover').css('background-image', 'url(' + bannerUrl + ')');
    </script>
<% } else { %>
    <script>
        //下面那个图片路径是 banner 改为 false 属性时的 banner 图路径
        var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/0.png') %>";
        $('.bg-cover').css('background-image', 'url(' + bannerUrl + ')');
    </script>
<% } %>

事实上,你同样可以把这段代码放到 404.ejs 里面,实现404页面背景图的切换。


社交链接添加 Steam 链接

参考文档1:修改社交链接
参考文档2:Matery主题配置文件
参考文档3:Matery主题social-link配置

首先,打开 sociallink 配置文件,相对路径是themes\hexo-theme-matery\layout\_partial\social-link.ejs,在末尾 RSS 前面一块添上以下代码

<% if (theme.socialLink.steam) { %>
    <a href="<%= theme.socialLink.steam %>" class="tooltipped" target="_blank" data-tooltip="访问我的Steam" data-position="top" data-delay="50">
        <i class="fab fa-steam"></i>
    </a>
<% } %>

然后在 主题配置文件 找到socialLink属性,在 rss 属性前添加如下代码

steam: https://steamcommunity.com/id/xxx #后面这个“xxx”填的是你的steam id

hexo 三连 hexo clean、hexo g、hexo s 后,你就可以在首页看到实际效果了。


动态标题

参考文档:Hexo-Matery主题美化

在 layout.ejs 下插入以下代码,相对路径:themes\hexo-theme-matery\layout\layout.ejs

<script type="text/javascript">
    var OriginTitile = document.title,st;
    document.addEventListener("visibilitychange", function () {
        document.hidden ? (document.title = "网页好像崩溃了(T_T)", clearTimeout(st)) : (document.title = "无事发生~~o(* ̄▽ ̄*)ブ", st = setTimeout(function () {
            document.title = OriginTitile
        }, 3e3))
    })
</script>

hexo 三连 hexo clean、hexo g、hexo s 后,你就可以看到实际效果了。


文章时效性显示(未完成)

下面是主要功能的 js 函数

(function () {
    var times = document.getElementsByTagName('time');
    if (times.length === 0) {
        return;
    }
    var posts = document.getElementsByClassName('post-content');
    if (posts.length === 0) {
        return;
    }

    var pubTime = new Date(times[0].dateTime); /* 文章发布时间戳 */
    var now = Date.now() /* 当前时间戳 */
    var interval = parseInt(now - pubTime)
        /* 发布时间超过指定时间(毫秒) */
    if (interval > 3600 * 24 * 30 * 1000) {
        var days = parseInt(interval / 86400000)
        posts[0].innerHTML = '<div class="note note-warning" style="font-size:0.9rem"><p>' +
            '<div class="h6">文章时效性提示</div><p>这是一篇发布于 ' + days + ' 天前的文章,部分信息可能已发生改变,请注意甄别。' +
            '</p></p></div>' + posts[0].innerHTML;
    }
})();

创建相册页面

参考文档:修改 matery 原有主题相册 | 过客~励む (yafine-blog.cn)

嗯,没有了。

跟着参考文档来操作就行,个人当初就是跟着这个一步步来的,自觉再写一份意义不大。

具体效果可以看看我的相册


文章卡片优化

这个本来是作为我的一篇新文章“Hexo 博客按更新时间排序”的后面优化部分来讲的,那篇文章主要也是自己根据说明修改属性发现没有成功运行,搞了好几个小时甚至动了依赖库的 js ,后面才发现是自己打错单词了…

通过对于 themes\hexo-theme-matery\layout\index.ejs 的修改,我们可以在文章卡片中添加文章的修改时间。

找到如下代码块:

<div class="publish-info">
          <span class="publish-date">
            <i class="far fa-clock fa-fw icon-date"></i><%= date(post.date, config.date_format) %>
        </span>
        <span class="publish-author">
         <% if (post.categories && post.categories.length > 0) { %>
        <i class="fas fa-bookmark fa-fw icon-category"></i>
        <% post.categories.forEach(category => { %>
            <a href="<%- url_for(category.path) %>" class="post-category">
            <%- category.name %>
            </a>
        <% }); %>
    <% } else if (post.author && post.author.length > 0) { %>
        <i class="fas fa-user fa-fw"></i>
        <%- post.author %>
    <% } else { %>
        <i class="fas fa-user fa-fw"></i>
        <%- config.author %>
    <% } %>
    </span>
</div>

在第 4 行插入以下代码:

&nbsp;<i class="fas fa-history fa-fw icon-date"></i><%= date(post.updated,config.date_format)%>

修改后是这样的

<div class="publish-info">
          <span class="publish-date">
            <i class="far fa-clock fa-fw icon-date"></i><%= date(post.date, config.date_format) %>
            &nbsp;
            <i class="fas fa-history fa-fw icon-date"></i><%= date(post.updated,config.date_format)%>
        </span>
        <span class="publish-author">
         <% if (post.categories && post.categories.length > 0) { %>
        <i class="fas fa-bookmark fa-fw icon-category"></i>
        <% post.categories.forEach(category => { %>
            <a href="<%- url_for(category.path) %>" class="post-category">
            <%- category.name %>
            </a>
        <% }); %>
    <% } else if (post.author && post.author.length > 0) { %>
        <i class="fas fa-user fa-fw"></i>
        <%- post.author %>
    <% } else { %>
        <i class="fas fa-user fa-fw"></i>
        <%- config.author %>
    <% } %>
    </span>
</div>

然后我们便会发现,文章具体页面底部也有文章卡片,对应文件进行修改即可。

打开 themes\hexo-theme-matery\layout\_partial\prev-next.ejs 查找 page.date

/*大概在111行 & 233行*/
<span class="publish-date">
    <i class="far fa-clock fa-fw icon-date"></i><%= date(page.date, config.date_format) %>
</span>

改为以下代码:

<span class="publish-date">
    <i class="far fa-clock fa-fw icon-date"></i><%= date(page.date, config.date_format) %>
    &nbsp;
    <i class="fas fa-history fa-fw icon-date"></i><%= date(page.updated,config.date_format)%>
</span>

查找 page.next.datepage.prev.date 并进行修改

/*原代码*/

<span class="publish-date">
    <i class="far fa-clock fa-fw icon-date"></i><%= date(page.next.date, config.date_format) %>
</span>

<span class="publish-date">
    <i class="far fa-clock fa-fw icon-date"></i><%= date(page.prev.date, config.date_format) %>
</span>

/*修改后*/

<span class="publish-date">
    <i class="far fa-clock fa-fw icon-date"></i><%= date(page.next.date, config.date_format) %>
    &nbsp;
    <i class="fas fa-history fa-fw icon-date"></i><%= date(page.next.updated,config.date_format)%>
</span>

<span class="publish-date">
    <i class="far fa-clock fa-fw icon-date"></i><%= date(page.prev.date, config.date_format) %>
    &nbsp;
    <i class="fas fa-history fa-fw icon-date"></i><%= date(page.prev.updated,config.date_format)%>
</span>

然后我们再次发现,标签页跟分类页也是存在文章卡片的,还能怎么办,继续改呗。

<!--themes\hexo-theme-matery\layout\tag.ejs-->

<span class="publish-date">
    <i class="far fa-clock fa-fw icon-date"></i><%= date(post.date, config.date_format) %>
</span>
/*修改为*/
<span class="publish-date">
    <i class="far fa-clock fa-fw icon-date"></i><%= date(post.date, config.date_format) %>
    &nbsp;
    <i class="fas fa-history fa-fw icon-date"></i><%= date(page.updated,config.date_format)%>
</span>

<!--themes\hexo-theme-matery\layout\category.ejs-->

<span class="publish-date">
    <i class="far fa-clock fa-fw icon-date"></i><%= date(post.date, config.date_format) %>
</span>
/*修改为*/
<span class="publish-date">
    <i class="far fa-clock fa-fw icon-date"></i><%= date(post.date, config.date_format) %>
    &nbsp;
    <i class="fas fa-history fa-fw icon-date"></i><%= date(page.updated,config.date_format)%>
</span>

文章作者: 目棃
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 目棃 !
评论
  目录