主题内新添加内容

_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. ubuntu下virtualbox的安装、卸载

    一.添加VirtualBox的源并安装5.1版本 virtualbox官网:https://www.virtualbox.org/wiki/Download_Old_Builds 虽然也可以直接安装d ...

  2. 神经网络(NN)实现多分类-----Keras实现

    IRIS数据集介绍   IRIS数据集(鸢尾花数据集),是一个经典的机器学习数据集,适合作为多分类问题的测试数据,它的下载地址为:http://archive.ics.uci.edu/ml/machi ...

  3. Java 代码快速注释 和 取消注释

    注释掉代码: 把要注释的代码选中: 加/* */ 形式的注释  ->  Ctrl+Shift+/ 加 //形式的形式的注释 ->  ctrl+/ 取消代码注释: 把要取消注释的代码选中: ...

  4. C/C++笔试基础知识

    1. int *a[10] :指向int类型的指针数组a[10] int (*a)[10]:指向有10个int类型数组的指针a int (*a)(int):函数指针,指向有一个参数并且返回类型均为in ...

  5. git 服务端安装

    服务器端创建 git 用户,用来管理 Git 服务,并为 git 用户设置密码 [root@localhost home]# id git id: git:无此用户 [root@localhost h ...

  6. @RequestBody以及@RequestParam的使用过程区别

    查考地址:https://blog.csdn.net/justry_deng/article/details/80972817 待整理中.....

  7. java中public protected friendly private作用域

    1.public:public表明该数据成员.成员函数是对所有用户开放的,所有用户都可以直接进行调用 2.private:private表示私有,私有的意思就是除了class自己之外,任何人都不可以直 ...

  8. hdu4813 01背包+前缀和

    题意:\(A,B\)两人,有\(N\)个事件,每件发生的概率都为\(0.5\),若事件\(i\)发生,则\(B\)加\(v_i\)分数,若其不发生,则\(B\)不加分,给定一个概率\(P\),问至少需 ...

  9. PHP学习之迭代生成器

    生成器的核心是一个yield关键字,一个生成器函数看起来像一个普通的函数,不同的是.普通函数返回一个值,而一个生成器可以yield生成许多它所需要的值.生成器函数被调用时,返回的是一个可以被遍历的对象 ...

  10. MongoDB环境搭建

    MongoDB系列第一课:MongDB简介 MongoDB系列第二课:MongDB环境搭建 MongoDB系列第三课:MongDB用户管理 MongoDB系列第四课:MongoDB数据库.集合.文档的 ...