Building Hexo-Next Blog with GitHub

Posted on 2023-05-27 Edited on 2023-06-04 In Bloh , Hexo Views: Waline:

Theme GitHub & Docs

Next Theme GitHub

Next Theme Docs

Hexo Next 博客搭建指南

点击显/隐内容

博客搭建指北

为什么他的每一个blog全部自带一个文件夹?

博文自定义排序

打开 \node_modules\hexo-generator-index\lib\generator.js 。

在末尾添加如下代码：

复制

posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) {
        if(a.top == b.top) return b.date - a.date;
        else return b.top - a.top;
    }
    else if(a.top && !b.top) {
        return -1;
    }
    else if(!a.top && b.top) {
        return 1;
    }
    else return b.date - a.date;
});

在博文设置中加入 top: x 即可，会以 top 为第一关键字，时间为第二关键字排序。若 top 为空则视作 -INF 。

top

自定义404页面

首先写一个 \source\404.html 。

至于怎么写html..~~这里地方太小写不下。~~

需要注意的是，一个真正的 404 页面应当在访问时返回 404 代码。在 HTML 中，可以使用 <meta http-equiv="Content-Security-Policy" content="connect-src 'self'"> 实现。（似乎不加这个也会返回 404？不是特别清楚。）

可以参考一下我的：

复制

<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta http-equiv="Content-Security-Policy" content="connect-src 'self'">
        <title>404 Error | ouuan的博客</title>
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    </head>
    <body>
        <div>
            <p style="text-align: center;"><strong>您可能访问了错误的网址</strong><img src="/images/5bd4705dd844f.jpg"></p>
            <br><br>
            <p style="text-align: center;"><strong>您现在可以：</strong></p>
            <p style="text-align: center;"><a href="/"><strong>回到博客主页</strong></a></p>
            <p style="text-align: center;"><a href="javascript:history.go(-1);"><strong>返回上一页</strong></a></p>
            <br><br>
            <p style="text-align: center;"><strong>如果您在登录 Gitalk 时遇到此问题，请尝试<a href="/%E5%A5%BD%E7%94%A8%E7%9A%84%E7%BD%91%E7%AB%99/">换一篇博客</a>登录</strong></p>
        </div>
    </body>
</html>

然后，如果直接这样发布，html 会被渲染，就跟一个自定义页面（hexo new page）一样了。

所以要修改根目录下的 _config.yml，在 skip_render: 后添加 404.html，如果有多项用 - 隔开：

复制

1
2
3

skip_render:
 - README.md
 - 404.html

发布完成后，访问一个错误的网址，比如 你的域名/qaq 就可以查看效果了。

一言（ヒトコト）

大约是这个。

网上没找到教程，自己随便瞎研究了一波，所以方法比较丑陋，仅供参考..

本来想稍微写一下自己研究的经过，想了想自己也没完全搞清楚，就来一波授人以鱼吧…

\themes\next\layout\_macro\sidebar.swig:

复制

……
  <aside id="sidebar" class="sidebar">

    <div class="sidebar-inner">
      <div class="hitokoto-block">
        <div class="hitokoto-inner hitokoto-comma hitokoto-left-comma">“</div>
        <div class="hitokoto-inner hitokoto-content"><b><span><span id="hitokoto-content"></span></span></b></div>
        <div class="hitokoto-inner hitokoto-comma hitokoto-right-comma">”</div>
      </div>
      <div id="hitokoto-from"></div>
      <div class="hitokoto-bottom">
        <a id="hitokoto-link" href="https://hitokoto.cn/">Hitokoto</a>&nbsp;&nbsp;&nbsp;
        <button id="hitokoto-like" title="通过给句子点赞可以增加其出现概率，由于技术原因并不能在博客中显示赞数与点赞是否成功的信息（红心表示成功发送点赞请求，但如果同 IP 重复点赞就会失败），如需查看可以点击左边的“Hitokoto”链接。"><i class="menu-item-icon fa fa-fw fa-heart"></i></button>
      </div>
    </div>

    <div style="height: 15px"></div>

    {% if theme.sidebar.onmobile %}
……

\themes\next\layout\_scripts\commons.swig:

复制

