【目录】Hexo+NexT+Gemini 搭建博客拥抱舒爽

2022-03-27 17:31:34 浏览数 (1)

1 前言

本文主要是Hexo NexT搭建博客并且进行主题的配置以及页面的样式优化

本篇文档参考了许多大佬的文章以及配置文件，在此感谢大佬们。

本文参考的文章都会直接给出原文链接或者以注脚的形式标记出处，如有遗漏，欢迎指出。

本文内容会在后续的优化中慢慢补充完整~~

首先在配置Hexo NexT之前，最好阅读一下 Hexo官方文档 和 NexT使用文档

2 Hexo安装和配置

代码语言：javascript复制
参考博客：
  • Windows下部署安装Hexo
  • 创建Hexo项目
  • Hexo博客上传至Github
  • 使用NexT主题优化Hexo博客

3 NexT主题优化

3.1 修改文章底部#为图标

修改模板/themes/next/layout/_macro/post.swig，

搜索 rel=”tag”>#，将 # 换成 <i class="fa fa-envira"></i>

3.2 点击出现爱心效果

在/themes/next/source/js/love.js下新建文件love.js，接着把该链接下的代码拷贝粘贴到love.js文件中

代码语言：javascript复制
!function (e, t, a) { function n() { c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r() } function r() { for (var e = 0; e < d.length; e  )d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y-- , d[e].scale  = .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:"   d[e].x   "px;top:"   d[e].y   "px;opacity:"   d[e].alpha   ";transform:scale("   d[e].scale   ","   d[e].scale   ") rotate(45deg);background:"   d[e].color   ";z-index:99999"); requestAnimationFrame(r) } function o() { var t = "function" == typeof e.onclick && e.onclick; e.onclick = function (e) { t && t(), i(e) } } function i(e) { var a = t.createElement("div"); a.className = "heart", d.push({ el: a, x: e.clientX - 5, y: e.clientY - 5, scale: 1, alpha: 1, color: s() }), t.body.appendChild(a) } function c(e) { var a = t.createElement("style"); a.type = "text/css"; try { a.appendChild(t.createTextNode(e)) } catch (t) { a.styleSheet.cssText = e } t.getElementsByTagName("head")[0].appendChild(a) } function s() { return "rgb("   ~~(255 * Math.random())   ","   ~~(255 * Math.random())   ","   ~~(255 * Math.random())   ")" } var d = []; e.requestAnimationFrame = function () { return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) { setTimeout(e, 1e3 / 60) } }(), n() }(window, document);

在themesnextlayout_layout.swig文件末尾添加：

代码语言：javascript复制
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

3.3 文章加密访问

打开themes->next->layout->_partials->head-unique.swig文件,插入这样一段代码:

代码语言：javascript复制
<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入查看密码') !== '{{ page.password }}'){
                alert('密码不正确,请询问主编大大！');
                history.back();
            }
        }
    })();
</script>

然后在文章上写成类似这样:

代码语言：javascript复制
title: Hexo NexT拥抱舒爽
tags:
  - Hexo
  - NexT
categories:
  - Hexo
author: WuGenQiang
password: 123456
date: 2019-03-31 19:01:35
updated: 2019-03-31 19:01:35

3.4 优化深色代码高亮背景

在主题配置文件修改代码高亮背景为深色背景后，当在博客文章上选择代码时，选择到的颜色也为深色，虽然和背景色还是有点点区别，但是不好区分。所以经过一番研究，才有了以下优化教程。

在myblog/themes/next/source/css/_custom/custom.styl中添加以下样式代码：

代码语言：javascript复制
//page code background-color
.code ::selection {
    background: #2593a6;
    color: #fff;
}


//gitalk code background-color 
.gt-container .gt-comment-content .highlight pre, .markdown-body pre{
    background-color: #2d2d2d;
}
.gt-container .gt-comment-content .highlight ::selection {
    background: #2593a6;
    color: #fff;
}

以上代码优化了所以高亮代码区域，包括gitalk评论区的高亮代码。 这些样式代码是通过浏览器调试而得，如有其它样式的需求，可参考本示例在浏览器中调试。

3.5 解决NexT主题访问慢

3.5.1 方法一：修改外链字体库

注：

