Hexo博客与Next主题的高级应用

最新推荐文章于 2022-08-01 17:16:07 发布

SkYe231_

最新推荐文章于 2022-08-01 17:16:07 发布

阅读量1.7k

点赞数

文章标签： hexo next 博客 gitpages

本文链接：https://blog.csdn.net/weixin_43921239/article/details/103282408

版权

站点优化

首页显示文章摘要

主题默认设置，首页将会显示每一篇文章的全文，如果想只显示文章摘要，可以在主题配置文件（/themes/next/_config.yml）中这样修改：

# 自动摘要提取设定
auto_excerpt:
	enable: true
	length: 150 # 摘要长度

用户可以在文章中使用标记来精确划分摘要信息，标记之前的堕落将作为摘要显示在首页。

如果文章的Front-Matter(文章开头的配置信息）中有非空的description字段，则该字段的内容会被作为摘要显示。

修改站点页脚

在主题配置文件中修改网站页脚信息：

footer:  # 底部信息区
  since: 2018  # 建站时间
  icon:
    name: heart   # 图标名称
    animated: true   # 开启动画
    color: "#ff0000"   # 图标颜色

  powered:
    enable: true  # 显示由 Hexo 强力驱动
    version: false  # 隐藏 Hexo 版本号

  theme:
    enable: true  # 显示所用的主题名称
    version: false  # 隐藏主题版本号

修改网站 Favicon

Favicon 即浏览器标签左侧的图标。下载自己喜欢的图标置于 themes\next\source\images\ 目录下，命名方式参考主题配置文件中的 favicon 字段。

favicon:
  small: /images/favicon-16x16-next.png  # 小图标
  medium: /images/favicon-32x32-next.png  # 大图标
  apple_touch_icon: /images/apple-touch-icon-next.png  # 苹果图标
  safari_pinned_tab: /images/logo.svg  # safari浏览器标签页图标

添加社交链接

用户可以在主题配置文件中根据样例提示添加个人社交软件链接：

social:
  GitHub: https://github.com/yourname || github
  E-Mail: mailto:yourname@gmail.com || envelope
  Weibo: https://weibo.com/yourname || weibo
  Google: https://plus.google.com/yourname || google
  Twitter: https://twitter.com/yourname || twitter
  FB Page: https://www.facebook.com/yourname || facebook
  VK Group: https://vk.com/yourname || vk
  StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  YouTube: https://youtube.com/yourname || youtube
  Instagram: https://instagram.com/yourname || instagram
  Skype: skype:yourname?call|chat || skype

social_icons:   
  enable: true  # 显示社交软件图标
  icons_only: false  # 显示图标的同时显示文字

站点添加版权协议

在主题配置文件中设置相关字段并选择知识共享协议：

creative_commons: by-nc-sa

文章底部添加版权信息

在目录/next/layout/_macro/添加my-copyright.swig：

`{% if page.copyright %}<div class="my_post_copyright">  <script   src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>  <!-- JS库 sweetalert 可修改路径 -->  <script type="text/javascript"   src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>  <script   src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>  <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}>{{ page.title }}/a></p>  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }}的个人博客">{{ theme.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><i class="fa fa-creative-commons"></i> <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);    clipboard.on(success, $(function(){      $(".fa-clipboard").click(function(){        swal({             title: "",             text: 复制成功,             html: false,          timer: 500,             showConfirmButton: false        });      });    }));  </script>{% endif %}`

在目录next/source/css/_common/components/post/下添加my-post-copyright.styl：

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  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: #a3d2a3;
  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;
}

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

<div>
      {% if not is_index %}
        {% include wechat-subscriber.swig %}
      {% endif %}
</div>

之前添加增加如下代码：

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

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

@import "my-post-copyright"

如果要在该博文下面增加版权信息的显示，需要在 Markdown 中增加copyright: true的设置，类似：

---
title: 
date: 
tags: 
categories: 
copyright: true
---

修改菜单及创建分类页

修改主题配置文件下的menu，按需打开菜单。

menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

虽然现在站点已经有分页，但是仍然不能打开。因为只有了入口，但还没有标签页面，需要在命令行输入如下命令：hexo new page tags新建出标签页。

