主题内新添加内容

_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. produceTestDate

    set serveroutput on --使用基本变量类型 declare --定义基本变量:类型 --基本数据类型 pnumber , ); pname ); pdate date; begin ...

  2. pch文件的添加

    想说试了好久一直报错找不到文件,解决方法如下: 依次是:./项目名/文件夹名称/pch文件名

  3. 查看进程的命令ps

    查看进程的命令:ps aux strace -p pid(进程id) 杀死进程:kill pid(进程id)强制杀死进程:kill -9 pid(进程id) linux ps 命令查看进程状态linu ...

  4. iOS——偏好设置的创建，数据写入与读取

    NSUserDefaults与NSDictinary? 应用通过NSUserDefaults用键值对的方式来读取和保存偏好设置数据,与通过键从NSDictionary对象中获取数据一样,不同之处在于N ...

  5. Cache数据库新增用户并分配权限(Caché)

    1.通过浏览器登录管理中心,Caché自带的客户端工具是网页的,访问地址:     http://localhost:57772/csp/sys/UtilHome.csp 2.选择功能链接:系统管理- ...

  6. C#中设置自定义控件工具箱图标

    在设计自定义控件时,系统默认生成的图标比较单一难看,如何为控件设计自己的图标呢,这里给出了一种基于ToolBoxBitmap 属性设置自定义控件工具箱图标的方法. 1)首先将图标文件名改为自定义控件名 ...

  7. python-Web-flask-视图内容和模板

    2 视图内容和模板: 基本使用 #设置cookie值 @app.route('/set_cookie') def set_cookie(): response = make_response(&quo ...

  8. hadoop java VM 参数设置 默认native栈大小设置

    问题总结: 程序栈太小,64位机器的栈大小默认比32位的大,将程序从64放到32中执行则报错,需要修改初始堆栈大小 (.so库中提供两个函数接口,一个里面使用的是尺寸较大的图像,另一个处理的图像很小, ...

  9. 【FFMPEG】Windows下使用Visual Studio 2010编译ffmpeg全过程

    原文  http://www.cnblogs.com/xylc/p/3683203.html 主题 FFmpegWindowsVisual Studio ffmpeg是一个开源的多媒体库,使用非常广泛 ...

  10. Qt5."Clang Code Model"一些设置

    1.有些设置 可能这里在设置了,到别的地方(例如换了一个机子) 又要设置,这样的话 在不熟练的时候 手动敲进去会比较慢,这里 先记录下来 以后要用 直接复制就行了 2.Qt5.9.8 vs2017 : ...