主题内新添加内容

_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. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_12.RabbitMQ研究-工作模式-统配符工作模式测试

    路由模式: 1.每个消费者监听自己的队列,并且设置带统配符的routingkey. 2.生产者将消息发给broker,由交换机根据routingkey来转发消息到指定的队列. 创建测试用例 交换机的名 ...

  2. SQLAlchemy如何筛选值为None的列？那么django呢

    示例 from sqlalchemy import create_engine, MetaData, and_, or_, TIMESTAMP Plugin.query.filter(and_(Plu ...

  3. .Netcore 2.0 Ocelot Api网关教程（7）- 限流

    本文介绍Ocelot中的限流,限流允许Api网关控制一段时间内特定api的总访问次数.限流的使用非常简单,只需要添加配置即可. 1.添加限流 修改 configuration.json 配置文件,对  ...

  4. 解决报错Fatal error in launcher

    换电脑重装python,打算安装第三方库的时候出现错误: Fatal error in launcher 然而在网上搜到的大多数是解决 —— Fatal error in launcher: Unab ...

  5. Flutter 实现简单搜索功能

    先建立一个主文件,继承StatelessWidget,然后在home属性中加入SearchBarDemo,这是一个自定义的Widget,主要代码都在这个文件中. import 'package:flu ...

  6. xshell和Xftp连接虚拟机(转载)

    首先连接虚拟机之前,先配置自己的IP地址,见博客https://www.cnblogs.com/xuzhaoyang/p/11264573.html xshell和Xftp下载请到官网http://w ...

  7. ORB-特征点提取代码比较

    ORB特征提取代码测试 整合ICE-BA.ORB-SLAM2.openvslam中的ORB提取代码,并比较速度,方便以后使用 1. ORB-SLAM2 vsICE-BA vs openvslam IC ...

  8. 物联网安全himqtt防火墙数据结构之ringbuffer环形缓冲区

    物联网安全himqtt防火墙数据结构之ringbuffer环形缓冲区 随着5G的普及,物联网安全显得特别重要,himqtt是首款完整源码的高性能MQTT物联网防火墙 - MQTT Applicatio ...

  9. rpm 包安装调试缺少依赖无法安装的方法

    今天在给龙芯中标机器安装360 10.0.2001.1 版本时 发现有依赖过不去. 因为依赖关系而调过软件包: browser360-cn-stable-10.0.2001.0-1.mips64el ...

  10. 性能工具之JMeter+InfluxDB+Grafana打造压测可视化实时监控（centos7环境）

    前提条件,已经安装jmeter并可以运行 1.安装influxdata wget et https://dl.influxdata.com/influxdb/releases/influxdb-1.7 ...