现在更改后的速度大不如前了，速度也是ok的，如果想尝试可以更改成中科大的外链字体库，我一直在用中科大的外链字体库，可以参照我的速度来决定是否修改，记录于2019-04-29

当博客使用Hexo搭建在Github Page上的时候，可能会访问慢，有一个原因是因为fonts.googleapis.com加载极慢（虽然可能不慢，比如我的就很满意，速度差不多快，可能是我进行了博文压缩的原因），所以Google了一下，发现了解决方案。 记录:

  • 貌似这种解决方案不能用了，今天2019-04-28博客太卡不知道啥原因，后来F12查看网络延迟，发现是这个中科大的外链字体库出现问题了，不知道什么时候恢复，又恢复了默认状态，因为做过压缩静态资源，所以还是很快。
  • 现在是2019-04-29 15:29 抱着试一试的态度，查看了中科大的外链文字库地址，居然好啦哈哈，完美。

方法：

把在NexT主题的配置文件_config.yml里面的：

代码语言：javascript复制
font:
  enable: true
  # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
  host:

改为：

代码语言：javascript复制
font:
  enable: true
  # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
  # Uri of fonts host. E.g. //fonts.googleapis.com (Default)
  # fonts.lug.ustc.edu.cn是中科大的源,解决Hexo NexT主题访问慢
  host: //fonts.lug.ustc.edu.cn

访问速度就很快了！哦耶，当然如果你有更好的解决办法也可以提啊

效果演示：

3.5.2 方法二：博文压缩

这里我来分享以下如何压缩，参考 实现博文压缩

3.5.3 方法三：双服务器托管

还有一种方法就是采用Coding Github双服务器托管Hexo博客，这样访问速度会更快！ 如果想进行这样的操作，可以参考我的文章：Coding Github双服务器托管Hexo

3.6 去掉顶部黑线

打开themesnextsourcecss_customcustom.styl

代码语言：javascript复制
//添加代码：
.headband {display:none;}

保存刷新一下，黑线就没有了。

3.7 设置点击头像返回主页

打开themesnextlayout_macrosidebar.swig

代码语言：javascript复制
//添加代码：
         <a href="/">
          <img class="site-author-image" itemprop="image"
               src="{{ url_for( theme.avatar | default(theme.images   '/avatar.gif') ) }}"
               alt="{{ theme.author }}" />
         </a>

//这里注意找到中间代码，添加a标签就行了，中间不用修改。

如图：

重新部署hexo s，刷新页面点击头像即可返回主页。

3.8 实现3d动态标签云

效果如图所示：

可参考github上标签云使

3.8.1 安装标签云hexo-tag-cloud插件

代码语言：javascript复制
npm install hexo-tag-cloud@^2.* --save

3.8.2 配置sidebar.swig文件

打开next/layout/_macro/sidebar.swig，输入：

代码语言：javascript复制
{% if site.tags.length > 1 %}
        <script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
        <script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
        <div class="widget-wrap">
            <div id="myCanvasContainer" class="widget tagcloud">
                <canvas width="250" height="250" id="resCanvas" style="width=100%">
                    {{ list_tags() }}
                </canvas>
            </div>
        </div>
      {% endif %}

位置如图放置，可以根据你的需要放置，下图是我的位置：

重新hexo s一下，就可以出现我刚刚那个3d标签云啦!

3.9 设置标题样式（为浅蓝色）

进入主题目录 themesnextsourcecss_commoncomponentspost 修改 post.styl 文件(博文的样式表)，在配置的后面添加下面的代码:

代码语言：javascript复制
/*添加下面的CSS代码来修改博文标题样式*/
.page-post-detail .post-title {
  font-size: 26px;
  text-align: center;
  word-break: break-word;
  font-weight: $posts-expand-title-font-weight
  background-color: #b9d3ee;
  border-radius:.3em;
  line-height:1em;
  padding-bottom:.12em;
  padding-top:.12em;
  box-shadow:2px 2px 7px #9fb6cd;
   mobile() {
    font-size: 22px;
  }
}
/*添加上面的CSS代码来修改博文标题样式*/
@import "post-expand";//这行以上复制就可以啦，此行不用复制

效果如图所示：

注：如果想把主页标题样式一同修改，可以把 .page-post-detail 去掉即可。

效果如图所示：

3.10 设置文章封面图片(文章内不显示)

