【Hexo-Next】主题基础配置篇(一)

已于 2023-01-23 19:06:15 修改
阅读量620 收藏 5
点赞数 1
分类专栏： Hexo-Next主题 文章标签： 经验分享 其他
于 2022-10-16 23:24:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45867247/article/details/127355150
版权

💻【Hexo-Next】主题基础配置篇(一) 🏠专栏：Hexo-Next 主题
👀个人主页：繁星学编程🍁
🧑个人简介：一个不断提高自我的平凡人🚀
🔊分享方向：目前主攻前端，其他知识也会阶段性分享🍀
👊格言：☀️没有走不通的路，只有不敢走的人！☀️
👉让我们一起进步，一起成为更好的自己！！！🎁

文章目录

【Hexo-Next】主题的配置

一. 近期文章（侧边栏）

  • 首先，在根目录下的.\source新建 _data\sidebar.njk 文件，并把下面的代码放到 sidebar.njk 中
{% if theme.recent_posts %}
    <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}">
      <div class="links-of-blogroll-title">
        <!-- modify icon to fire by szw -->
        <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
        {{ theme.recent_posts_title }}
      </div>
      <ul class="links-of-blogroll-list">
        {% set posts = site.posts.sort('-date').toArray() %}
        {% for post in posts.slice('0', '5') %}
          <li>
            <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
          </li>
        {% endfor %}
      </ul>
    </div>
{% endif %}
  • 然后在主题配置文件 next.yml 中，找到 custom_file_path ，取消 sidebar 的注释
 #sidebar: source/_data/sidebar.njk
  • 最后，在主题配置文件 next.yml 中添加了几个变量，如下：
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

效果预览：

在这里插入图片描述

二. 粒子时钟

  • 首先，在.\themes\next\layout新建一个clock.swig文件，并在带文件里加入以下代码：
<div style="">
    <canvas id="canvas" style="width:60%;">当前浏览器不支持canvas，请更换浏览器后再试</canvas>
