前言

需要在Hexo下配置next主题

Hexo配置next主题教程：https://www.cnblogs.com/xuande/p/16641543.html

更改配置以后使用素质三连：hexo clean && hexo g && hexo s即可本地看到效果。

  1. hexo clean && hexo g && hexo s

注：部分参考自互联网，感谢各位大佬的教程

主题注入

在myblog/themes/next/_config.yml里面找到custom_file_path

把前面的注释去掉，开启主题注入功能

  1. custom_file_path:
  2.   style: source/_data/styles.styl

找到myblog\blog\source\_data\styles.styl如果没有就创建一个

资源文件文件在myblog\blog\themes\xuande\source\images目录下配置

鼠标样式

注意开启主题注入功能

在myblog\blog\source\_data\styles.styl里面添加如下代码即可

  1. /*鼠标样式*/
  2. * {
  3.   cursor: url(/images/Arrow.cur),auto;
  4. }
  5. :active {
  6.   // cursor: url(/images/Hand.cur),auto
  7. }
  8. :link {
  9.   cursor: url(/images/Hand.cur),auto
  10. }
  11. // 鼠标样式补充
  12. a, span.exturl {
  13. 	cursor: url(/images/Hand.cur),auto
  14. }
  15. .posts-expand .post-meta time {
  16. 	cursor: url(/images/Hand.cur),auto
  17. }

这里的url路径就是myblog\blog\themes\xuande\source\images\Arrow.cur，下面同理

背景图片

注意开启主题注入功能

在myblog\blog\source\_data\styles.styl里面添加如下代码即可

  1. // 添加背景图片
  2. body {
  3.       background: url(/images/background.png);//自己喜欢的图片地址
  4.       background-size: cover;
  5.       background-repeat: no-repeat;
  6.       background-attachment: fixed;
  7.       background-position: 50% 50%;
  8. }

自定义回到顶部样式

注意开启主题注入功能

在myblog\blog\source\_data\styles.styl里面添加如下代码即可

  1. //自定义回到顶部样式
  2. .back-to-top {
  3.   //right: 60px;
  4.   width: 70px;  //图片素材宽度
  5.   height: 900px;  //图片素材高度
  6.   top: -900px;
  7.   bottom: unset;
  8.   transition: all .5s ease-in-out;
  9.   background: url("/images/scroll.png");
  10.   //隐藏箭头图标
  11.   > i {
  12.     display: none;
  13.   }
  14.   &.back-to-top-on {
  15.     bottom: unset;
  16.     top: 100vh < (900px + 200px) ? calc( 100vh - 900px - 200px ) : 0px;
  17.   }
  18. }

自定义网站图标

在myblog/themes/next/_config.yml里面找到favicon，在这里就可以配置图标的路径，一般情况下只需要设置small和medium两个就可以

  1. favicon:
  2.   small: /images/16x16-paimeng.png
  3.   medium: /images/32x32-paimeng.png
  4.   apple_touch_icon: /images/apple-touch-icon-next.png
  5.   safari_pinned_tab: /images/logo.svg

png文件在myblog\blog\themes\xuande\source\images目录下配置即可

效果：

设置侧边栏

在myblog/themes/next/_config.yml里面找到sidebar

修改为如下配置：

  1. sidebar:
  2.   # Sidebar Position.
  3.   position: left
  4.   #position: right
  6.   # Manual define the sidebar width. If commented, will be default for:
  7.   # Muse | Mist: 320
  8.   # Pisces | Gemini: 240
  9.   #width: 300
  11.   # Sidebar Display (only for Muse | Mist), available values:
  12.   #  - post    expand on posts automatically. Default.
  13.   #  - always  expand for all pages automatically.
  14.   #  - hide    expand only when click on the sidebar toggle icon.
  15.   #  - remove  totally remove sidebar including sidebar toggle.
  16.   display: post
  18.   # Sidebar padding in pixels.
  19.   padding: 18
  20.   # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  21.   offset: 12

开启返回顶部功能

在myblog/themes/next/_config.yml里面找到back2top

修改为如下配置：

  1. back2top:
  2.   enable: true
  3.   # Back to top in sidebar.
  4.   sidebar: false
  5.   # Scroll percent label in b2t button.
  6.   scrollpercent: false

侧边栏头像设置

在myblog/themes/next/_config.yml里面找到avatr

  1. # 侧栏头像
  2. # Sidebar Avatar
  3. avatar:
  4.   url: /images/avatar.png
  5.   rounded: true
  6.   rotated: true
  8. site_state: true

图片在myblog\blog\themes\xuande\source\images目录下配置即可

鼠标移动特效