在博客首页的时候会显示文章的封面图片，进入这篇文章的详细页面后，将不显示这张图片。 操作如下：

3.10.1 修改post.swig文件

修改 themesnextlayout_macropost.swing 文件,将下面代码复制进去：

代码语言：javascript复制
{% if post.summary_img  %}
  <div class="out-img-topic">
    <img src={{ post.summary_img }} class="img-topic">
  </div>
{% endif %}

添加到下图所示的位置:

这样的话，就可以使用summary_img: imageurl来设置文章封面了。

3.10.2 添加summary_img字段

在新建的文章添加一个字段属性：summary_img，summary_img的值是图片的路径，如下图，但是请注意一下，亲测，本地图片要放在images目录下，网络图片随意啊

3.11 修改阅读全文颜色

修改themesnextsourcecss_customcustom.styl文件，添加：

代码语言：javascript复制
// 修改按键（button）样式
.btn {
  color: #49b1f5;
  background: #fff;
  border: 2px solid #49b1f5;
}
// 按键（button）点击时样式
.btn:hover {
  border-color: #49b1f5;
  color: #fff;
  background: #49b1f5;
}

即可，颜色自己定义。

3.12 修改主题页面布局为圆角

3.12.1 方法一

在/themes/next/source/css/_variables/custom.styl文件种添加如下代码（以Gemini风格为例）：

代码语言：javascript复制
// 修改主题页面布局为圆角
// Variables of Gemini scheme
// =================================================
@import "Pisces.styl";
// Settings for some of the most global styles.
// --------------------------------------------------
$body-bg-color                    = #eee
// Borders.
// --------------------------------------------------
$box-shadow-inner                 = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12)
$box-shadow                       = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12), 0 -1px .5px 0 rgba(0,0,0,.09)
$border-radius-inner              = initial
$border-radius                    = initial
$border-radius-inner            = 15px 15px 15px 15px;
$border-radius                  = 15px;

3.12.2 方法二

在themesnextsourcecss_variablesGemini.styl文件中直接添加：

代码语言：javascript复制
// 修改主题页面布局为圆角
$border-radius-inner            = 15px 15px 15px 15px;
$border-radius                  = 15px;

即可

3.13 修改友链样式

点此链接查看：Hexo NexT修改友链样式

3.14 博文图片模式

新建博文，设置 type: picture，使用 { % gp x-x % }…{ % endgp % } 标签引用要展示的图片地址，如下所示：

代码语言：javascript复制
title: 测试图片展示
tags:
  - Picture
  - Hexo
urlname: pictureToDisplayTest_5-3
categories:
  - Hexo