……
<script type="text/javascript">
  function hitokotoLike(x, y) {
        $.ajax({
            url: "https://hitokoto.cn/Like",
            type: "GET",
            data: "ID=" + x,
            dataType: "jsonp",
            success: function(data) {
                alert(data.message);
                $(y).css('color', 'red');
            },
            error: function() {
                console.log('Hitokoto Like Request Error.');
                $(y).css('color', 'red');
            }
        });
    }
    $.get('https://v1.hitokoto.cn/?c=a', function(data) {
        $('#hitokoto-content').css('display', '').text(data.hitokoto);
        $('#hitokoto-from').css('display', '').text('——' + data.from);
        $('#hitokoto-from').attr('title', '上传者: ' + data.creator);
        $('#hitokoto-link').attr('href', 'https://hitokoto.cn/?id=' + data.id);
        document.getElementById('hitokoto-like').onclick = function() { hitokotoLike(data.id, '#hitokoto-like'); }
    });
</script>

\themes\next\source\css\_custom\custom.styl:

复制

……
.sidebar {
    background: rgba(0, 0, 0, 0);
}

.hitokoto-block {
    width: 200px;
    display: table;
    padding: 0 10px;
}

.hitokoto-inner {
    text-align: left;
    display: table-cell;
}

.hitokoto-comma {
    color: #B2B7F2;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Times New Roman', serif;
}

.hitokoto-left-comma {
    vertical-align: top;
}

.hitokoto-right-comma {
    vertical-align: bottom;
}

.hitokoto-content {
    width: 176px;
    color: burlywood;
    text-indent: 2em;
    vertical-align: middle;
    padding: 0.8em 0.2em 1em 0.2em;
}

#hitokoto-from {
    text-align: right;
    font-size: 0.8em;
    color: black;
}

.hitokoto-bottom {
    margin-top: 15px;
    font-size: 0.8em;
    color: black;
}

大约就这样，省略号表示文件中本来就有的其它部分。不保证在其他人电脑上可以用。大致思路就是搞个空 div 指定一个 id，用 js 往里面塞东西。所以即使我这个“鱼”不能直接用大约也是可以稍微研究研究来用的。

博文复制提醒

在 \themes\next\layout\_scripts\commons.swig 中加入：

复制

<script type="text/javascript">
    $('.post-body').bind('copy', function() {
        alert('本博客内容欢迎分享（将本博客的原文地址分享到其它网站），允许部分摘录并在醒目位置附上原文链接，未经许可禁止任何形式的全文转载。');
    });
</script>

更改 CSS

大概按照谢益辉博客魔改了一下。

CSS Files。

Emoji

详见 crimx/hexo-filter-github-emojis 🤔 。

安装的时候遇到了一些问题，具体来说执行 npm install hexo-filter-github-emojis --save 不会安装 peer dependencies，需要手动安装（从警告信息就可以看出需要安装哪些）。而在安装 canvas 时出现错误，更新 node-pre-gyp 后得到了解决。

大约是为了保证用户能够看到，很多显示 emoji 的库（如 emojione）都是使用 cdn 加载图片，然而我还是觉得 Win 10 本身的 emoji 样式比较好看，Linux 的也不错，所以又稍微魔改了一下，改成了显示 Unicode 字符而非图片。具体来说，将 \node_modules\hexo-filter-github-emojis\index.js 中的 renderEmoji 函数中的全部内容替换成了 return emojis[name].codepoints ? emojis[name].codepoints.map(c => &#x${c};).join('') : ' '; 。

撰写博客前的准备

打开根目录下的 _config.yml ，将 post_asset_folder 设为 true。

这样就可以把图片放到博客里而不用其它图床了。

然后把 \source\_posts\hello-world.md 删除。

博文的撰写

新建一篇博客：hexo new "博文标题"。

然后等几秒钟，在 \source\_posts 文件夹下，就会生成 博客名 这个文件夹（如果你把 post_asset_folder 设为 true 了）以及 博客名.md。

撰写博客就是编辑 博客名.md。

这个文件的开头是博客的一些设置，可以在 \scaffolds\posts.md 中修改默认设置，我的默认设置是：

复制

---
title: {{ title }}
date: {{ date }}
tags: 
top: 
---

然后就可以写 Markdown 格式的文章了。（top 是自定义文章排序，上文中介绍过）

post

需要注意的是，在洛谷代码块可以不加”cpp”，但在 hexo 上，一定要加上”cpp”：

cpp

复制

#include <iostream>
int main()
{
    cout<<"hello world!"
}

复制

#include <iostream>
int main()
{
    cout<<"hello world!"
}

引用本地图片

引用链接/网络上的图片格式与普通 Markdown 相同（[链接名称](链接地址) 和 ![图片描述](图片地址)），引用本地图片需要把 post_asset_folder 设为 true ，然后把图片放在与博客同名的文件夹中，然后只用 ![图片描述](图片文件名) 就可以引用了。