同样的道理，开启分类页的时候要输入hexo new page categories来新建出分类页。

添加顶部加载条

根目录打开命令行，输入如下命令：

git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace

然后主题配置文件搜索pace字段，修改pace: false为pace: true即可开启加载条功能，修改下方的pace-theme字段还可以修改加载条的样式。

pace:
  enable: true
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: mac-osx

添加动态背景

根目录打开命令行，输入：

git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

主题配置文件搜索canvas-nest字段，enable项设置为true。

canvas_nest:
  enable: false
  # 是否在手机端显示。
  onmobile: true # Display on mobile or not
  # 线条颜色, 默认: `'0,0,0'`；三个数字分别为(R,G,B)
  color: "0,0,255" # RGB values, use `,` to separate
  # 线条透明度（0~1）, 默认: `0.5
  opacity: 0.5 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  # count`: 线条的总数量, 默认: `150`
  count: 99 # The number of lines

增加回到顶部按钮及显示当前浏览进度

主题配置文件搜索b2t字段，将b2t字段的false修改为true即可，（注意此功能只能用于Pisces和Gemini主题）。

# 返回顶部按钮
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

为博客加上萌萌的

首先安装插件，根目录命令行输入npm install --save hexo-helper-live2d
主题配置文件或者博客配置文件最下方添加如下代码：

注意：实测了一下在主题配置文件下用比较好使，但是官方文档中说明在博客配置文件中也可以，可能我配置有问题。

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-<模型名>   
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

修改模型，参考live2d-widget-models目前可用的模型如下：

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

增加本地搜索功能

首先安装插件，根目录命令行输入

npm install hexo-generator-searchdb --save

编辑博客配置文件，新增以下内容到任意位置：

`search:  path: search.xml  field: post  format: html  limit: 10000`

主题配置文件搜索local_search字段，设置enable为true

`# Local searchlocal_search:  enable: true`

配置完成后保存，hexo g、hexo s查看。

404页面

原来的主题没有404页面，加一个也不是什么难事。首先在/source/目录下新建一个404.md，内容如下：

---
title: 404
date: 2019-07-19 16:41:10
type: "404"
layout: "404"
description: "你来到了没有知识的荒原 :("
---

然后在/themes/matery/layout/目录下新建一个404.ejs文件，内容如下：

<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 75vh;
    }
</style>

<div class="bg-cover pd-header about-cover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">
                        404
                    </div>
                    <div class="description center-align">
                        <%= page.description %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

在网站底部加上访问量

打开\themes\next\layout\_partials\footer.swig文件,在copyright前加上画红线这句话：

文章页面优化

修改文章目录导航

取消数字编号

在主题配置文件中关闭目录中的数字编号：

`toc:  number: false  # 关闭目录中的数字编号`

修改文章meta信息

默认主题配置中，标题下方会显示文章的创建时间、文章的修改时间、文章分类信息等元数据，用户可以在主题配置文件中自定义设置需要显示的 meta 元信息：

post_meta:
  item_text: true  # 显示文字说明
  created_at: true  # 显示文章创建时间
  updated_at:
  enabled: false  # 隐藏文章修改时间
  another_day: true  # 只有当修改时间和创建时间不是同一天的时候才显示
  categories: false  # 隐藏分类信息

设置代码高亮主题

NexT 使用 Tomorrow Theme作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties

更改 主题配置文件中的highlight_theme 字段，将其值设定成你所喜爱的高亮主题即可。

全站及文章字数统计及阅读时长

根目录执行：

npm install hexo-symbols-count-time --save

博客配置文件底部添加如下内容，保存。

`symbols_count_time:  symbols: true  time: true  total_symbols: true  total_time: true`

使用hexo-abbrlink 製作永久連結

https://david6686.github.io/blog/silentink/54803/

参考文章

基础搭建

Yearito’s Blog

超详细Hexo+Github博客搭建小白教程

进阶设置

这应该是最全的hexo博客搭建以及next美化教程

Github Pages + Hexo 博客搭建，Next主题个性化修改

Hexo-NexT配置超炫网页效果(主要配置leancloud)

Hexo-Next搭建个人博客（添加统计访客量以及文章阅读量）

LeviDing 的博客

hexo的next主题个性化教程:打造炫酷网站