欢迎光临
我们一直在努力

[mcj]hexo-next安装教程

华为学生服务器每月仅需9元!
文章目录
[隐藏]

版本信息

hexo


next 6.0.6
npm: 6.4.1
cnpm:

设置步骤

1 设置阅读次数,并改为热度

新版本的next主题已经集成了LeanCloud,所以需要修改的地方很少,首先打开模版配置文件,然后找到leancloud_visitors:,把false改为true,然后填上LeanCloud的id和key

这样就打开了,不过这样的话,默认文字是:阅读次数,打开/next/languages/zh-CN.yml,把里面的阅读次数改为热度

打开/next/layout/_macro/post.swig,修改{# LeanCould PageView #}部分为:

改为热度

完成!

2 打开评论功能

这个版本的next也集成了评论功能,具体:
打开模版配置文件,找到valine,设置为true,然后填上LeanCloud的id和key即可开启。

评论系统

它会自动在Lean中添加一个Comment的类。

完成!

3 在右上角或者左上角实现fork me on github

实现效果图
enter description here

enter description here

具体实现方法

点击这里 或者 这里挑选自己喜欢的样式,并复制代码。 例如,我是复制如下代码:
enter description here
然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面),并把href改为你的github地址

4 添加动态背景

就像这种的:
enter description here

具体设置可以看这篇:
【mcj】next主题如何添加动态背景

5 实现点击出现桃心效果

具体实现方法
在网址输入如下

http://7u2ss1.com1.z0.glb.clouddn.com/love.js
1
然后将里面的代码copy一下,新建love.js文件并且将代码复制进去,然后保存。将love.js文件放到路径/themes/next/source/js/src里面,然后打开\themes\next\layout_layout.swig文件,在末尾(在前面引用会出现找不到的bug)添加以下代码:

<!– 页面点击小红心 –>

<script type=”text/javascript” src=”/js/src/love.js”></script>

6 修改文章底部的那个带#号的标签

enter description here

具体实现方法
修改模板/themes/next/layout/_macro/post.swig,搜索 rel=”tag”>#,将 # 换成<i class=”fa fa-tag”></i>

7 在每篇文章末尾统一添加“本文结束”标记

在路径 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件,并添加以下内容:

打开\themes\next\layout_macro\post.swig文件,在post-body 之后, post-footer (post-footer之前有两个DIV)之前添加如下代码:

enter description here

打开主题配置文件_config.yml在末尾添加以下字段:

到此,就大功告成了.

8 修改作者头像并旋转

最新版6.6已经集成了头像旋转功能,搜索avatar,然后将rotated置为true即可。

头像设置打开 主题配置文件 找到Sidebar Avatar字段

这是头像的路径,只需把你的头像命名为header.jpg(随便命名)放入themes/next/source/images中,将avatar的路径名改成你的头像名就OK啦!

旋转:打开\themes\next\source\css_common\components\sidebar\sidebar-author.styl,在里面添加如下代码:

9 修改代码块自定义样式

具体实现方法
打开\themes\next\source\css\_custom\custom.styl,向里面加入:(颜色可以自己定义)

10 主页文章添加阴影效果

没用这个,因为用了之后,文章间距会很大

打开\themes\next\source\css_custom\custom.styl,向里面加入:

11 网站底部字数统计

切换到根目录下,然后运行如下代码

npm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig文件尾部加上:

12 实现统计功能

效果图

输入:npm install hexo-symbols-count-time --save

然后,打开站点配置文件,输入:

再打开模版配置文件

然后重启服务

13 添加顶部加载条

打开/themes/next/layout/_partials/head.swig文件,添加红框上的代码

enter description here

代码如下:

但是,默认的是粉色的,要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码(接在刚才link的后面)

不过现在next 6 已经集成了,直接在模版配置文件中找到:pace:,把false改为true,然后进入:E:\01 个人文档\荔枝面条\07 学习资料\07 代码\mcj686pages\themes\next\source\lib 输入:
git clone https://github.com/theme-next/theme-next-pace pace重新生成即可。

14 在文章底部增加版权信息

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

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

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

之前添加增加如下代码:

enter description here

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

