技术

Hexo图片隐藏插件编写

想要找一个插件，图片那里是隐藏起来的，点击才显示出来，找了半天，还是自己写一个吧。

在scripts文件夹下新建文件夹hexo-tag-hiddenimg

初步设想是在md文件中插入以下代码，在页面中一开始显示的是test，点击后显示链接的图片。

1
{% hiddenimg https://i.loli.net/2019/11/06/NGpbIeE6Q3OoBxX.png  "test" %}

在文件夹下新建index.js，加入以下代码
1
2
3
4
5
6
hexo.extend.tag.register("hiddenimg",
  require('./hiddenimg-tag.js'),
  {
    ends: false
  }
);

然后同级下新建文件hiddenimg-tag.js，初始代码
1
2
3
4
5
6
module.exports = function(args){
  console.log(args);
  //['https://i.loli.net/2019/11/06/NGpbIeE6Q3OoBxX.png',
  'test']
  return "";
};

之前是使用样式来控制显示，但是在scripts文件夹下的所有文件hexo都会以js的方式来加载并试图运行，这就导致每次编译，都会报一个异常，虽说不影响使用，但看着实在不爽，于是改成了行内样式。
这样插件内，返回的代码最终为

后来发现隐藏img的方法，不会阻止图片在页面加载时载入，所以修改了显示方法，先不写入img的src属性，而是在点击后才写入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
return `<div style="width: 100%;" class="hiddenimg-main" id="hiddenimg-${domid}">
    <p id="hiddenimg-${domid}-txt" style="height: 4em; line-height: 4em; text-align: center; background-color: #ddd; cursor: pointer;">${showtxt}</p>
    <img id="hiddenimg-${domid}-img" style="display: none;" class="hiddenimg-img" img-src=${JSON.stringify(imgurl)}>
  </div>
  <script>
  var himg_${domid} = document.getElementById("hiddenimg-${domid}");
  himg_${domid}.onclick = function(){
    var
    tmp = this.className,
    txt = document.getElementById("hiddenimg-${domid}-txt"),
    img = document.getElementById("hiddenimg-${domid}-img");
    if(tmp.indexOf("active") < 0){
      // this.className = tmp + " active";
      txt.style.display = "none";
      img.style.display = "block";
      var imgsrc = img.getAttribute("img-src");
      img.src = imgsrc;
    }
  }
  </script>`

测试隐藏图片1

测试隐藏图片2

测试成功

以下为之前的内容，已经作废

这里返回的就是hiddenimg标签所显示的内容。除了页面的dom以外还需要加入样式，参照别的插件代码，在index.js中加入代码。

1
2
3
4
5
const
generator = require('./generator'),
filter = require('./filter');
hexo.extend.generator.register('hiddenimg', generator);
hexo.extend.filter.register('after_post_render', filter);

其中generator.js负责处理样式文件，filter.js负责在页面写入样式地址
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//generator.js
module.exports = function(locals){
  let
  ctx = this,
  option = optioner(ctx.config.hiddenimg);

  if("default" === option.css){
    var str = fs.readFileSync(
      path.join(__dirname, "./asset/css.styl"),
      {encoding: "utf8"}
    );
    return {
      path: option.file,
      data: stylus.render(str)
    }
  }
  return {}
}

//filter.js
module.exports = function(data){
  let
  ctx = this,
  option = optioner(ctx.config.hiddenimg);

  if("none" !== option.css){
  data.content = '<link rel="stylesheet" href="' + ctx.config.root + option.file + '">' + data.content;
  }
  return data;
}

整体思路就是用样式控制显示隐藏，一上来只显示文字，点击后添加一个class，遂css.styl文件为。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.hiddenimg-main
  width: 100%

.hiddenimg-main p
  height: 4em
  line-height: 4em
  text-align: center
  background-color: #ddd
  cursor: pointer

.hiddenimg-main .hiddenimg-img,
.hiddenimg-main.active p
  display: none

.hiddenimg-main.active .hiddenimg-img
  display: block

最后修改hiddenimg-tag.js，加入逻辑即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.exports = function(args){
  let
  domid = utils.randomString(5, '1234567890'),
  imgurl = args[0],
  showtxt = args[1] || "图片已被隐藏，点击查看";

  return `<div class="hiddenimg-main" id="hiddenimg-${domid}">
      <p>${showtxt}</p>
      <img class="hiddenimg-img" src=${JSON.stringify(imgurl)}>
    </div>
    <script>
    var himg_${domid} = document.getElementById("hiddenimg-${domid}");
    himg_${domid}.onclick = function(){
      var tmp = this.className;
      if(tmp.indexOf("active") < 0){
        this.className = tmp + " active";
      }
    }
    </script>`
};