在myblog\themes\next\source\js\中新建fairyDustCursor.js文件，并添加以下代码

  1. (function fairyDustCursor() {
  3.   var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
  4.   var width = window.innerWidth;
  5.   var height = window.innerHeight;
  6.   var cursor = {x: width/2, y: width/2};
  7.   var particles = [];
  9.   function init() {
  10.     bindEvents();
  11.     loop();
  12.   }
  14.   // Bind events that are needed
  15.   function bindEvents() {
  16.     document.addEventListener('mousemove', onMouseMove);
  17.     document.addEventListener('touchmove', onTouchMove);
  18.     document.addEventListener('touchstart', onTouchMove);
  20.     window.addEventListener('resize', onWindowResize);
  21.   }
  23.   function onWindowResize(e) {
  24.     width = window.innerWidth;
  25.     height = window.innerHeight;
  26.   }
  28.   function onTouchMove(e) {
  29.     if( e.touches.length > 0 ) {
  30.       for( var i = 0; i < e.touches.length; i++ ) {
  31.         addParticle( e.touches[i].clientX, e.touches[i].clientY, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
  32.       }
  33.     }
  34.   }
  36.   function onMouseMove(e) {
  37.     cursor.x = e.clientX;
  38.     cursor.y = e.clientY;
  40.     addParticle( cursor.x, cursor.y, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
  41.   }
  43.   function addParticle(x, y, color) {
  44.     var particle = new Particle();
  45.     particle.init(x, y, color);
  46.     particles.push(particle);
  47.   }
  49.   function updateParticles() {
  51.     for( var i = 0; i < particles.length; i++ ) {
  52.       particles[i].update();
  53.     }
  55.     for( var i = particles.length -1; i >= 0; i-- ) {
  56.       if( particles[i].lifeSpan < 0 ) {
  57.         particles[i].die();
  58.         particles.splice(i, 1);
  59.       }
  60.     }
  62.   }
  64.   function loop() {
  65.     requestAnimationFrame(loop);
  66.     updateParticles();
  67.   }
  69.   function Particle() {
  71.     this.character = "*";
  72.     this.lifeSpan = 120; //ms
  73.     this.initialStyles ={
  74.       "position": "fixed",
  75.       "top": "0", //必须加
  76.       "display": "block",
  77.       "pointerEvents": "none",
  78.       "z-index": "10000000",
  79.       "fontSize": "20px",
  80.       "will-change": "transform"
  81.     };
  83.     this.init = function(x, y, color) {
  85.       this.velocity = {
  86.         x:  (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
  87.         y: 1
  88.       };
  90.       this.position = {x: x - 10, y: y - 20};
  91.       this.initialStyles.color = color;
  92.       console.log(color);
  94.       this.element = document.createElement('span');
  95.       this.element.innerHTML = this.character;
  96.       applyProperties(this.element, this.initialStyles);
  97.       this.update();
  99.       document.body.appendChild(this.element);
  100.     };
  102.     this.update = function() {
  103.       this.position.x += this.velocity.x;
  104.       this.position.y += this.velocity.y;
  105.       this.lifeSpan--;
  107.       this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")";
  108.     }
  110.     this.die = function() {
  111.       this.element.parentNode.removeChild(this.element);
  112.     }
  114.   }
  116.   function applyProperties( target, properties ) {
  117.     for( var key in properties ) {
  118.       target.style[ key ] = properties[ key ];
  119.     }
  120.   }
  122.   init();
  123. })();

然后在myblog\themes\next\layout_layout.njk文件里内部引用：

  1. <!-- 樱花特效 -->
  2.   {% if theme.sakura.enable %}
  3.       <script async src="/js/src/fairyDustCursor.js"></script>
  4.   {% endif %}

最后打开myblog/themes/next/_config.yml在最下面添加如下代码

  1. # 樱花飘落动特效
  2. sakura:
  3.   enable: true

鼠标点击特效

首先在themes\next\source\js\cursor\ 目录下创建love.min.js

在里面添加如下代码：

  1. !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

text.js浮出文字代码

  1. var a_idx = 0;
  2. jQuery(document).ready(function($) {
  3.   $("body").click(function(e) {
  4.     var a = new Array("喜欢我", "不喜欢我");
  5.     var $i = $("<span/>").text(a[a_idx]);
  6.     var x = e.pageX,
  7.     y = e.pageY;
  8.     $i.css({
  9.       "z-index": 99999,
  10.       "top": y - 28,
  11.       "left": x - a[a_idx].length * 8,
  12.       "position": "absolute",
  13.       "color": "#ff7a45"
  14.     });
  15.     $("body").append($i);
  16.     $i.animate({
  17.       "top": y - 180,
  18.       "opacity": 0
  19.     }, 1500, function() {
  20.       $i.remove();
  21.     });
  22.     a_idx = (a_idx + 1) % a.length;
  23.   });
  24. });

fireworks.js礼花特效代码

  1. class Circle {
  2.   constructor({ origin, speed, color, angle, context }) {
  3.     this.origin = origin
  4.     this.position = { ...this.origin }
  5.     this.color = color
  6.     this.speed = speed
  7.     this.angle = angle
  8.     this.context = context
  9.     this.renderCount = 0
  10.   }
  12.   draw() {
  13.     this.context.fillStyle = this.color
  14.     this.context.beginPath()
  15.     this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
  16.     this.context.fill()
  17.   }
  19.   move() {
  20.     this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
  21.     this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
  22.     this.renderCount++
  23.   }
  24. }
  26. class Boom {
  27.   constructor ({ origin, context, circleCount = 16, area }) {
  28.     this.origin = origin
  29.     this.context = context
  30.     this.circleCount = circleCount
  31.     this.area = area
  32.     this.stop = false
  33.     this.circles = []
  34.   }
  36.   randomArray(range) {
  37.     const length = range.length
  38.     const randomIndex = Math.floor(length * Math.random())
  39.     return range[randomIndex]
  40.   }
  42.   randomColor() {
  43.     const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
  44.     return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
  45.   }
  47.   randomRange(start, end) {
  48.     return (end - start) * Math.random() + start
  49.   }
  51.   init() {
  52.     for(let i = 0; i < this.circleCount; i++) {
  53.       const circle = new Circle({
  54.         context: this.context,
  55.         origin: this.origin,
  56.         color: this.randomColor(),
  57.         angle: this.randomRange(Math.PI - 1, Math.PI + 1),
  58.         speed: this.randomRange(1, 6)
  59.       })
  60.       this.circles.push(circle)
  61.     }
  62.   }
  64.   move() {
  65.     this.circles.forEach((circle, index) => {
  66.       if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
  67.         return this.circles.splice(index, 1)
  68.       }
  69.       circle.move()
  70.     })
  71.     if (this.circles.length == 0) {
  72.       this.stop = true
  73.     }
  74.   }
  76.   draw() {
  77.     this.circles.forEach(circle => circle.draw())
  78.   }
  79. }
  81. class CursorSpecialEffects {
  82.   constructor() {
  83.     this.computerCanvas = document.createElement('canvas')
  84.     this.renderCanvas = document.createElement('canvas')
  86.     this.computerContext = this.computerCanvas.getContext('2d')
  87.     this.renderContext = this.renderCanvas.getContext('2d')
  89.     this.globalWidth = window.innerWidth
  90.     this.globalHeight = window.innerHeight
  92.     this.booms = []
  93.     this.running = false
  94.   }
  96.   handleMouseDown(e) {
  97.     const boom = new Boom({
  98.       origin: { x: e.clientX, y: e.clientY },
  99.       context: this.computerContext,
  100.       area: {
  101.         width: this.globalWidth,
  102.         height: this.globalHeight
  103.       }
  104.     })
  105.     boom.init()
  106.     this.booms.push(boom)
  107.     this.running || this.run()
  108.   }
  110.   handlePageHide() {
  111.     this.booms = []
  112.     this.running = false
  113.   }
  115.   init() {
  116.     const style = this.renderCanvas.style
  117.     style.position = 'fixed'
  118.     style.top = style.left = 0
  119.     style.zIndex = '999999999999999999999999999999999999999999'
  120.     style.pointerEvents = 'none'
  122.     style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
  123.     style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight
  125.     document.body.append(this.renderCanvas)
  127.     window.addEventListener('mousedown', this.handleMouseDown.bind(this))
  128.     window.addEventListener('pagehide', this.handlePageHide.bind(this))
  129.   }
  131.   run() {
  132.     this.running = true
  133.     if (this.booms.length == 0) {
  134.       return this.running = false
  135.     }
  137.     requestAnimationFrame(this.run.bind(this))
  139.     this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
  140.     this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
  142.     this.booms.forEach((boom, index) => {
  143.       if (boom.stop) {
  144.         return this.booms.splice(index, 1)
  145.       }
  146.       boom.move()
  147.       boom.draw()
  148.     })
  149.     this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
  150.   }
  151. }
  153. const cursorSpecialEffects = new CursorSpecialEffects()
  154. cursorSpecialEffects.init()

然后我们在主题自定义布局文件hexo/source/_data/body-end.swig中，没有就创建一个，在里面添加以下代码：

  1. {# 鼠标点击特效 #}
  2. {% if theme.cursor_effect == "fireworks" %}
  3.   <script async src="/js/cursor/fireworks.js"></script>
  4. {% elseif theme.cursor_effect == "explosion" %}
  5.   <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
  6.   <script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
  7.   <script async src="/js/cursor/explosion.min.js"></script>
  8. {% elseif theme.cursor_effect == "love" %}
  9.   <script async src="/js/cursor/love.min.js"></script>
  10. {% elseif theme.cursor_effect == "text" %}
  11.   <script async src="/js/cursor/text.js"></script>
  12. {% endif %}

在主题注入里取消 body-end.swig 的注释（主题注入教程在上面）

  1. custom_file_path:
  2. bodyEnd: source/_data/body-end.swig

最后打开myblog/themes/next/_config.yml在最下面添加如下代码

  1. # 鼠标点击特效
  2. # mouse click effect: fireworks | explosion | love | text
  3. cursor_effect: love
  5. # 打字特效
  6. # typing effect
  7. typing_effect:
  8.   colorful: false  # 礼花特效
  9.   shake: false    # 震动特效

自定义侧栏时间

效果如图：

首先打开myblog\blog\themes\xuande\layout\_macro\sidebar.njk

添加如下代码：

  1.       <!-- canvas粒子时钟 -->
  2.       {% if theme.diy_time.clock.enable %}
  3.         {% include '../_custom/clock.swig' %}
  4.       {% endif %}
  6.       <!-- 网站运行时间 -->
  7.       {% if theme.diy_time.runtime.enable %}
  8.         {% include '../_custom/runtime.swig' %}
  9.       {% endif %}

然后打开myblog\blog\themes\xuande\layout_custom新建clock.swig文件

在里面添加如下代码：

  1. <!-- canvas粒子时钟 https://www.cnblogs.com/xiaohuochai/p/6368039.html
  2.   https://www.html5tricks.com/html5-canvas-dance-time.html
  3.  -->
  4. <div id="">
  5.   <canvas id="canvas" style="width:60%;">
  6. </div>
  7. <script async>
  8. (function(){
  9.   var WINDOW_WIDTH = 820;
  10.   		var WINDOW_HEIGHT = 250;
  11.   		var RADIUS = 7; //球半径
  12.   		var NUMBER_GAP = 10; //数字之间的间隙
  13.   		var u=0.65; //碰撞能量损耗系数
  14.   		var context; //Canvas绘制上下文
  15.   		var balls = []; //存储彩色的小球
  16.   		const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]; //彩色小球的颜色
  17.   		var currentNums = []; //屏幕显示的8个字符
  18.   		var digit =
  19.                   [
  20.                       [
  21.                           [0,0,1,1,1,0,0],
  22.                           [0,1,1,0,1,1,0],
  23.                           [1,1,0,0,0,1,1],
  24.                           [1,1,0,0,0,1,1],
  25.                           [1,1,0,0,0,1,1],
  26.                           [1,1,0,0,0,1,1],
  27.                           [1,1,0,0,0,1,1],
  28.                           [1,1,0,0,0,1,1],
  29.                           [0,1,1,0,1,1,0],
  30.                           [0,0,1,1,1,0,0]
  31.                       ],//0
  32.                       [
  33.                           [0,0,0,1,1,0,0],
  34.                           [0,1,1,1,1,0,0],
  35.                           [0,0,0,1,1,0,0],
  36.                           [0,0,0,1,1,0,0],
  37.                           [0,0,0,1,1,0,0],
  38.                           [0,0,0,1,1,0,0],
  39.                           [0,0,0,1,1,0,0],
  40.                           [0,0,0,1,1,0,0],
  41.                           [0,0,0,1,1,0,0],
  42.                           [1,1,1,1,1,1,1]
  43.                       ],//1
  44.                       [
  45.                           [0,1,1,1,1,1,0],
  46.                           [1,1,0,0,0,1,1],
  47.                           [0,0,0,0,0,1,1],
  48.                           [0,0,0,0,1,1,0],
  49.                           [0,0,0,1,1,0,0],
  50.                           [0,0,1,1,0,0,0],
  51.                           [0,1,1,0,0,0,0],
  52.                           [1,1,0,0,0,0,0],
  53.                           [1,1,0,0,0,1,1],
  54.                           [1,1,1,1,1,1,1]
  55.                       ],//2
  56.                       [
  57.                           [1,1,1,1,1,1,1],
  58.                           [0,0,0,0,0,1,1],
  59.                           [0,0,0,0,1,1,0],
  60.                           [0,0,0,1,1,0,0],
  61.                           [0,0,1,1,1,0,0],
  62.                           [0,0,0,0,1,1,0],
  63.                           [0,0,0,0,0,1,1],
  64.                           [0,0,0,0,0,1,1],
  65.                           [1,1,0,0,0,1,1],
  66.                           [0,1,1,1,1,1,0]
  67.                       ],//3
  68.                       [
  69.                           [0,0,0,0,1,1,0],
  70.                           [0,0,0,1,1,1,0],
  71.                           [0,0,1,1,1,1,0],
  72.                           [0,1,1,0,1,1,0],
  73.                           [1,1,0,0,1,1,0],
  74.                           [1,1,1,1,1,1,1],
  75.                           [0,0,0,0,1,1,0],
  76.                           [0,0,0,0,1,1,0],
  77.                           [0,0,0,0,1,1,0],
  78.                           [0,0,0,1,1,1,1]
  79.                       ],//4
  80.                       [
  81.                           [1,1,1,1,1,1,1],
  82.                           [1,1,0,0,0,0,0],
  83.                           [1,1,0,0,0,0,0],
  84.                           [1,1,1,1,1,1,0],
  85.                           [0,0,0,0,0,1,1],
  86.                           [0,0,0,0,0,1,1],
  87.                           [0,0,0,0,0,1,1],
  88.                           [0,0,0,0,0,1,1],
  89.                           [1,1,0,0,0,1,1],
  90.                           [0,1,1,1,1,1,0]
  91.                       ],//5
  92.                       [
  93.                           [0,0,0,0,1,1,0],
  94.                           [0,0,1,1,0,0,0],
  95.                           [0,1,1,0,0,0,0],
  96.                           [1,1,0,0,0,0,0],
  97.                           [1,1,0,1,1,1,0],
  98.                           [1,1,0,0,0,1,1],
  99.                           [1,1,0,0,0,1,1],
  100.                           [1,1,0,0,0,1,1],
  101.                           [1,1,0,0,0,1,1],
  102.                           [0,1,1,1,1,1,0]
  103.                       ],//6
  104.                       [
  105.                           [1,1,1,1,1,1,1],
  106.                           [1,1,0,0,0,1,1],
  107.                           [0,0,0,0,1,1,0],
  108.                           [0,0,0,0,1,1,0],
  109.                           [0,0,0,1,1,0,0],
  110.                           [0,0,0,1,1,0,0],
  111.                           [0,0,1,1,0,0,0],
  112.                           [0,0,1,1,0,0,0],
  113.                           [0,0,1,1,0,0,0],
  114.                           [0,0,1,1,0,0,0]
  115.                       ],//7
  116.                       [
  117.                           [0,1,1,1,1,1,0],
  118.                           [1,1,0,0,0,1,1],
  119.                           [1,1,0,0,0,1,1],
  120.                           [1,1,0,0,0,1,1],
  121.                           [0,1,1,1,1,1,0],
  122.                           [1,1,0,0,0,1,1],
  123.                           [1,1,0,0,0,1,1],
  124.                           [1,1,0,0,0,1,1],
  125.                           [1,1,0,0,0,1,1],
  126.                           [0,1,1,1,1,1,0]
  127.                       ],//8
  128.                       [
  129.                           [0,1,1,1,1,1,0],
  130.                           [1,1,0,0,0,1,1],
  131.                           [1,1,0,0,0,1,1],
  132.                           [1,1,0,0,0,1,1],
  133.                           [0,1,1,1,0,1,1],
  134.                           [0,0,0,0,0,1,1],
  135.                           [0,0,0,0,0,1,1],
  136.                           [0,0,0,0,1,1,0],
  137.                           [0,0,0,1,1,0,0],
  138.                           [0,1,1,0,0,0,0]
  139.                       ],//9
  140.                       [
  141.                           [0,0,0,0],
  142.                           [0,0,0,0],
  143.                           [0,1,1,0],
  144.                           [0,1,1,0],
  145.                           [0,0,0,0],
  146.                           [0,0,0,0],
  147.                           [0,1,1,0],
  148.                           [0,1,1,0],
  149.                           [0,0,0,0],
  150.                           [0,0,0,0]
  151.                       ]//:
  152.                   ];
  154.   		function drawDatetime(cxt){
  155.   			var nums = [];
  157.   			context.fillStyle="#005eac"
  158.   			var date = new Date();
  159.   			var offsetX = 70, offsetY = 30;
  160.   			var hours = date.getHours();
  161.   			var num1 = Math.floor(hours/10);
  162.   			var num2 = hours%10;
  163.   			nums.push({num: num1});
  164.   			nums.push({num: num2});
  165.   			nums.push({num: 10}); //冒号
  166.   			var minutes = date.getMinutes();
  167.   			var num1 = Math.floor(minutes/10);
  168.   			var num2 = minutes%10;
  169.   			nums.push({num: num1});
  170.   			nums.push({num: num2});
  171.   			nums.push({num: 10}); //冒号
  172.   			var seconds = date.getSeconds();
  173.   			var num1 = Math.floor(seconds/10);
  174.   			var num2 = seconds%10;
  175.   			nums.push({num: num1});
  176.   			nums.push({num: num2});
  178.   			for(var x = 0;x<nums.length;x++){
  179.   				nums[x].offsetX = offsetX;
  180.   				offsetX = drawSingleNumber(offsetX,offsetY, nums[x].num,cxt);
  181.   				//两个数字连一块，应该间隔一些距离
  182.   				if(x<nums.length-1){
  183.   					if((nums[x].num!=10) &&(nums[x+1].num!=10)){
  184.   						offsetX+=NUMBER_GAP;
  185.   					}
  186.   				}
  187.   			}
  189.   			//说明这是初始化
  190.   			if(currentNums.length ==0){
  191.   				currentNums = nums;
  192.   			}else{
  193.   				//进行比较
  194.   				for(var index = 0;index<currentNums.length;index++){
  195.   					if(currentNums[index].num!=nums[index].num){
  196.   						//不一样时，添加彩色小球
  197.   						addBalls(nums[index]);
  198.   						currentNums[index].num=nums[index].num;
  199.   					}
  200.   				}
  201.   			}
  202.   			renderBalls(cxt);
  203.   			updateBalls();
  205.   			return date;
  206.   		}
  208.   		function addBalls (item) {
  209.   			var num = item.num;
  210.   			var numMatrix = digit[num];
  211.   			for(var y = 0;y<numMatrix.length;y++){
  212.   				for(var x = 0;x<numMatrix[y].length;x++){
  213.   					if(numMatrix[y][x]==1){
  214.   						var ball={
  215.   							offsetX:item.offsetX+RADIUS+RADIUS*2*x,
  216.   							offsetY:30+RADIUS+RADIUS*2*y,
  217.   							color:colors[Math.floor(Math.random()*colors.length)],
  218.   							g:1.5+Math.random(),
  219.   							vx:Math.pow(-1, Math.ceil(Math.random()*10))*4+Math.random(),
  220.   							vy:-5
  221.   						}
  222.   						balls.push(ball);
  223.   					}
  224.   				}
  225.   			}
  226.   		}
  228.   		function renderBalls(cxt){
  229.   			for(var index = 0;index<balls.length;index++){
  230.   				cxt.beginPath();
  231.   				cxt.fillStyle=balls[index].color;
  232.   				cxt.arc(balls[index].offsetX, balls[index].offsetY, RADIUS, 0, 2*Math.PI);
  233.   				cxt.fill();
  234.   			}
  235.   		}
  237.   		function updateBalls () {
  238.   			var i =0;
  239.   			for(var index = 0;index<balls.length;index++){
  240.   				var ball = balls[index];
  241.   				ball.offsetX += ball.vx;
  242.   				ball.offsetY += ball.vy;
  243.   				ball.vy+=ball.g;
  244.   				if(ball.offsetY > (WINDOW_HEIGHT-RADIUS)){
  245.   					ball.offsetY= WINDOW_HEIGHT-RADIUS;
  246.   					ball.vy=-ball.vy*u;
  247.   				}
  248.   				if(ball.offsetX>RADIUS&&ball.offsetX<(WINDOW_WIDTH-RADIUS)){
  250.   					balls[i]=balls[index];
  251.   					i++;
  252.   				}
  253.   			}
  254.   			//去除出边界的球
  255.   			for(;i<balls.length;i++){
  256.   				balls.pop();
  257.   			}
  258.   		}
  259.   		function drawSingleNumber(offsetX, offsetY, num, cxt){
  260.   			var numMatrix = digit[num];
  261.   			for(var y = 0;y<numMatrix.length;y++){
  262.   				for(var x = 0;x<numMatrix[y].length;x++){
  263.   					if(numMatrix[y][x]==1){
  264.   						cxt.beginPath();
  265.   						cxt.arc(offsetX+RADIUS+RADIUS*2*x,offsetY+RADIUS+RADIUS*2*y,RADIUS,0,2*Math.PI);
  266.   						cxt.fill();
  267.   					}
  268.   				}
  269.   			}
  270.   			cxt.beginPath();
  271.   			offsetX += numMatrix[0].length*RADIUS*2;
  272.   			return offsetX;
  273.   		}
  275.   		var canvas = document.getElementById("canvas");
  276.   		canvas.width=WINDOW_WIDTH;
  277.   		canvas.height=WINDOW_HEIGHT;
  278.   		context = canvas.getContext("2d");
  280.   		//记录当前绘制的时刻
  281.   		var currentDate = new Date();
  283.   		setInterval(function(){
  284.   			//清空整个Canvas，重新绘制内容
  285.   			context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  286.   			drawDatetime(context);
  287.   		}, 50)
  288. })();
  289. </script>

最后打开myblog/themes/next/_config.yml在最下面添加如下代码

  1. # 侧栏自定义时间
  2. diy_time:
  3.   runtime:
  4.     enable: true #运行时间
  5.     birthday: "07/25/2022 12:00:00"
  6.   clock:
  7.     enable: true # 粒子

live2d高级看板娘

简单Demo

导入 Font Awesome 图标支持

  1. <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css">

把下面代码放入你的博客根目录下\themes\xuande\layout\_layout.njk里面（也可能是_layout.swig，取决于你的next版本）

  1. <script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

放置位置如下：

最后在打开myblog/themes/next/_config.yml在最下面添加如下代码

  1. # 看板娘
  2. live2d:
  3.   enable: true

注：也可以把这两行代码删掉，可以防止与自带看板娘冲突

  1.       {% if theme.live2d.enable %}
  2.       {% endif %}

这样一个萌萌哒的看板娘就出来啦

注：如果跟自带的看板娘冲突，请先卸载自带的看板娘

自定义看板娘

首先，先把文件克隆到你的博客的source目录下（根目录下和主题目录下的sources都可以）

  1. git clone https://github.com/stevenjoezhang/live2d-widget.git

其次，更改一下引用路径

_layout.njk：

source\live2d\autoload.js：

这样，就可以在waifu-tips.js和waifu-tips.json里面更改活动检测和对话内容了

（注：gitee有文字检测功能，如果提示违规就删掉waifu-tips.json里的"click"对话的部分文字，这gitee的检测机制我是真的服。。。。）

补充

以上是在本地更改，也可以在GitHub上Fork一份，然后用cdn加载也是可以的，条条大路通罗马嘛

如果cdn访问不了的话，不妨试试api

source\live2d\autoload.js：

添加看板娘模型：

这里我没试过，但思路是有的，留个期待，以后完善

轮播图设置

第一步：添加配置

找到博客目录下的themes\next\layout下的index文件

添加下面这一行代码

  1. {% include '_macro/carousel.swig' %}

第二步：添加文件

在themes\next\layout\macro文件下创建carousel.swig文件。

写入以下内容：

  1. {% if theme.carousel.enable %}
  2. <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  3. <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  5. <style type="text/css">
  7. .glyphicon-chevron-left:before{
  8. 	content: "《"
  9. }
  10. .glyphicon-chevron-right:before{
  11. 	content: "》"
  12. }
  14. @media (max-width: 767px){
  15. 	.rights{
  16. 		display: none;
  17. 	}
  18. 	.carousel{
  19. 		width: 100% !important;
  20. 		height: 100% !important;
  21. 	}
  22. 	.slide{
  23. 		width: 100% !important;
  24. 		height: 100% !important;
  25. 	}
  27. }
  29. .carousel{
  30. 	width: 100%;
  31. 	height: 100%;
  32. 	position: relative;
  33. }
  35. .carousel-inner {
  36.   position: relative;
  37.   overflow: hidden;
  38.   width: 100%;
  39. }
  40. .carousel-inner > .item {
  41.   display: none;
  42.   position: relative;
  43.   -webkit-transition: 0.6s ease-in-out left;
  44.   -o-transition: 0.6s ease-in-out left;
  45.   transition: 0.6s ease-in-out left;
  46. }
  47. .carousel-inner > .item > img,
  48. .carousel-inner > .item > a > img {
  49.   line-height: 1;
  50. }
  51. @media all and (transform-3d), (-webkit-transform-3d) {
  52.   .carousel-inner > .item {
  53.     -webkit-transition: -webkit-transform 0.6s ease-in-out;
  54.     -moz-transition: -moz-transform 0.6s ease-in-out;
  55.     -o-transition: -o-transform 0.6s ease-in-out;
  56.     transition: transform 0.6s ease-in-out;
  57.     -webkit-backface-visibility: hidden;
  58.     -moz-backface-visibility: hidden;
  59.     backface-visibility: hidden;
  60.     -webkit-perspective: 1000px;
  61.     -moz-perspective: 1000px;
  62.     perspective: 1000px;
  63.   }
  64.   .carousel-inner > .item.next,
  65.   .carousel-inner > .item.active.right {
  66.     -webkit-transform: translate3d(100%, 0, 0);
  67.     transform: translate3d(100%, 0, 0);
  68.     left: 0;
  69.   }
  70.   .carousel-inner > .item.prev,
  71.   .carousel-inner > .item.active.left {
  72.     -webkit-transform: translate3d(-100%, 0, 0);
  73.     transform: translate3d(-100%, 0, 0);
  74.     left: 0;
  75.   }
  76.   .carousel-inner > .item.next.left,
  77.   .carousel-inner > .item.prev.right,
  78.   .carousel-inner > .item.active {
  79.     -webkit-transform: translate3d(0, 0, 0);
  80.     transform: translate3d(0, 0, 0);
  81.     left: 0;
  82.   }
  83. }
  84. .carousel-inner > .active,
  85. .carousel-inner > .next,
  86. .carousel-inner > .prev {
  87.   display: block;
  88. }
  89. .carousel-inner > .active {
  90.   left: 0;
  91. }
  92. .carousel-inner > .next,
  93. .carousel-inner > .prev {
  94.   position: absolute;
  95.   top: 0;
  96.   width: 100%;
  97. }
  98. .carousel-inner > .next {
  99.   left: 100%;
  100. }
  101. .carousel-inner > .prev {
  102.   left: -100%;
  103. }
  104. .carousel-inner > .next.left,
  105. .carousel-inner > .prev.right {
  106.   left: 0;
  107. }
  108. .carousel-inner > .active.left {
  109.   left: -100%;
  110. }
  111. .carousel-inner > .active.right {
  112.   left: 100%;
  113. }
  114. .carousel-control {
  115.   position: absolute;
  116.   top: 0;
  117.   left: 0;
  118.   bottom: 0;
  119.   width: 15%;
  120.   opacity: 0.5;
  121.   filter: alpha(opacity=50);
  122.   font-size: 20px;
  123.   color: #fff;
  124.   text-align: center;
  125.   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  126.   background-color: rgba(0, 0, 0, 0);
  127. }
  128. .carousel-control.left {
  129.   background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  130.   background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  131.   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  132.   background-repeat: repeat-x;
  133.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
  134. }
  135. .carousel-control.right {
  136.   left: auto;
  137.   right: 0;
  138.   background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  139.   background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  140.   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  141.   background-repeat: repeat-x;
  142.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
  143. }
  144. .carousel-control:hover,
  145. .carousel-control:focus {
  146.   outline: 0;
  147.   color: #fff;
  148.   text-decoration: none;
  149.   opacity: 0.9;
  150.   filter: alpha(opacity=90);
  151. }
  152. .carousel-control .icon-prev,
  153. .carousel-control .icon-next,
  154. .carousel-control .glyphicon-chevron-left,
  155. .carousel-control .glyphicon-chevron-right {
  156.   position: absolute;
  157.   top: 50%;
  158.   margin-top: -10px;
  159.   z-index: 5;
  160.   display: inline-block;
  161. }
  162. .carousel-control .icon-prev,
  163. .carousel-control .glyphicon-chevron-left {
  164.   left: 50%;
  165.   margin-left: -10px;
  166. }
  167. .carousel-control .icon-next,
  168. .carousel-control .glyphicon-chevron-right {
  169.   right: 50%;
  170.   margin-right: -10px;
  171. }
  172. .carousel-control .icon-prev,
  173. .carousel-control .icon-next {
  174.   width: 20px;
  175.   height: 20px;
  176.   line-height: 1;
  177.   font-family: serif;
  178. }
  179. .carousel-control .icon-prev:before {
  180.   content: '\2039';
  181. }
  182. .carousel-control .icon-next:before {
  183.   content: '\203a';
  184. }
  185. .carousel-indicators {
  186.   position: absolute;
  187.   bottom: 10px;
  188.   left: 50%;
  189.   z-index: 15;
  190.   width: 60%;
  191.   margin-left: -30%;
  192.   padding-left: 0;
  193.   list-style: none;
  194.   text-align: center;
  195. }
  196. .carousel-indicators li {
  197.   display: inline-block;
  198.   width: 10px;
  199.   height: 10px;
  200.   margin: 1px;
  201.   text-indent: -999px;
  202.   border: 1px solid #fff;
  203.   border-radius: 10px;
  204.   cursor: pointer;
  205.   background-color: #000 \9;
  206.   background-color: rgba(0, 0, 0, 0);
  207. }
  208. .carousel-indicators .active {
  209.   margin: 0;
  210.   width: 12px;
  211.   height: 12px;
  212.   background-color: #fff;
  213. }
  214. .carousel-caption {
  215.   position: absolute;
  216.   left: 15%;
  217.   right: 15%;
  218.   bottom: 20px;
  219.   z-index: 10;
  220.   padding-top: 20px;
  221.   padding-bottom: 20px;
  222.   color: #fff;
  223.   text-align: center;
  224.   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  225. }
  226. .carousel-caption .btn {
  227.   text-shadow: none;
  228. }
  229. @media screen and (min-width: 768px) {
  230.   .carousel-control .glyphicon-chevron-left,
  231.   .carousel-control .glyphicon-chevron-right,
  232.   .carousel-control .icon-prev,
  233.   .carousel-control .icon-next {
  234.     width: 30px;
  235.     height: 30px;
  236.     margin-top: -10px;
  237.     font-size: 30px;
  238.   }
  239.   .carousel-control .glyphicon-chevron-left,
  240.   .carousel-control .icon-prev {
  241.     margin-left: -10px;
  242.   }
  243.   .carousel-control .glyphicon-chevron-right,
  244.   .carousel-control .icon-next {
  245.     margin-right: -10px;
  246.   }
  247.   .carousel-caption {
  248.     left: 20%;
  249.     right: 20%;
  250.     padding-bottom: 30px;
  251.   }
  252.   .carousel-indicators {
  253.     bottom: 20px;
  254.   }
  255. }
  256. </style>
  257. <div width="100%" height="320px" style="border: 0px; overflow: hidden; border-radius: 10px;" scrolling="no">
  259. 	<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3500" >
  260. 		<!-- 轮播（Carousel）指标 -->
  261. 		<ol class="carousel-indicators">
  262. 		{% set index = 0 %}
  263. 		{% for item in theme.carousel.item %}
  265. 			<li data-target="#myCarousel" data-slide-to="{{index}}"></li>
  266. 			{% set index = index+1 %}
  268. 		{% endfor %}
  269. 		</ol>
  270. 		<!-- 轮播（Carousel）项目 -->
  271. 		<div class="carousel-inner" style="height: 280px; border-radius: 10px; width: 100%;">
  273. 		{% set act = 0 %}
  274. 		 {% for item in theme.carousel.item %}
  276. 	    	{% if act===0 %}
  277. 				<a class="item active" href="{{ url_for(item.link) }}" target="_blank" style="height: 100%;">
  278. 					<img src="{{item.img}}"   style="width: 100%; height: 100%" >
  279. 				</a>
  280. 				{% set act = 1 %}
  281. 				{% elseif act===1 %}
  282. 					<a class="item" href="{{ url_for(item.link) }}" target="_blank" style="height: 100%;">
  283. 						<img src="{{item.img}}"  style="width: 100%; height: 100%;" >
  284. 					</a>
  285. 			{% endif %}
  287. 		{% endfor %}
  289. 		</div>
  290. 		<!-- 轮播（Carousel）导航 -->
  291. 		<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
  292. 		    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  294. 		</a>
  295. 		<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
  296. 		    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  298. 		</a>
  299. 	</div>
  300. </div>
  302. {% endif %}

第三步：配置文件中配置图片及链接

在next主题目录下的_config.xml主题配置文件中末尾添加如下配置：

  1. # 主页轮播图 使用 620x310 的图片
  2. #Home carousel map, from means link, img means picture
  3. carousel:
  4.    enable: true
  5.    item: [
  6.       {
  7.         'link':'文章链接1',
  8.         'img':'图片链接1'
  9.       },
  10.       {
  11.         'link':'文章链接2',
  12.         'img':'图片链接2'
  13.       },
  14.    ]

ps:注意：开启这种轮播图形式的时候，在主题配置文件中不要开启fancybox，这个设置需要设置为false，不然在点击图片进行跳转时会出现The requested content cannot be loaded.Please try again later.错误

Hexo+next主题美化的更多相关文章

  1. Hexo+Butterfly主题美化

    前言 本博客基于Hexo框架搭建,用到 hexo-theme-butterfly 主题(本人博客Butterfly版本3.4.0),hexo-theme-butterfly是基于Molunerfinn ...

  2. Hexo博客搭建以及Next主题美化的经验之谈

    这并不是一篇博客搭建教程.内容主要包含个人对于Hexo博客搭建的心得,Next6.0主题美化的部分建议,以及摘录一些各种用于博客搭建的link. 在博客园3年6个月,确实也学到了很多,博客园也是目前为 ...

  3. Hexo 官方主题 landscape-plus 优化

    博主喜欢简洁大方的Hexo主题,看了不下100个主题之后,最终选择了 landscape-plus 主题(针对中国大陆地区,对Hexo官方主题landscape进行优化后的版本).更多Hexo主题资源 ...

  4. ICARUS主题美化

    Icarus用户指南 - 主题美化 Icarus的主题样式编码文件为themes/icarus/layout/layout.jsx. 此文件定义了站点全局的样式设置.本文详细介绍了本主题针对文章分类的 ...

  5. hexo next主题为博客添加分享功能

    title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 ...

  6. ubuntu16.04主题美化和软件推荐

    前几天把ubuntu从15.10更新到了16.10,在网上看到有很多直接更新出问题的,正好赶上换SSD,于是采用全新安装,之前用ubuntu的时候装软件最让人头疼了,这回又得头疼一次了!! 索性把他记 ...

  7. Android源码浅析（二）——Ubuntu Root,Git,VMware Tools，安装输入法，主题美化，Dock，安装JDK和配置环境

    Android源码浅析(二)--Ubuntu Root,Git,VMware Tools,安装输入法,主题美化,Dock,安装JDK和配置环境 接着上篇,上片主要是介绍了一些安装工具的小知识点Andr ...

  8. Hexo next主题下添加天气插件

    最近在优化hexo 新搭建的博客,想给博客添加一个天气插件,奈何找了很久也没发现,好不容易发现一个天气插件 心知天气:https://www.seniverse.com/widget/get 运气不好 ...

  9. 开源介绍·新款简约、实用与大气的Hexo新主题：BMW

    这是一个简约.大气.实用的Hexo新主题:BMW

  10. Ubuntu 16.04 主题美化及常用软件安装

    一.主题美化 系统清理 系统更新: 安装完系统之后,需要更新一些补丁.Ctrl+Alt+T调出终端,执行一下代码: sudo apt-get update sudo apt-get upgrade 卸 ...

随机推荐

  1. kubernetes kubectl 命令自动补全

    yum install -y bash-completion source /usr/share/bash-completion/bash_completion source <(kubectl ...

  2. Node.js（五）学生管理CRUD

    npm init -y(初始化项目) npm install express(引入express) npx express-generator -e(自动生成模板.添加对 ejs 模板引擎的支持) n ...

  3. SpringBoot课程学习（一）

    @SpringBootTest指定测试的启动类 声明@SpringBootTest @Test注解 @Test 指定测试方法 @Order排序 一:先声明排序模式 @TestMethodOrder(M ...

  4. PHP全栈开发（一）：CentOS 7 配置LAMP

    服务器CentOS7 IP地址:10.28.2.249 进行网络配置 可以使用ip address命令查看当前的网卡状态 两张网卡,一张lo网卡一张ens160网卡 Ens160这个网卡的配置文件为/ ...

  5. 洛谷P1719 最大加权矩形 （DP/二维前缀和）

    题目描述也没啥好说的,就是给你个你n*n的矩形(带权),求其中最大权值的子矩阵. 首先比较好想的就是二维前缀和,n<=120,所以可以用暴力. 1 #include<bits/stdc++ ...

  6. 撸了一个简易的配置中心，顺带整合到了SpringCloud

    大家好,我是三友~~ 最近突然心血来潮(就是闲的)就想着撸一个简单的配置中心,顺便也照葫芦画瓢给整合到SpringCloud. 本文大纲 配置中心的概述 随着历史的车轮不断的前进,技术不断的进步,单体 ...

  7. 驱动开发：内核枚举DpcTimer定时器

    在笔者上一篇文章<驱动开发:内核枚举IoTimer定时器>中我们通过IoInitializeTimer这个API函数为跳板,向下扫描特征码获取到了IopTimerQueueHead也就是I ...

  8. Windows应急响应——敬请期待！

    检查内容 进程.服务.用户.网络连接.漏洞补丁.木马查杀. 工具 火绒剑. 防护措施 杀毒软件

  9. JSP中使用response对象实现定时跳转网页

    5秒后跳转到登录页面 <% response.setHeader("refresh","5;URL="login.jsp"); %>

  10. Oracle性能优化之内存管理

    Oracle实例中的内存使用分为两类:程序全局区(program global area, PGA)和系统全局区(system global area, SGA).前者专门供每个会话使用,后者由所有O ...