NEXT主题修改笔记

–闲来无事,改一改主题文件吧–

修改文章和文章内样式

大代码块样式

在HEXO\themes\next-1\source\css_custom\custom.styl文件内增添代码

// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;

border-radius后数值越大,圆角越大。padding后数值越大,代码框越大。

设置博文背景

在HEXO\themes\next-1\source\css_custom\custom.styl文件内增添代码

/*设置博文背景*/
.main-inner {
    background: #fff;
    opacity: 0.9;

background后为rgb颜色代码,百度来一个rgb色值粘贴即可替换博文背景颜色(替换了也很丑)
opacity后数值为博文背景透明度,可设置0.0-1.0数值,值越小透明度越高。

主页文章添加阴影效果

在HEXO\themes\next-1\source\css_custom\custom.styl文件内增添代码

// 主页文章添加阴影效果
.post {
  background: #fff;
  opacity: 1;
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 25px;
  webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
  moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
 }

background和上面设置文章背景一样,为文章背景颜色;opacity透明度;margin-top上边距;margin-bottom下边距;padding框间距;webkit-box-shadow和moz-box-shadow为阴影长宽设置

next 主题样式修改

本文只以hexo自带Gemini样式为例(其余修改方法都差不多

修改gemini样式

打开HEXO\themes\next-1\source\css_variables\gimini.styl文件

// Variables of Gemini scheme
// =================================================

@import "Pisces.styl";  // 应该是引用了pisces样式的代码,同理修改可同时修改两个主题样式

// Settings for some of the most global styles.
// --------------------------------------------------
$body-bg-color                    = #F5F5F5   // 网页背景颜色
$main-desktop                     = 75%          // 方块的宽
$sidebar-desktop                  = 240px      // 不明代码,改了信息框就消失了
$content-desktop                  = calc(100% - 252px)  //同上

// Borders.
// --------------------------------------------------
$box-shadow-inner                 = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12)            // 方块的阴影的位移之类的,内容较多自己修改看看就知道了。
$box-shadow                       = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12), 0 -1px .5px 0 rgba(0,0,0,.09)   // 同上

//$border-radius-inner              = initial               // 默认方块边角
//$border-radius                    = initial                  // 默认方块边角
$border-radius-inner            = 0px 0px 15px 15px;  // 数值越大方块边角越圆,四个值分别对应四个角,大概。
$border-radius                  = 0px 15px 0px 15px;  // 数值越大方块边角越圆,同上

网页动态背景替换

打开HEXO\themes\next-1\layout文件夹内_layout.swig文件

在/body前增添以下代码


<div class="bg_content">
      <canvas id="canvas"></canvas>
 </div>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = window.innerWidth,
  cx = cw / 2;
var ch = canvas.height = window.innerHeight,
  cy = ch / 2;

ctx.fillStyle = "#000";
var linesNum = 16;
var linesRy = [];
var requestId = null;

function Line(flag) {
  this.flag = flag;
  this.a = {};
  this.b = {};
  if (flag == "v") {
    this.a.y = 0;
    this.b.y = ch;
    this.a.x = randomIntFromInterval(0, ch);
    this.b.x = randomIntFromInterval(0, ch);
  } else if (flag == "h") {
    this.a.x = 0;
    this.b.x = cw;
    this.a.y = randomIntFromInterval(0, cw);
    this.b.y = randomIntFromInterval(0, cw);
  }
  this.va = randomIntFromInterval(25, 0) / 100;
  this.vb = randomIntFromInterval(25, 0) / 100;

  this.draw = function() {
    ctx.strokeStyle = "#BEBEBE";
    ctx.beginPath();
    ctx.moveTo(this.a.x, this.a.y);
    ctx.lineTo(this.b.x, this.b.y);
    ctx.stroke();
  }

  this.update = function() {
    if (this.flag == "v") {
      this.a.x += this.va;
      this.b.x += this.vb;
    } else if (flag == "h") {
      this.a.y += this.va;
      this.b.y += this.vb;
    }

    this.edges();
  }

  this.edges = function() {
    if (this.flag == "v") {
      if (this.a.x < 0 || this.a.x > cw) {
        this.va *= -1;
      }
      if (this.b.x < 0 || this.b.x > cw) {
        this.vb *= -1;
      }
    } else if (flag == "h") {
      if (this.a.y < 0 || this.a.y > ch) {
        this.va *= -1;
      }
      if (this.b.y < 0 || this.b.y > ch) {
        this.vb *= -1;
      }
    }
  }

}

for (var i = 0; i < linesNum; i++) {
  var flag = i % 2 == 0 ? "h" : "v";
  var l = new Line(flag);
  linesRy.push(l);
}

function Draw() {
  requestId = window.requestAnimationFrame(Draw);
  ctx.clearRect(0, 0, cw, ch);

  for (var i = 0; i < linesRy.length; i++) {
    var l = linesRy[i];
    l.draw();
    l.update();
  }
  for (var i = 0; i < linesRy.length; i++) {
    var l = linesRy[i];
    for (var j = i + 1; j < linesRy.length; j++) {
      var l1 = linesRy[j]
      Intersect2lines(l, l1);
    }
  }
}

function Init() {
  linesRy.length = 0;
  for (var i = 0; i < linesNum; i++) {
    var flag = i % 2 == 0 ? "h" : "v";
    var l = new Line(flag);
    linesRy.push(l);
  }

  if (requestId) {
    window.cancelAnimationFrame(requestId);
    requestId = null;
  }

  cw = canvas.width = window.innerWidth,
    cx = cw / 2;
  ch = canvas.height = window.innerHeight,
    cy = ch / 2;

  Draw();
};

setTimeout(function() {
  Init();

  addEventListener('resize', Init, false);
}, 15);

function Intersect2lines(l1, l2) {
  var p1 = l1.a,
    p2 = l1.b,
    p3 = l2.a,
    p4 = l2.b;
  var denominator = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);
  var ua = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / denominator;
  var ub = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / denominator;
  var x = p1.x + ua * (p2.x - p1.x);
  var y = p1.y + ua * (p2.y - p1.y);
  if (ua > 0 && ub > 0) {
    markPoint({
      x: x,
      y: y
    })
  }
}

function markPoint(p) {
  ctx.beginPath();
  ctx.arc(p.x, p.y, 2, 0, 2 * Math.PI);
  ctx.globalAlpha=0.5;
  ctx.fill();
}

function randomIntFromInterval(mn, mx) {
  return ~~(Math.random() * (mx - mn + 1) + mn);
}</script>

具体背景文件下载地址

然后去HEXO\themes\next-1\source\css_custom\custom.styl文件内新增代码

/*背景范围框架*/
.bg_content{
  position: fixed;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
#canvas{
  width: 100%;
  height: 100%;
}

以上

总结

以上为这两天闲来无事瞎摸出来的修改数据,在这里做一些笔记,上面的一些是有教程的,由于我是个小白,有教程也一直搞错,所以记下一些我自己出错的点,下面的一些是自己瞎改,找到了一些next主题可修改数值,最终得出的一些结论。以后的笔记会新开博文记录,此贴完结。


探索型插画师