</div>
<script>
        (function(){

        var digit=
            [
                [
                    [0,0,1,1,1,0,0],
                    [0,1,1,0,1,1,0],
                    [1,1,0,0,0,1,1],
                    [1,1,0,0,0,1,1],
                    [1,1,0,0,0,1,1],
                    [1,1,0,0,0,1,1],
                    [1,1,0,0,0,1,1],
                    [1,1,0,0,0,1,1],
                    [0,1,1,0,1,1,0],
                    [0,0,1,1,1,0,0]
                ],//0
                [
                    [0,0,0,1,1,0,0],
                    [0,1,1,1,1,0,0],
                    [0,0,0,1,1,0,0],
                    [0,0,0,1,1,0,0],
                    [0,0,0,1,1,0,0],
                    [0,0,0,1,1,0,0],
                    [0,0,0,1,1,0,0],
                    [0,0,0,1,1,0,0],
                    [0,0,0,1,1,0,0],
                    [1,1,1,1,1,1,1]
                ],//1
                [
                    [0,1,1,1,1,1,0],
                    [1,1,0,0,0,1,1],
                    [0,0,0,0,0,1,1],
                    [0,0,0,0,1,1,0],
                    [0,0,0,1,1,0,0],
                    [0,0,1,1,0,0,0],
                    [0,1,1,0,0,0,0],
                    [1,1,0,0,0,0,0],
                    [1,1,0,0,0,1,1],
                    [1,1,1,1,1,1,1]
                ],//2
                [
                    [1,1,1,1,1,1,1],
                    [0,0,0,0,0,1,1],
                    [0,0,0,0,1,1,0],
                    [0,0,0,1,1,0,0],
                    [0,0,1,1,1,0,0],
                    [0,0,0,0,1,1,0],
                    [0,0,0,0,0,1,1],
                    [0,0,0,0,0,1,1],
                    [1,1,0,0,0,1,1],
                    [0,1,1,1,1,1,0]
                ],//3
                [
                    [0,0,0,0,1,1,0],
                    [0,0,0,1,1,1,0],
                    [0,0,1,1,1,1,0],
                    [0,1,1,0,1,1,0],
                    [1,1,0,0,1,1,0],
                    [1,1,1,1,1,1,1],
                    [0,0,0,0,1,1,0],
                    [0,0,0,0,1,1,0],
                    [0,0,0,0,1,1,0],
                    [0,0,0,1,1,1,1]
                ],//4
                [
                    [1,1,1,1,1,1,1],
                    [1,1,0,0,0,0,0],
                    [1,1,0,0,0,0,0],
                    [1,1,1,1,1,1,0],
                    [0,0,0,0,0,1,1],
                    [0,0,0,0,0,1,1],
                    [0,0,0,0,0,1,1],
                    [0,0,0,0,0,1,1],
                    [1,1,0,0,0,1,1],
                    [0,1,1,1,1,1,0]
                ],//5
                [
                    [0,0,0,0,1,1,0],
                    [0,0,1,1,0,0,0],
                    [0,1,1,0,0,0,0],
                    [1,1,0,0,0,0,0],
                    [1,1,0,1,1,1,0],
                    [1,1,0,0,0,1,1],
                    [1,1,0,0,0,1,1],
                    [1,1,0,0,0,1,1],
                    [1,1,0,0,0,1,1],
                    [0,1,1,1,1,1,0]
                ],//6
                [
                    [1,1,1,1,1,1,1],
                    [1,1,0,0,0,1,1],
                    [0,0,0,0,1,1,0],
                    [0,0,0,0,1,1,0],
                    [0,0,0,1,1,0,0],
                    [0,0,0,1,1,0,0],
                    [0,0,1,1,0,0,0],
                    [0,0,1,1,0,0,0],
                    [0,0,1,1,0,0,0],
                    [0,0,1,1,0,0,0]
                ],//7
                [
                    [0,1,1,1,1,1,0],
                    [1,1,0,0,0,1,1],
                    [1,1,0,0,0,1,1],
                    [1,1,0,0,0,1,1],
                    [0,1,1,1,1,1,0],
                    [1,1,0,0,0,1,1],
                    [1,1,0,0,0,1,1],
                    [1,1,0,0,0,1,1],
                    [1,1,0,0,0,1,1],
                    [0,1,1,1,1,1,0]
                ],//8
                [
                    [0,1,1,1,1,1,0],
                    [1,1,0,0,0,1,1],
                    [1,1,0,0,0,1,1],
                    [1,1,0,0,0,1,1],
                    [0,1,1,1,0,1,1],
                    [0,0,0,0,0,1,1],
                    [0,0,0,0,0,1,1],
                    [0,0,0,0,1,1,0],
                    [0,0,0,1,1,0,0],
                    [0,1,1,0,0,0,0]
                ],//9
                [
                    [0,0,0,0,0,0,0],
                    [0,0,1,1,1,0,0],
                    [0,0,1,1,1,0,0],
                    [0,0,1,1,1,0,0],
                    [0,0,0,0,0,0,0],
                    [0,0,0,0,0,0,0],
                    [0,0,1,1,1,0,0],
                    [0,0,1,1,1,0,0],
                    [0,0,1,1,1,0,0],
                    [0,0,0,0,0,0,0]
                ]//:
            ];

        var canvas = document.getElementById('canvas');

        if(canvas.getContext){
            var cxt = canvas.getContext('2d');
            //声明canvas的宽高
            var H = 100,W = 700;
            canvas.height = H;
            canvas.width = W;
            cxt.fillStyle = '#f00';
            cxt.fillRect(10,10,50,50);

            //存储时间数据
            var data = [];
            //存储运动的小球
            var balls = [];
            //设置粒子半径
            var R = canvas.height/20-1;
            (function(){
                var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
                //存储时间数字，由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
                data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
            })();

            /*生成点阵数字*/
            function renderDigit(index,num){
                for(var i = 0; i < digit[num].length; i++){
                    for(var j = 0; j < digit[num][i].length; j++){
                        if(digit[num][i][j] == 1){
                            cxt.beginPath();
                            cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);
                            cxt.closePath();
                            cxt.fill();
                        }
                    }
                }
            }

            /*更新时钟*/
            function updateDigitTime(){
                var changeNumArray = [];
                var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
                var NewData = [];
                NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
                for(var i = data.length-1; i >=0 ; i--){
                    //时间发生变化
                    if(NewData[i] !== data[i]){
                        //将变化的数字值和在data数组中的索引存储在changeNumArray数组中
                        changeNumArray.push(i+'_'+(Number(data[i])+1)%10);
                    }
                }
                //增加小球
                for(var i = 0; i< changeNumArray.length; i++){
                    addBalls.apply(this,changeNumArray[i].split('_'));
                }
                data = NewData.concat();
            }

            /*更新小球状态*/
            function updateBalls(){
                for(var i = 0; i < balls.length; i++){
                    balls[i].stepY += balls[i].disY;
                    balls[i].x += balls[i].stepX;
                    balls[i].y += balls[i].stepY;
                    if(balls[i].x > W + R || balls[i].y > H + R){
                        balls.splice(i,1);
                        i--;
                    }
                }
            }

            /*增加要运动的小球*/
            function addBalls(index,num){
                var numArray = [1,2,3];
                var colorArray =  ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];
                for(var i = 0; i < digit[num].length; i++){
                    for(var j = 0; j < digit[num][i].length; j++){
                        if(digit[num][i][j] == 1){
                            var ball = {
                                x:14*(R+2)*index + j*2*(R+1)+(R+1),
                                y:i*2*(R+1)+(R+1),
                                stepX:Math.floor(Math.random() * 4 -2),
                                stepY:-2*numArray[Math.floor(Math.random()*numArray.length)],
                                color:colorArray[Math.floor(Math.random()*colorArray.length)],
                                disY:1
                            };
                            balls.push(ball);
                        }
                    }
                }
            }

            /*渲染*/
            function render(){
                //重置画布宽度，达到清空画布的效果
                canvas.height = 100;
                //渲染时钟
                for(var i = 0; i < data.length; i++){
                    renderDigit(i,data[i]);
                }
                //渲染小球
                for(var i = 0; i < balls.length; i++){
                    cxt.beginPath();
                    cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI);
                    cxt.fillStyle = balls[i].color;
                    cxt.closePath();
                    cxt.fill();
                }
            }

            clearInterval(oTimer);
            var oTimer = setInterval(function(){
                //更新时钟
                updateDigitTime();
                //更新小球状态
                updateBalls();
                //渲染
                render();
            },50);
        }

    })();
