Hexo-Next主题高级设置

最新推荐文章于 2023-09-12 10:52:09 发布

欲游山河

最新推荐文章于 2023-09-12 10:52:09 发布

阅读量2.5k

点赞数 6

分类专栏： github

本文链接：https://blog.csdn.net/qq_43554997/article/details/96473780

版权

github 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前提条件：

已经成功搭载好hexo

hexo搭载教程

1.Next主题启用

next使用文档

最好下载稳定版，下载zip的压缩包->解压->点击进入解压后的文件夹（里面只有一个）将这个文件夹改名为next->将next文件夹复制到F:\blog\themes下（自己安装blog所在位置）

使用Sublime Text打开_config.yml文件夹

我这里直接将blog文件夹拖到Sublime Text中

将theme：改为next

ctrl +s保存

接下来：方法1：打开cmd输入：

F:
cd blog

进入bloc目录下

输入：

hexo clean
hexo g
hexo s

方法2：打开我的电脑找到blog文件夹，在此文件夹下右击选择Git Bash Here

启动输入：

hexo clean
hexo g
hexo s

每次要想查看更改后的效果都是输入这三句。

2.更改主题为中文

使用Sublime Text打开_config.yml文件夹->找到language：改为如图所示的保存即可

3.增加标签页和分类页

打开themes->next->_config.yml

去掉#号，保存即可。

4.正确姿势打开标签页和分类页

我这里使用Git操作的，输入：

hexo n page tags

source文件夹中会多出一个tags文件夹,改为如下图所示

hexo n categories

source文件夹中会多出一个tags文件夹,改为如下图所示

记得保存。

5.主题样式更改

6.更改头像

ctrl+f搜索：avatar

去掉#号

注意：如果默认端口不行，就输入：

hexo s  -p  4002    //指定一个端口号

7.更改标题，作者，链接

8.启动侧边栏社交链接

9.启动友情链接

10.新建一篇文章

输入：

hexo n "标题名"

blog->source->_posts目录下会多一个文件，用Sublime Text打开，并写博客

11.Markdownd的基本使用

12.开启打赏功能

注意：图片的命名。

13.开启订阅公众号

14.设置头像为圆形可旋转

在Blog/_config.yml中添加头像链接地址：

//添加头像地址
avatar: [ http://....]

设置头像圆角并旋转，打开Blog/themes/next/source/css/_common/components/sidebar/sidebar-author.styl，添加以下代码：

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;
  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
 
  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}
img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/
  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

15.首页文字设置阅读全文

方法1:

方法2：

16.添加动态背景

17.给博客添加fork Github

GitHub Corners

GitHub Ribbons

登录网址任选一个

注意要复制在<div class ="headband"></div>之后一行。地址要改为你自己的github地址。

18.修改文字内链接样式

19.修改文章底部带#标签

修改Blog\themes\next\layout\_macro\post.swig中文件，command+f搜索rel="tag">#，将#替换成<i class="fa fa-tag"></i>。输入以下命令，查看效果：

20. RSS

安装Hexo插件

 npm install --save hexo-generator-feed

安装成功之后，编辑Blog/_config.yml文件，在文件末尾添加

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

配置主题_config.yml文件，command+f搜索rss，在后面加上/atom.xml

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml //注意：有一个空格

之后，终端输入hexo s查看效果

hexo s

21.文章加密访问

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

<script>
    (function () {
        if ('{{ page.password }}') {
            if (prompt('请输入文章密码') !== '{{ page.password }}') {
                alert('密码错误！');
                if (history.length === 1) {
                    location.replace("http://xxxxxxx.xxx"); // 这里替换成你的首页
                } else {
                    history.back();
                }
            }
        }
    })();
</script>

文章写成这样子：

22.博文置顶

修改 hero-generator-index 插件，把文件：node_modules/hexo-generator-index/lib/generator.js内的代码替换为：

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

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

23.增加搜索功能

24.增加不蒜子统计功能

25.增加内容分享服务

26.增加加载效果

27.增加点击爆炸效果

28.隐藏底部的强力驱动

29.实现数字统计和阅读时长功能

输入：

npm install hexo-wordcount --save

30.侧栏加入以运行时间

文件位置：~/blog/themes/next/layout/_custom/sidebar.swig里插入

<div id="days"></div>
<script>
function show_date_time(){
    window.setTimeout("show_date_time()", 1000);
    BirthDay=new Date("05/27/2017 15:13:14");
    today=new Date();
    timeold=(today.getTime()-BirthDay.getTime());
    sectimeold=timeold/1000
    secondsold=Math.floor(sectimeold);
    msPerDay=24*60*60*1000
    e_daysold=timeold/msPerDay
    daysold=Math.floor(e_daysold);
    e_hrsold=(e_daysold-daysold)*24;
    hrsold=setzero(Math.floor(e_hrsold));
    e_minsold=(e_hrsold-hrsold)*60;
    minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
    seconds=setzero(Math.floor((e_minsold-minsold)*60));
    document.getElementById('days').innerHTML="已运行 "+daysold+" 天 "+hrsold+" 小时 "+minsold+" 分 "+seconds+" 秒";
}
function setzero(i) {
    if (i<10) {
        i="0" + i
    };
    return i;
}
show_date_time();
</script>

上面Date的值记得改为你自己的，且按上面格式，然后修改：

修改颜色如下