2021 Hexo+Github+NexT 网站搭建踩坑实录

搭建这个blog踩了挺多坑的，这里整理一下搭建网站的过程，和我自己遇到的一些难解的问题。
大概主要是甩一些链接。

参考https://zhuanlan.zhihu.com/p/60578464

环境准备

安装npm

安装Hexo

安装git

创建GitHub仓库

操作手册

hexo clean   # 清除缓存文件等
hexo g       # 生成页面
hexo s       # 启动预览
hexo d       # 部署到github
hexo s -g    # 生成页面并启动预览

NexT主题

我目前的版本version：7.8.0
可以在 站点根目录->themes->package.json 看到
修改主题：见站点根目录->themes->_config.yml

theme:next67 

安装

很多网上教程都是用的NexT v5的源，但这个库已经不再更新了。用旧版本会产生站点不显示author和description的情况，文章的目录导航也会出问题。
新版本已经整体迁移到新的github仓库。

美化

参考文章：Hexo-Next-主题优化

字数统计

最新的字数统计插件symbols_count_time

浏览次数

打开next主题配置文件\themes\next_config.yml，搜索找到busuanzi_count，把enable设置为true，参考

修改字体大小

在themes\next\source\css_variables\base.styl内搜索font-size

$font-size-smallest       = .8em;  //阅读时间，左侧菜单文字blabla
$font-size-smaller        = .85em;
$font-size-small          = .9em;
$font-size-medium         = .95em;
$font-size-large          = 1em; //正文
$font-size-larger         = 1.125em;
$font-size-largest        = 1.5em;

文章仅显示摘要

在Next主题的_config.yml中把设置打开：(默认安装时就打开了)

# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

在需要截断的地方加入：

<!--more-->

修改链接样式

打开文件 themes/next/source/css/_common/components/post/post.styl，在末尾添加

.post-body p a {
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

代码块复制功能

next主题目录下的config.yml文件中
codeblock下面激活，enable: true

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: normal
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: false
    # Available values: default | flat | mac
    style:

版权信息

在博客文章底部添加版权信息，参考

1. 首先在在主题目录 layout/_macro/ 下，新增文件my-copyright.swig ，填入以下内容：

   {%- if theme.my_copyright.enabled %}
   <div class="my_post_copyright">
   <div style="text-align:center;color: #ccc;font-size:14px;">------ 版权信息 ------</div>
    <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
    
    <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
    <p><span>文章作者:</span><a href="/" title="访问 {{ author }} 的个人博客">{{ author }}</a></p>
    <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm") }}</p>
    <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm") }}</p>
    <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
       <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
    </p>
    <p><span>许可协议:</span><a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
   </div>
   <script> 
      var clipboard = new Clipboard('.fa-clipboard');
      $(".fa-clipboard").click(function(){
        clipboard.on('success', function(){
          swal({   
            title: "",   
            text: '复制成功',
            icon: "success", 
            showConfirmButton: true
            });
    	 });
      });  
   </script>
   {%- endif %}

• 注意：
  • 文章作者author信息是在站点根目录的_config.yml中修改
  • 文章链接需要在站点根目录的_config.yml中修改url: https://luryzhu.github.io为自己的博客域名

2. 在主题目录 source/css/_common/components/post/ 下，新增文件my-post-copyright.styl ，填入以下内容：

   .my_post_copyright {
    padding: 1em 1.5em;
    border: 1px solid #d3d3d3;
    font-size: 0.93rem;
    line-height: 1.6em;
    word-break: break-all;
    background: rgba(255,255,255,0.4);
   }
   .my_post_copyright p{margin:0;}
   .my_post_copyright span {
    display: inline-block;
    width: 5.2em;
    color: #b5b5b5;
    font-weight: bold;
   }
   .my_post_copyright .raw {
    margin-left: 1em;
    width: 5em;
   }
   .my_post_copyright a {
    color: #808080;
    border-bottom:0;
   }
   .my_post_copyright a:hover {
    color: #fc6423;
    text-decoration: underline;
   }
   .my_post_copyright:hover .fa-clipboard {
    color: #000;
   }
   .my_post_copyright .post-url:hover {
    font-weight: normal;
   }
   .my_post_copyright .copy-path {
    margin-left: 1em;
    width: 1em;
    +mobile(){display:none;}
   }
   .my_post_copyright .copy-path:hover {
    color: #808080;
    cursor: pointer;
   }

3. 修改layout/_macro/post.swig，在代码

   <footer class="post-footer">

   这段代码第一次出现之前的地方，添加如下代码段：

   <div>
        {% if not is_index %}
          {% include 'my-copyright.swig' %}
        {% endif %}
   </div>

4. 修改source/css/_common/components/post/post.styl文件，在最后一行增加代码：

   @import "my-post-copyright"

5. 在主题配置文件_config.yml中添加字段

   # 文章末尾添加“版权声明”标记
   my_copyright:
    enabled: true

文章结束

在文章末尾，版权信息之前加入文章结束标志，参考

1. 在目录 themes/next/layout/_macro/ 下添加 passage-end-tag.swig ，内容如下：

<div>
    {% if not is_index %}
        <div style="margin:96px 0 48px 0;text-align:center;color: #ccc;font-size:14px;">
            ------ 本文结束 &#10084 感谢你的阅读 ------
        </div>
    {% endif %}
</div>

2. 打开 themes/next/layout/_macro/post.swig 文件，新增内容如下（跟配置版权信息的内容可以放在一起）：

{### post end tag + copyright ###}
<div>
    {%- if not is_index %}
        {% include 'passage-end-tag.swig' %}
        {% include 'my-copyright.swig' %}
    {%- endif %}
</div>

3. 打开主题配置文件 ，添加代码如下：

# 文章末尾添加“文章结束”标记
passage_end_tag:
  enabled: true

思维导图插件

Github | markmap语法

npm install hexo-markmap

语法：

Markdown语法

图片

图片引用

![PicTitle](图片网络地址)
存在问题没有解决，NexT v7好像不支持图片标题

图床

阿里云OSS图床 半年￥4.8，图个稳定
控制台->对象存储->bucket列表，在bucket里面上传就行了

代码

引用

单行 `语言 code`
code
多行 ```语言 code```

import numpy