保存重新生成即可。
如果要在该博文下面增加版权信息的显示,需要在 Markdown 中增加copyright: true的设置,类似:

小技巧:如果你觉得每次都要输入copyright: true很麻烦的话,那么在/scaffolds/post.md文件中添加:

然后记得修改hexo配置文件中的url为网站地址:
url: http://mcj686.gitee.io

完成。

15 隐藏网页底部powered By Hexo / 强力驱动

打开themes/next/layout/_partials/footer.swig,使用或者隐藏之间的代码即可,或者直接删除。位置如下:

16 添加密码功能

打开themes->next->layout->_partials->head.swig文件,在以下位置插入这样一段代码:
插入位置

enter description here

17 添加分享功能

进到next目录,然后:
git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton

完成之后,打开模版配置文件,设置:
设置分享功能

18 添加萌萌哒宠物

首先安装插件:npm install --save hexo-helper-live2d
然后,选个宠物,比如miku
将以下代码添加到主题配置文件_config.yml,修改miku:

然后下载模型,模型名称可以到这里参考,一些模型的预览可以在这里

所有模型列表如下:

19 博文置顶

首先:
npm install hexo-generator-index --save
然后,修改 hero-generator-index 插件,把文件:node_modules/hexo-generator-index/lib/generator.js 内的代码替换为:

然后,打开/layout/_macro/post.swig,找到<div class=”post-meta”>,在下面添加:

在文章中添加 top 值,数值越大文章越靠前,如:

20 添加打赏功能

先生成微信和支付宝的二维码,然后,把图片放到next/source/images下 ,找到主题配置文件,在最后加上:

21 DaoVoice 在线联系

参考此文:
https://hoxis.github.io/hexo-next-daovoice.html

22 浏览页面的时候显示当前浏览进度

打开themes/next/_config.yml,搜索关键字scrollpercent,把false对划线true

23 本地搜索

首先安装:npm install hexo-generator-searchdb --save

然后:打开themes/next/config.yml,搜索关键字localsearch,设置为true。

24 文章顶部显示更新时间

打开主题配置文件config.yml,关键字搜索updatedat设置为true:

参考:https://www.jianshu.com/p/ae3a0666e998

25 给代码块增加复制功能

下载clipboard.min.js
保存文件clipboard.js / clipboard.min.js ,目录如下:\next\source\lib\clipboard

然后,在.\themes\next\source\js\src目录下,创建clipboard-use.js,文件内容如下:

在.\themes\next\source\css_custom\custom.styl样式文件中添加下面代码:

在.\themes\next\layout_layout.swig文件中,添加引用(注:在 swig 末尾或 body 结束标签(</body>)之前添加):

26 新建404界面

在站点根目录下,输入hexo new page 404,在默认Hexo站点下/source/404/index.md

如果你不想编辑属于自己的404界面,可以显示腾讯公益404界面,代码如下:

27 静态资源压缩(未采用)

在站点目录下:
cnpm install gulp@3.9.1 -g
cnpm install gulp@3.9.1

然后,安装插件:

cnpm install gulp-minify-css --save
cnpm install gulp-uglify --save
cnpm install gulp-htmlclean --save
cnpm install gulp-imagemin --save

在Hexo站点下添加gulpfile.js文件,文件内容如下:

需要只在每次执行generate命令后执行gulp就可以实现对静态资源的压缩,完成压缩后执行deploy命令同步到服务器:

28 修改背景

内容板块透明
博客根目录 themes\next\source\css_schemes\Pisces_layout.styl 文件 .content-wrap 标签下 background: white修改为:
background: rgba(255,255,255,0.7); //0.7是透明度

菜单栏背景
博客根目录 themes\next\source\css_schemes\Pisces_layout.styl 文件 .header-inner 标签下 background: white修改为:
background: rgba(255,255,255,0.7); //0.7是透明度

站点概况背景
博客根目录 themes\next\source\css_schemes\Pisces_sidebar.styl 文件 .sidebar-inner 标签下 background: white修改为:
background: rgba(255,255,255,0.7); //0.7是透明度

然后修改博客根目录 themes\next\source\css_schemes\Pisces_layout.styl 文件 .sidebar 标签下 background: $body-bg-color修改为:
background: rgba(255,255,255,0.7); //0.7是透明度

