Hexo NexT主题内加入动态背景
主题内新添加内容
_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主题内加入动态背景的更多相关文章
- Hexo Next配置百度分享、加入动态背景、接入网页在线联系功能、页脚增加统计功能、添加gitment、添加热度、阅读量排行
Hexo Next配置百度分享.加入动态背景.接入网页在线联系功能.页脚增加统计功能.添加gitment.添加热度.阅读量排行: https://wangc1993.github.io/categor ...
- Hexo next主题添加站内搜索功能
根据关键字搜索博文,站内搜索的功能很实用.hexo开启站内搜索很方便,已经有现成的插件可以使用,也是为了方便自己 安装插件 npm install hexo-generator-search --sa ...
- hexo next主题深度优化(二)，懒加载。
文章目录 tip:没有耐心的可以直接看:正式在hexo next中加入懒加载(最下面) 废话 背景 懒加载简单介绍 引入js 重点!敲黑板了!!! 完善懒加载函数 懒加载函数可配置的参数 正式在hex ...
- 安装配置hexo icarus主题配置
安装部分配置hexo icarus主题配置 安装icarus 直接下载主题模块放到blog项目 ,blog项目根目录执行 git clone https://github.com/ppoffice/h ...
- hexo干货系列：（五）hexo添加站内搜索
前言 本来想用百度站内搜索,但是没成功,所以改用swiftype,用起来还是很棒的,这里分享一下我的安装步骤 正文 注册 去swiftype官网注册个账号,然后登陆,对了不要去在意30天试用,30天过 ...
- hexo next主题深度优化(一)，加入pjax功能。
文章目录 背景: 进入正题 pjax初体验--instantclick 真正的pjax 第一步 第二步 第三步 第四步 专门基于hexo next主题的pjax(将丢失的js效果重现) 将下面讲到的提 ...
- hexo next主题深度优化(五)，评论系统换成gittalk
文章目录 背景: 开始: 新建comments_git.js 找到comments.swig在最后一个endif之前 引入代码 pjax加入gitalk 遇到的问题 所有的页面共享的一个评论issue ...
- hexo next主题中关于pc端点击链接没问题，移动端点击链接页面不显示。
个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景 hexo next主题,本人diy的时候 ...
- Hexo next主题安装algolia
一直在使用hexo写自己的博客,最近博客刚刚搬家重新搞了下博客: 1.为hexo添加站内搜索 我用的是algolia,在next主题5.x以上的版本集成了algolia站内搜索功能,我们只需要简单的配 ...
随机推荐
- linux简单命令7--管道符和通配符
”&&“和管道符“|”不一样. ---------------------------------------------------------通配符---------------- ...
- Linux云服务器磁盘不见了？解决方案在这里，云服务器磁盘挂载
用过诸多种云以后,发现有个通病,就是新买的数据盘在机器中找不到.本篇总结一下此类问题的解决方法,望各位点赞,有问题评论区见 一.云服务和物理机一样,你买了云服务器的数据盘以后,就相当于把数据盘直接安装 ...
- 为TMenuItem增加指针Data属性
Delphi的有些组件中都包含.Data属性,比如TTreeNode,.Data属性可以认为是一个指针,可以指向任何类或者结构,方便后续操作. 但是TMenuItem没有.Data属性,下面介绍最简单 ...
- iOS面试-堆和栈的区别
堆和栈的区别: 一.堆栈空间分配区别: 1.栈(操作系统):由操作系统自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈: 2.堆(操作系统): 一般由程序员分配释放, ...
- Github上的python开源项目
Python开源项目,期待大家和我们一起共同维护 github排名榜单 https://github.com/trending github搜索榜单:https://github.com/search ...
- Flutter的布局方法
重点是什么? Widgets 是用于构建UI的类. Widgets 用于布局和UI元素. 通过简单的widget来构建复杂的widget Flutter布局机制的核心就是widget.在Flutter ...
- 常用CSS媒体查询
@media screen and (orientation: portrait) { /*竖屏 css*/} @media screen and (orientation: landscape) { ...
- laravel 加载指定版本的mongodb
composer require jenssegers/mongodb:3.3 注意开启 php的mongodb的扩展 pecl install mongodb
- windows是下安装nvmw
nvmw:Windows环境下的node多版本管理工具. 安装: 1. git clone https://github.com/hakobera/nvmw.git 2.修改环境变量 计算机 -&g ...
- 安卓运行linux应用程序
安卓是可以运行linux应用程序的,安卓系统原来就基于Linux.但是安卓已经把linux改头换面了.具体方法是安装Termux软件,然后就可以运行pkg命令安装软件包了,希望可以帮助到大家.