</script>

然后，打开 .\theme\next\layout\_macro\sidebar.njk，修改代码如下：

{%- if theme.back2top.enable and theme.back2top.sidebar %}
    <div class="back-to-top motion-element">
        <i class="fa fa-arrow-up"></i>
 <span>0%</span>
 </div>
 {%- endif %}

     +     {% include '../clock.swig' %}

  </div>
  </aside>
  <div id="sidebar-dimmer"></div>
  {% endmacro %}

效果图：

在这里插入图片描述

三. Hexo博客添加live2d卡通人物

  1. 安装hexo-helper-live2d
npm install --save hexo-helper-live2d
  1. 安装live2d

有官方提供了许多的模型供你选择（我选择的是live2d-widget-model-wanko）

npm install live2d-widget-model-wanko
  1. 配置

在站点配置文件_config.yml，添加如下代码：

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-wanko
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

最后，重新hexo d -g即可看到效果

当然如果你装了之后想卸载，可以在你的hexo博客根目录下执行下面代码：

npm uninstall hexo-helper-live2d -g

其他模型名称：

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

live2d-widget-model-wanko的效果图：

在这里插入图片描述
结束语：

希望对您有一点点帮助，如有错误欢迎小伙伴指正。
👍点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！💪💪💪

繁星学编程
关注
专栏目录
hexo-next主题配置
暮子凡的博客
04-12 733
前言 虽然网上关于next主题配置文章很多，但是自己跟着教程配置，还是出现各种问题，这里记录下自己配置过程中出现的问题，特别是下面的注意项。 添加阅读全文按钮 文章内容过多，通过点击阅读全文进入文章详情 在文章内容前面加上下面内容: 注意: 这行内容加在文章内容顶部是不会生效的。 <!--more--> 文章分类 新建一个分类页面 $ hexo new page cate...
Hexo-Next主题博客个性化配置
weixin_44245220的博客
05-23 1309
Hexo版本：6.2.0、NextT版本：7.8.0 一、主题安装 打开Git Bash，cd到站点根目录，输入 git clone https://github.com/theme-next/hexo-theme-next themes/next 打开站点根目录下的_config.yml文件，landscape修改为next ## Themes: https://hexo.io/themes/ theme: next 二、使用须知 Hexo根目录下的配置文件_config.yml，以下称作站点配.
Hexo博客搭建 —— Next主题配置
ahahayaa的博客
06-24 907
你需要在这里设置你的博客网站的域名，这样 Hexo 生成的链接才能正确指向你的网站。然而，如果你没有使用这种特殊命名的仓库，那么你的仓库仅仅是一个用于托管代码的平台。这将确保文章链接是唯一的，从而避免了链接冲突的问题。这样，即使你更新了主题，你的自定义设置仍会保存在根目录下的。在这种情况下，新的链接格式将替代原来的链接格式。为你的自定义域名，或者使用部署服务分配给你的临时域名（例如，该文件的内容和下面的主题配置文件中的内容相同(就是从主题下的。，这是为了避免将来主题更新时，由于新版主题自带的默认的初始的。
Hexo博客主题hexo-theme-matery安装与使用指南
最新发布
gitblog_00231的博客
08-08 853
Hexo博客主题hexo-theme-matery安装与使用指南 hexo-theme-materyA beautiful hexo blog theme with material design and responsive design.一个基于材料设计和响应式设计而成的全面、美观的Hexo主题。国内访问：http://blinkfox.com项目地址:https://gitcode.com...
hexo主题配置
川游的博客
03-29 7530
1.hexo+Github主题配置参见教程 2.个性化个人页面 git clone 主题后效果如图： 另附该主题的说明 ps:下载好主题后记得把主题文件夹下的config文件去掉后面的example 默认为德语，修改为英文的需要将hexo文件夹根目录（不是主题目录）的config文件修改 # Site title: Hexo subtitle: description: key...
hexo next主题配置
守望的博客-编程珠玑
10-21 738
原文链接hexo next主题配置前言由于各种原因，网站会有各种变化以及配置的增加，以日志记下改动2017年10月21日更新修改链接样式修改文件source\css_common\components\post\post.styl 增加内容.post-body p a{ color: #0593d3; border-bottom: none; border-bottom: 1px so
【Hexo-Next】主题基础配置篇(二)
浅陌繁星的博客
11-09 966
在部分博客中，解密后部分元素可能无法正常显示或者表现，这属于已知问题。目前的解决办法是通过自行查阅自己的博客中的代码，了解到在 onload 事件发生时调用了哪些函数，并将这些函数挑选后写入到博客内容中。在许多写博文的时候你可能需要写一些私密的博客, 通过密码验证的方式让人不能随意浏览.。如果你有一篇文章使用了 TOC，你需要修改模板的部分代码。这种方式只会在首页列表中显示文章的摘要内容，进入文章详情后不会再显示。这种方法可以根据文章的内容，自己在合适的位置添加。标签，使用灵活，也是Hexo推荐的方法。
my-hexo-next:不推荐使用下一个主题。 引入全新主题，番茄！
06-11
The source code of my hexo theme,based on 。 欢迎到我的博客查看效果 | 在基础上增加以下功能： 增加high一下功能 增加侧边栏目录显示 增加多说分享 增加多说热评文章 感谢。 增加high一下功能 在配置文件中增加...
Hexo--NexT系列文章-总结篇
Eirunye的博客
10-04 1777
简介 本篇文章将介绍Hexo从搭建博客—主题配置过程，文章将持续更新，为自己的博客增添美轮美奂的色彩吧。当然，可能系列文章有些地方没有讲解到，希望大家谅解。一起分享，一起学习。 ...
hexo-blog
03-20
Next主题是Hexo众多主题中的一个明星产品，它提供了丰富的配置选项和功能，如响应式设计、暗色模式、多语言支持等。Next主题的设计注重用户体验，使得博客在视觉上具有吸引力，同时保持了易读性和可导航性。此外，...
typecho-theme-next:（重构中）Hexo 主题 NexT.Mist 的 Typecho 移植版
05-09
计划与 Hexo 版本保持同步，支持所有的 Schemes，可通过主题设置配置: Next.Mist (以这个为基础) Next.Muse Next.Pisces Next.Gemini 正在做的： 代码格式化 去掉逝去的多说评论 引入 next 的 stylus 样式，...
Hexo-Next主题配置
cike626的博客
08-13 1070
Hexo-Next主题配置 文章目录Hexo-Next主题配置一、Next主题配置1、网站的图标2、个人头像3、社交链接4、文章版权说明5、显示文章预计阅读时间5.1、前言5.2、安装部署二、其他插件1、文章永久链接2、优化tag，变成彩色的tags3、next主题修改背景图片 一、Next主题配置 1、网站的图标 设置网页上显示的图标 favicon:
Hexo中next主题的个性化配置
Huffie博客
08-16 461
在Hexo中一般有两个_config.yml文件，一个在根目录下，我称之为网站配置文件，一个在主题目录中，我称之为主题配置文件。文章介绍了主题更换、菜单设置、侧边栏设置、作者头像、社交连接、网站名称、作者名字、中英文切换、主页显示文章数、翻译设置等设置。
hexo使用next主题设置
Cybenko
05-30 665
1.hexo4.0 - Next7.2.4 主题优化配置 2. Hexo博客优化之Next主题美化 用github+hexo搭建完个人博客后，朋友们应该很想知道怎么在上面写博文吧，这里介绍一个很简单的方法： 以md格式导出博客到本地，然后copy该md文件，粘贴到你当初建的博客站点文件夹下的source\ _posts目录下，一个md文件对应一篇博客文章。 接着在你博客站点文件夹下右键空白处，选择Git Bash Here，输入：hexo generate，回车，生成静态页面， ...
Hexo的Next主题详细配置
清欢
05-31 5775
next 主题修改 next风格选择 next有四种风格,在站点配置文件搜索字段Scheme Settings可以看到， 根目录themes\next themes\next # Scheme Settings # --------------------------------------------------------------- # Schemes #scheme: Muse #sch...
一文教你通过 hexo 搭建自己的个人博客以及配置主题
weixin_53893220的博客
02-14 2690
一文教你通过 hexo 搭建自己的个人博客以及配置喜欢的主题，适合想拥有自己独特风格的个人博客的每一位小伙伴
Hexo个人博客主题配置
测试开发小记
02-10 1869
系列文章目录 1、Hexo+Github/Gitee 搭建个人博客 2、Hexo个人博客主题配置 目录系列文章目录配置站点信息修改主题Next主题配置样式faviconavatarrss代码块回到页面顶部阅读进度条GitHub 图标数学公式添加自定义 PageValine 评论系统1. 注册 LeanCloud2. 创建应用3. 设置 Next 主题配置文件文章末尾添加公众号订阅1. 准备公众号二维码图片2. 修改主题文件文章底部版权声明1. my-copyright.swig2. my-post-cop
Hexo系列教程之三：next主题的配置和优化
热门推荐
03-27 2万+
前言前面介绍了怎么用hexo搭建博客，今天就谢谢主题的配置和优化。 因为对hexo默认的主题不是很满意，对于追逐个性的我当然不甘于此，于是开启了折腾之路。 对于hexo主题的选择纯凭个人喜好，这一点前面我也有提到，具体可以参考我的博文-Hexo系列教程之零。我现在的主题是yilia，已经配置好了，为了写这篇文章，我准备尝试一下next主题。正文 在 Hexo 中有两份主要的配置文件，其名称都
2024年HarmonyOS鸿蒙最全软考高级之信息系统案例分析七重奏-《3》(1)，腾讯面试gm
2401_84853495的博客
05-08 410
5、配置审计；6、发布管理和交付。
npm install hexo-renderer-pug hexo-renderer-stylus --save
02-23
npm install hexo-renderer-pug hexo-renderer-stylus --save 是一个命令，用于安装 Hexo 博客框架所需的两个插件：hexo-renderer-pug 和 hexo-renderer-stylus。这两个插件分别用于渲染 Pug（以前称为 Jade）和 Stylus 文件。 hexo-renderer-pug 是一个 Hexo 渲染器插件，用于将 Pug 文件转换为 HTML。Pug 是一种高性能的模板引擎，它使用简洁的语法来生成 HTML。 hexo-renderer-stylus 是另一个 Hexo 渲染器插件，用于将 Stylus 文件转换为 CSS。Stylus 是一种动态样式表语言，它具有简洁的语法和强大的功能，可以提高样式表的编写效率。 通过执行 npm install hexo-renderer-pug hexo-renderer-stylus --save 命令，你可以将这两个插件安装到你的 Hexo 项目中，并将它们添加到项目的 package.json 文件中的 dependencies 部分。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

繁星学编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值