Hexo+Next8的升级踩坑之旅

简介: Hexo+Next8的升级踩坑之旅

添加留言板

  1. 在菜单栏添加留言板栏

添加一个新的page

执行命令

hexo new page guestbook

进入 source/guestbook/index.md。加入你想显示的内容,如:

---
title: 留言板
date: 2021-05-2 13:34:29
---
# 欢迎来到我的博客!
> 欢迎在这里留言!任何问题都可以在这里留言,博主会及时回复的,添加email可以收到回复提示

进入 _config.next.yml,

找到menu栏目,添加留言板功能:

menu:
  guestbook: /guestbook/ || fa fa-book

NEXT8图标支持font awesome,可以按自己喜好修改。

如果有多语言支持需求,可以更改 themes/next/languages 下对应语言的翻译。

zh-CN.yml:

menu:
  guestbook: 留言板
  1. 重新生成页面即可
hexo clean;hexo g;hexo d

文章置顶

由于Next升级到8.22,这部分与next7有一些出入,过更新一下

在博客根目录下安装置顶插件

cnpm uninstall hexo-generator-index --save
cnpm install hexo-generator-index-pin-top --save
cnpm install hexo-util --save  //由于光执行上面的会报错,需额外下载hexo-util

在需要置顶的文章头加入top: true

例如

---
title: test
date: 2021
categories: 测试
top: true
---

然后在文章标题下面添加一个置顶标签样式

打开:/blog/themes/next/layout/_macrothemes\hexo-theme-next\layout\_partials\post\post-meta.njk文件,定位到div class="post-meta"标签下,插入如下代码:

