主题内新添加内容

_layout.swig

找到themes\next\layout\_layout.swig文件，添加内容：
在<body>里添加：

1
2
3
<div class="bg_content">
<canvas id="canvas"></canvas>
</div>

仍是该文件，在末尾添加：

1
<script type="text/javascript" src="/js/src/dynamic_bg.js"></script>

dynamic_bg.js

在themes\next\source\js\src中新建文件dynamic_bg.js，代码链接中可见：dynamic_bg.js

custom.styl

在themes\next\source\css\_custom\custom.styl文件末尾添加内容：

1
2
3
4
5
6
7
.bg_content {
position: fixed;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
}

Hexo NexT主题内加入动态背景的更多相关文章

  1. Hexo Next配置百度分享、加入动态背景、接入网页在线联系功能、页脚增加统计功能、添加gitment、添加热度、阅读量排行

    Hexo Next配置百度分享.加入动态背景.接入网页在线联系功能.页脚增加统计功能.添加gitment.添加热度.阅读量排行: https://wangc1993.github.io/categor ...

  2. Hexo next主题添加站内搜索功能

    根据关键字搜索博文,站内搜索的功能很实用.hexo开启站内搜索很方便,已经有现成的插件可以使用,也是为了方便自己 安装插件 npm install hexo-generator-search --sa ...

  3. hexo next主题深度优化(二)，懒加载。

    文章目录 tip:没有耐心的可以直接看:正式在hexo next中加入懒加载(最下面) 废话 背景 懒加载简单介绍 引入js 重点!敲黑板了!!! 完善懒加载函数 懒加载函数可配置的参数 正式在hex ...

  4. 安装配置hexo icarus主题配置

    安装部分配置hexo icarus主题配置 安装icarus 直接下载主题模块放到blog项目 ,blog项目根目录执行 git clone https://github.com/ppoffice/h ...

  5. hexo干货系列：（五）hexo添加站内搜索

    前言 本来想用百度站内搜索,但是没成功,所以改用swiftype,用起来还是很棒的,这里分享一下我的安装步骤 正文 注册 去swiftype官网注册个账号,然后登陆,对了不要去在意30天试用,30天过 ...

  6. hexo next主题深度优化(一)，加入pjax功能。

    文章目录 背景: 进入正题 pjax初体验--instantclick 真正的pjax 第一步 第二步 第三步 第四步 专门基于hexo next主题的pjax(将丢失的js效果重现) 将下面讲到的提 ...

  7. hexo next主题深度优化(五)，评论系统换成gittalk

    文章目录 背景: 开始: 新建comments_git.js 找到comments.swig在最后一个endif之前 引入代码 pjax加入gitalk 遇到的问题 所有的页面共享的一个评论issue ...

  8. hexo next主题中关于pc端点击链接没问题，移动端点击链接页面不显示。

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景 hexo next主题,本人diy的时候 ...

  9. Hexo next主题安装algolia

    一直在使用hexo写自己的博客,最近博客刚刚搬家重新搞了下博客: 1.为hexo添加站内搜索 我用的是algolia,在next主题5.x以上的版本集成了algolia站内搜索功能,我们只需要简单的配 ...

随机推荐

  1. 5G 与 MEC 边缘计算

    目录 文章目录 目录 前言 参考文献 通信网络 核心网演进之路 早古时期 2G 网络架构 3G 网络架构 4G 网络架构 5G 5G 网络的需求 5G 网络架构的设计原则 5G 网络的逻辑架构 5G ...

  2. 12Flutter页面布局 AspectRatio和Cart卡片组件

    /* Flutter AspectRatio.Cart卡片组件: AspectRatio的作用是根据设置调整子元素child的宽高比. AspectRatio首先会在布局限制条件允许的范围内尽可能的扩 ...

  3. [Scikit-learn] *2.3 Clustering - MeanShift

    sklearn.cluster.MeanShift Ref: http://scikit-learn.org/stable/auto_examples/cluster/plot_mean_shift. ...

  4. GO 语言常用排序

    1. 冒泡排序(bubble sort)的基本思想:比较相邻两个 元素的关键字值,如果反序,则交换 func BubbleSort(arr []int) { flag := false //外层控制行 ...

  5. Spring Aop（五）——给Advice传参

    转发:https://www.iteye.com/blog/elim-2395337 5 给Advice传递参数 Advice除了可以接收JoinPoint(非Around Advice)或Proce ...

  6. mongodb中对数组的操作命令

    mongodb中对数组的操作命令有$push.$ne.$addtoset.$pop.$pull ###addtoset会碰到的问题addtoset解释: 往数组里面加入数据,如果数组里已经存在,则不会 ...

  7. （IStool）删除新版本已废弃但可能会影响新版本运行的文件夹/文件

    需求:老版本服务器的某些文件或文件夹在新版本已弃用,新版本覆盖安装时需要将文件夹或文件删除 实现:覆盖安装完成后将对应目录下的文件删除 [InstallDelete] Type: files; Nam ...

  8. flask数据库连接池DBUtils

    数据库连接池 为啥要使用数据库连接池 频繁的连接和断开数据库,消耗大,效率低 DBUtils可以创建多个线程连接数据库,且一直保持连接,不会断开 执行数据库操作时,由数据池分配线程,当数据池空时,可选 ...

  9. nload 安装和使用

    nload是一个很小巧的工具,用来监控当前系统的网速 安装 MAC brew install nload Linux 下载地址:https://sourceforge.net/projects/nlo ...

  10. 02.03 win server r2 搭建FTP站点

    ============ftp服务器搭建=============== 先要搭建iis信息服务: 1.打开服务器管理器,角色>添加角色 2.选择角色服务:应用程序开发.FTP服务器.安全性 3. ...