主题内新添加内容

_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. 14 Flutter仿京东商城项目 头部搜索导航布局 修改主题 修正ScreenAdapter类

    main.dart import 'package:flutter/material.dart'; import 'routes/router.dart'; void main() => run ...

  2. Qt编写安防视频监控系统11-动态换肤

    一.前言 Qt中的动态换肤技术是非常一流的,直接调用qApp->setStyleSheet(qss);就可以对整个应用程序进行换肤,如果样式表内容不多,或者对应的贴图不对,效率还是蛮好的,不过据 ...

  3. mysql大数据量下优化

    1 优化sql和索引2 增加缓存如:redis3 主从复制或主主复制,读写分离4 利用mysql自带分区表5 先做垂直拆分,将一个大系统分为多个小系统,也就是分布式6 水平切分,要选择一个合理的sha ...

  4. Vue的基础学习

    一.Vue的计算属性:get和set属性 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  5. 关于CAShapeLayer的一些基本操作

    设置圆形进度条: 实现效果如下: 实现代码如下:(注释很详细啦!!!) UIView *circleView = [[UIView alloc]initWithFrame:CGRectMake(, , ...

  6. java 注解@interface

    类注解: package com.cglibs; import java.lang.annotation.ElementType; import java.lang.annotation.Retent ...

  7. c# 子窗体居中父窗体

    1.设置CenterParent不管用.只好用代码控制. frmRunning_ = new FrmRunning(); frmRunning_.StartPosition = FormStartPo ...

  8. linux中文件权限的字母含义

    一.文件系统部分 - 普通文件(文本文件,二进制文件,压缩文件,电影,图片...)d 目录文件(蓝色)b 设备文件(块设备)存储设备硬盘,U盘 /dev/sda, /dev/sda1c 设备文件(字符 ...

  9. Qt——树的搜索实现源码

    一.使用QTreeWidget 头文件: /************************************************************************ 树的搜索类 ...

  10. CentOS7 安装mysql（YUM源方式）

    1.下载mysql源安装包 $ wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm   2.安装mysql ...