{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=7D26CD>置顶</font>
  <span class="post-meta-divider">|</span>
{% endif %}

添加 twikoo评论

  1. 首先云函数部署
  2. 修改配置文件

暂不支持 NexT 8 以下的版本,请先升级到 NexT 8。然后在 Hexo 项目根目录执行 npm install hexo-next-twikoo,然后在配置中添加。为了这个评论,小牛特地将next7升级到next8

twikoo:
  enable: true
  visitor: true
  envId: xxxxxxxxxxxxxxx # 腾讯云环境id
  # region: ap-guangzhou # 环境地域,默认为 ap-shanghai
  1. 开启管理面板

进入环境-登录授权 (opens new window),点击“自定义登录”右边的“私钥下载”,下载私钥文件

用文本编辑器打开私钥文件,复制全部内容

点击评论窗口的“小齿轮”图标,粘贴私钥文件内容,并设置管理员密码。

里面可以配置邮件回复的通知,等许多自定义的选项。注意的是 你的邮件服务邮箱和你常用的邮箱不要设为一样,不然邮箱无法通知自己(虽然邮箱可以自己发给自己,但twikoo就不行,真是奇怪。)

目前来看,使用体验还是不错的,但不知道能撑多久~~

添加网易云 小插件

  1. 首先登录网易云,找一个的歌单(保证有版权),点击生成外链

然后复制代码:

  1. 将网易云代码添加到Next主题

小牛这部分,采用的是网易云外链播放器插件,并简单的魔改了样式和增加了js动作(可以展开和搜缩播放器)

添加到source_data\head.njk:

<script type="text/javascript" src="/js/cursor/zjAdd.js"></script>
<div class="musicwyy2" style="position:fixed;left:0px;bottom:0px;z-index:105;opacity: 1; 
    width: 30px;
    height: 110px;    font-size: 15px;
    font-family: 'Long Cang';">
  <button type="button" style="
    width: 30px;
    height: 90px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-width: 0px;
    background: #f5f5f5;
    z-index:200;" onclick="musicChange()"> 播放器</button>
</div> 
<div class="musicwyy1" style="position:fixed;left:0px;bottom:0px;z-index:100;opacity: 1; 
    width: 300px;
    height: 110px;font-size: 0;">
  <div class="aplayer-miniswitcher" style="
    height: 110px;
    width: 20px;
    display: inline-block; overflow: hidden;">
  </div>
  <div style="
    width: calc(100% - 30px);
    height: 110px;
    display: inline-block;" id="musicZJ">
    <iframe id="wyyZj" frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=110 
        src="//music.163.com/outchain/player?type=0&id=6740519472&auto=1&height=90"
        ></iframe>
  </div>
</div>

新建文件 themes\hexo-theme-next\source\js\cursor\zjAdd.js(如果路径 不存在,就新建):

function musicChange() {
    // let element = document.querySelector(".jtZj");
    // let rotate = document.querySelector(".jtZj-rotate");
    // if(rotate == null) {
    //     element.classList.add("jtZj-rotate");
    // }else {
    //     element.classList.remove("jtZj-rotate");
    // }
    var box = document.getElementById("musicZJ");
    var element = document.querySelector(".musicwyy1");
    if(box.style.display == "none") {
        box.style.display = "inline-block";
        element.style.zIndex = 100;
    }else {
        box.style.display = "none";
        element.style.zIndex = -100;
    }
}

其中:

把自己的代码 替换下面的部分即可

<iframe id="wyyZj" frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=110 
        src="//music.163.com/outchain/player?type=0&id=6740519472&auto=1&height=90"
        ></iframe>

最终效果:


本篇文章到这里就结束啦,如果喜欢的话,多多支持,欢迎关注!

相关文章
|
6月前
|
机器学习/深度学习 人工智能 开发工具
《Git 简易速速上手小册》第10章:未来趋势与扩展阅读(2024 最新版)
《Git 简易速速上手小册》第10章:未来趋势与扩展阅读(2024 最新版)
72 3
|
12月前
|
前端开发 JavaScript API
wordpress插件开发踩坑记
想要使用 REST API 需要自己额外安装插件:WordPress REST API,现在 WordPress 5.0以上的版本已经默认支持 REST API了,不需要额外去安装插件
114 0
|
SQL XML 编解码
手把手教你搭建SpringCloud项目(一)图文详解
手把手教你搭建SpringCloud项目(一)图文详解
3973 1
|
缓存 JavaScript 前端开发
gulp安装教程(简单的前端自动化教程)
gulp安装教程(简单的前端自动化教程)
256 0
|
JavaScript Shell 开发工具
使用vuepress从零开始搭建我的技术文档|已部署到线上
几天前为了深入学习JS我手写了一个JS工具库,并且发布到了npm上 我把具体步骤,从零搭建再到发布上线的全部细节都写在这这一片文章上了:手写了一个JS工具库并发布到npm 既然已经写了JS工具库,那必须要有文档呀,要不然谁知道怎么使用!!! 所以今天这篇文章就介绍一下怎么使用vuepress2.x搭建一个文档,内容不深,小白也能看懂,因为我只是小小的写了一下 ^_^嘿嘿 文档效果可以点击此处查看☞:LearnJTs文档
656 1
使用vuepress从零开始搭建我的技术文档|已部署到线上
|
前端开发 JavaScript ice
flexiwan项目踩坑实践
flexiManage是以色列一家初创公司flexiWAN开源的基于SD-WAN平台的应用层的框架,包括flexiManage服务端框架以及硬件侧的flexiAgent框架,然而其并没有开源前端框架,为了验证其SD-WAN方案的可行性,需要快速搭建一个前端应用
263 0
|
JSON 缓存 NoSQL
重新更新VScode配置(C/C++)——负责任、手把手教学,亲测有效
对于C/C++的编程环境来说,目前我们所接触到的、所用到的,除了vim以外,大众用的、尤其是学生群体用的主要是有三种。
1304 1
重新更新VScode配置(C/C++)——负责任、手把手教学,亲测有效
|
缓存
hexo 博客搭建踩坑系列
hexo 博客搭建踩坑系列
|
JavaScript
来自阿里的,7天学会(废)nodejs教程
当然这也是我们成为全栈必须要掌握的知识。 今天推荐一个适合新手的免费node学习教程 - 《7天学会nodejs》。
183 0
来自阿里的,7天学会(废)nodejs教程
|
JavaScript Linux 网络安全
[还不会搭建博客吗?]centos7系统部署hexo博客新手入门-进阶,看这一篇就够了
写这一篇文章也不容易,前前后后2个的工作日是有的。也可能我一个新人花费的时间多一点,不过现在自己也写技术博客,才明白用心的每一位作者都不容易。需要**学习 、测试、记录、写注释、规划目录结构、调整格式**。 目录结构是昨晚(2022/4/14)想到de包含:介绍、详细版、**简洁版**、卸载、**错误记录**。特点是包含**简洁版、错误记录**
543 1
[还不会搭建博客吗?]centos7系统部署hexo博客新手入门-进阶,看这一篇就够了