按钮背景
博客根目录 themes\next\source\css\_common\components\post\post-button.styl 同上修改对应位置为 background: transparent;

29 设置置顶标志

打开:/blog/themes/next/layout/_macro 目录下的post.swig文件,定位到<div class=”post-meta”>标签下,插入如下代码:

30 添加分类

使用: hexo new page categories 新建一个 分类 页面。
主题的 _config.yml 文件中的 menu 中进行匹配

31 添加标签云

下载tagcanvas.js
放入对应目录
将下载的 tagcanvas.js 放入主题目录 themes/NexT/source/js/custom/tagcanvas.js,custom 为新建文件夹。

新建标签云文件,引用 js
在 themes/NexT/layout/_partials 下建一个 plugin 文件夹,在该目录下 touch 一个名为 tagcanvas.swig 的文件,并写入如下内容:

使用 tagcanvas.swig
在 themes/NexT/layout/page.swig 中作如下修改:
enter description here

替换红框中原来位置的 div 标签为如下:

参考:http://www.goat1000.com/tagcanvas-styling.php
https://www.vanjay.cn/2017/03/19/%E4%B8%BA-NexT-%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E7%90%83%E5%BD%A2%E6%A0%87%E7%AD%BE%E4%BA%91/

32 添加百度站长统计

先准备一些代码。站长统计,注册并获取统计代码

修改底栏:找到\themes\next\layout_partials\footer.swig文件,加入上面这段代码

33 增加rating评星

https://widgetpack.com
在这里注册,然后会有一个ID号,然后在主题配置文件中找rating,设为true,然后把id’填上就行了。

34 加入已运行时间

首先在文件~/blog/themes/next/layout/_custom/sidebar.swig中加入下面代码,Date的值改为你自己的:

然后修改~/blog/themes/next/layout/_macro/sidebar.swig:

这样就可以了,当然,要是不喜欢颜色,感觉不好看,就可以在上文所提的custom.styl加入:

35 使用hexo-neat压缩静态页面

为什么要压缩页面静态资源
对于个人博客来说,优化页面的访问速度是很有必要的,如果打开你的个人站点,加载个首页就要十几秒,页面长时间处于空白状态,想必没什么人能够忍受得了吧。我个人觉得,如果能把页面的加载时间控制在三四秒内,就很不错了。

那么怎么提高hexo这个静态博客的页面加载速度呢?可以从以下的几个方面去入手:
将js文件尽可能放置到body的闭合标签之前,因为在加载或者引入js文件时是阻塞式的,如果我们在页面的最开始就引入这些js文件,而这些文件又比较大,会造成页面在渲染时长时间处于白屏状态。
尽量避免去引用访问速度非常低下的cdn或者图片,可以改用访问速度更快的cdn,或者将难以迅速加载的图片保存到自己的站点目录下,以免在加载图片时耗费了大量的时间,最后还加载不出来。
对页面的静态资源进行压缩,包括css、js和html等文件。我们自己添加的css和js文件为了可读性,往往会有很多换行和空格,这些对于浏览器来说并没什么卵用,甚至还会降低渲染页面的速度。至于html文件,由于Markdown转成html的bug,会导致页面存在大量的空白,如果你查看下页面的源代码,就会发现这些大量的空白符,十分难看。这也会造成页面渲染的性能问题。
hexo的压缩静态资源插件
网上有很多相关的博文,常规的做法是使用gulp来进行压缩,gulp是Node.js下的自动构建工具,通过一列的task执行步骤进行自动流程化处理。

使用这种方法会比较麻烦,每次压缩时还需要输入额外的命令,比较繁琐,个人不是很喜欢,有兴趣的可以去自己了解下相关的东西。这篇教程里很多详细的说明,里边有说到gulp的使用,绝对的精品文章。

这里我选择的是由rozbo大佬开发的hexo-neat压缩插件,配置简单,无需额外命令,你只要使用原本的调试三连或者部署三连就可以自动帮你完成静态资源的压缩!

如何使用hexo-neat
在站点根目录下安装hexo-neat