author: WuGenQiang
type: picture
date: 2019-04-14 18:02:40
updated: 2019-04-14 18:02:40
---
{% gp 5-3 %}
![](https://raw.githubusercontent.com/wugenqiang/PictureBed/master/pictures/070.gif)
![](https://raw.githubusercontent.com/wugenqiang/picGo/master/pictures/013.jpg)
![](https://raw.githubusercontent.com/wugenqiang/picGo/master/pictures/003.jpg)
![](https://raw.githubusercontent.com/wugenqiang/picGo/master/pictures/004.jpg)
![](https://raw.githubusercontent.com/wugenqiang/picGo/master/pictures/20190404142303.png)
{% endgp %}

图片展示效果:

{ % gp 5-3 % }：设置图片展示效果，参考 themesnextscriptstagsgroup-pictures.js ,5-3 的意思就是5张图片将会按照这种布局来展示，Next 提供了多张图片的多种布局，你可以随意选择，请到官网查看：https://theme-next.org/docs/tag-plugins/group-pictures

注意点

主题目前首页可以正常显示设置的图片效果，但是点击进入后显示效果丢失，所以需要修改一下themesnextsourcecss_commoncomponentstagsgroup-pictures.styl 中的以下样式：

代码语言：javascript复制
.page-post-detail .post-body .group-picture-column {
  //float: none;
  margin-top: 10px;
  //width: auto !important;
  img { margin: 0 auto; }
}

效果参照我的测试博文页面：测试5-3图片展示

效果如图所示：

3.15 隐藏特定文章

点此链接查看：Hexo NexT隐藏特定文章

3.16 增加分享功能

3.16.1 方法一

编辑主题配置文件_config.yml，添加/修改字段baidushare，值为 true 即可。

代码语言：javascript复制
# 百度分享服务
baidushare: true

效果不太适合我，所以选择了第二种方法

3.16.2 方法二

git bash输入：

代码语言：javascript复制
$ rm -rf themes/next/source/lib/needsharebutton
$ git clone https://github.com/theme-next/theme-next-needmoreshare2 themes/next/source/lib/needsharebutton

然后在/themes/next/_config.yml中，搜索 needmoreshare2，修改如下：

代码语言：javascript复制
needmoreshare2:
  enable: true
  postbottom:
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: false # 这里是浮动分享，我没有设置
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

效果如下：

3.17 鼠标选取文字提示版权信息

点此链接查看：Hexo NexT选取文字提示版权信息

3.18 自定义文章底部版权声明

3.18.1 新建my-copyright.swig文件

在 themes/next/layout/_macro/ 下添加 my-copyright.swig ，内容如下：

代码语言：javascript复制
{% 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="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/sweetalert/1.1.2/sweetalert.min.css">

  <p><span>本文标题:</span>{{ page.title }}</a></p>
  <p><span>文章作者:</span>{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}</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 %}

3.18.2 新建my-post-copyright.styl文件

在 themes/next/source/css/_common/components/post/ 下添加 my-post-copyright.styl，内容如下:

代码语言：javascript复制
.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: #333333; // title color
  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: #0593d3; // link color
  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.18.3 修改post.swig文件

修改 themes/next/layout/_macro/post.swig ，如下： 在end post body之后根据你个人需要放置位置，添加以下代码：

代码语言：javascript复制
<div>
    {% if not is_index %}
        {% include 'my-copyright.swig' %}
    {% endif %}
</div>

3.18.4 修改post.styl文件

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

代码语言：javascript复制
@import "my-post-copyright"

3.18.5 修改post.md文件

设置新建文章自动开启 copyright ，即新建文章自动显示自定义的版权声明，设置 ～/scaffolds/post.md 文件，如下：

代码语言：javascript复制
---
title: {{ title }}
date: {{ date }}
copyright: true #新增,开启
---

3.18.6 新建文章测试

发现新建简单文章可以显示，之前的文章不能显示 效果图：

3.19 增加词云

方法比较简单，加个js脚本就好了，至于加载哪里都无所谓了，就放在标签云的页面。 就加在标签的那个页面好了。

打开themesnextlayoutpage.swig找到:

代码语言：javascript复制
{% if page.type === "tags" %}

将下面这段代码:

代码语言：javascript复制
<div class="tag-cloud">

   <!-- <div class="tag-cloud-title">
       {{ _p('counter.tag_cloud', site.tags.length) }}
   </div> -->
   <div class="tag-cloud-tags" id="tags">
     {{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#fff', end_color: '#fff'}) }}
   </div>
 </div>

换成下面这段代码：

代码语言：javascript复制
 <div class="tag-cloud">
  <!-- <div class="tag-cloud-title">
      {{ _p('counter.tag_cloud', site.tags.length) }}
  </div> -->
  <div class="tag-cloud-tags" id="tags">
    {{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#fff', end_color: '#fff'}) }}
  </div>
</div>
<br>

<script type="text/javascript">
   var alltags=document.getElementById('tags');
   var tags=alltags.getElementsByTagName('a');

   for (var i = tags.length - 1; i >= 0; i--) {
     var r=Math.floor(Math.random()*75 130);
     var g=Math.floor(Math.random()*75 100);
     var b=Math.floor(Math.random()*75 80);
     tags[i].style.background = "rgb(" r "," g "," b ")";
   }
</script>

<style type="text/css">
    div#posts.posts-expand .tag-cloud a{
   background-color: #f5f7f1;
   border-radius: 6px;
   padding-left: 10px;
   padding-right: 10px;
   margin-top: 18px;

 }

 .tag-cloud a{
   background-color: #f5f7f1;
   border-radius: 4px;
   padding-right: 5px;
   padding-left: 5px;
   margin-right: 5px;
   margin-left: 0px;
   margin-top: 8px;
   margin-bottom: 0px;

 }

 .tag-cloud a:before{
      content: "


	


hexo 腾讯云开发者社区 css markdown http 




	






	

 0 人点赞