为站点配置文件添加相关配置
下边是我自己站点的相关配置,直接添加到站点配置文件_config.yml的末尾就可以。可以安装自己的需求去自定义配置,不过有些注意事项,可以参考我后文的踩坑记录。

hexo-neat插件踩坑记录
由于在使用hexo-neat插件时,可以在命令窗口中看到各个文件的压缩率,于是我就开始捣鼓跳过哪些文件可以让效率更高。在鼓捣了一段时间之后,记录下使用该插件的一些注意事项,避免日后重蹈覆辙,也希望能对各位看官有所帮助。

跳过压缩文件的正确配置方式
如果按照官方插件的文档说明来配置exclude,你会发现完全不起作用。这是因为配置的文件路径不对,压缩时找不到你配置的文件,自然也就无法跳过了。你需要给这些文件指定正确的路径,万能的配置方式如下:

压缩html时不要跳过.md文件
.md文件就是我们写文章时的markdown文件,如果跳过压缩.md文件,而你又刚好在文章中使用到了NexT自带的tab标签,那么当hexo在生成静态页面时就会发生解析错误。这会导致使用到了tab标签的页面生成失败而无法访问。

当初为了找到这个原因花了我两个晚上的时间,简直是夜不能寐。

压缩html时不要跳过.swig文件
.swig文件是模板引擎文件,简单的说hexo可以通过这些文件来生成对应的页面。如果跳过这些文件,那么你将会发现,你的所有页面完全没有起到压缩的效果,页面源代码里依然存在着一大堆空白。

36 站点地图

站点地图是一种文件,您可以通过该文件列出您网站上的网页,从而将您网站内容的组织架构告知Google和其他搜索引擎。搜索引擎网页抓取工具会读取此文件,以便更加智能地抓取您的网站。
先安装一下,打开你的hexo博客根目录,分别用下面两个命令来安装针对谷歌和百度的插件

在博客目录的_config.yml中添加如下代码

在你的博客根目录的public下面发现生成了sitemap.xml以及baidusitemap.xml就表示成功了

安装问题记录

ERROR Plugin load failed: hexo-neat

有一天突然不能使用cnpm安装软件了,安装的每一个文件夹左下角都有箭头,即无法访问

于是重新安装hexo-neat,结果出现如下错误:

按照此https://github.com/mozilla/sign-addon/issues/111处指导,重新安装any-promise和thenify-all,结果可以了。

无法排除某个文件夹

由于demo演示需要,有些文件夹不需要渲染,之前使用的是在文件头添加一段说明,但是这种方法有个弊端,就是如果用iframe标签的话,萌萌哒插件会多次出现,且每个html都要重新修改。

修改方法为找到站点配置文件,里面有个skip_render,在后面加上排除目录即可。
参考如下链接:
https://www.maoxuner.cn/2017/03/10/hexo-skip-render.html

参考链接

【hexo】hexo安装

https://app.yinxiang.com/shard/s65/nl/15403086/5429a6b9-5cd5-4e3d-897d-d7645422720a?title=hexo

【hexo】从零开始制作 Hexo 主题

https://app.yinxiang.com/shard/s65/nl/15403086/9ac44c05-a3e3-4522-8340-5976fef14f1a

【hexo】生成sitemap站点地图

https://app.yinxiang.com/shard/s65/nl/15403086/e858c369-4346-4497-84e1-8926d88bf1e3

【hexo】如何写一个自己的hexo主题

https://app.yinxiang.com/shard/s65/nl/15403086/bc208c54-fabf-4fdc-b037-9ddf92ca4796

如果你对这篇文章有什么疑问或建议,欢迎下面留言提出,我看到会立刻回复!

打赏
未经允许不得转载:马春杰杰 » [mcj]hexo-next安装教程
华为学生服务器每月仅需9元!

留个评论吧~ 7 评论前登陆可免验证码!

私密评论

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址(选填,便于回访^_^)
  1. #4

    有啥通知啦?

    马春杰 5个月前 (05-21) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
  2. #3

    youtongzhila?

    ma3252788 5个月前 (05-21) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
  3. #2

    yoyo~~

    马春杰 5个月前 (05-20) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
  4. #1

    邮件通知吗?

    ma3252788 5个月前 (05-20) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
切换注册

登录

忘记密码 ?

切换登录

注册