哔哔图片问题

本文根据洪哥哔哔教程二改~解决哔哔发送图片问题

相关教程教程地址
洪哥哔哔教程
「哔哔点啥」微信公众号「哔哔点啥」微信公众号 2.0
问题说明

可以看到问题很明显

  1. 图片大小
  2. 图片上下有多余得代码(洪哥 js 得问题)
  3. 无法预览

修改步骤

将洪哥 heobbe.js 文件拉取到博客存放 js 得目录下

修改其中得urlToLink方法

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
function urlToLink(str) {
  console.log("判断是否是图片", str.indexOf("http"));
  if (str.indexOf("http") != -1) {
    var re_forpic =
      /\bhttps?:[^:<>"]*\/([^:<>"]*)(\.(jpeg)|(png)|(jpg)|(webp))(!blogimg)?/g;
    var a1;
    var a2;
    str.replace(re_forpic, function (imgurl) {
      a1 =
        "<a href=" +
        imgurl +
        " data-fancybox='gallery' data-caption='' data-thumb=" +
        imgurl +
        ">";
      a2 = "<img src=" + imgurl + "></img></a>";
    });
    str = a1 + a2;
    return a1 + a2;
  } else {
    var re = /\bhttps?:\/\/(?!\S+(?:jpe?g|png|bmp|gif|webp|gif))\S+/g;

    str = str.replace(re, function (website) {
      return (
        " <a href='" + website + "'rel='noopener' target='_blank'>↘链接↙</a>"
      );
    });
    return str;
  }
}

修改完后全文(可直接复制这个粘贴替换 heobber.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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
// if (document.querySelector('#bber-loading')) {
//   var loading_pic = document.getElementById('bber-loading');
//   loading_pic.innerHTML = '<span id="moments_loading"><i class="fa fa-spinner fa-spin"></i></span>';
// }

function getbbdata() {
  var bbsurl = bbapiurl;

  var httpRequest = new XMLHttpRequest(); //第一步：建立所需的对象
  httpRequest.open("GET", bbsurl, true); //第二步：打开连接  将请求参数写在url中  ps:"./Ptest.php?name=test&nameone=testone"
  httpRequest.send(); //第三步：发送请求  将请求参数写在URL中
  /**
   * 获取数据后的处理程序
   */
  httpRequest.onreadystatechange = function () {
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {
      var json = httpRequest.responseText; //获取到json字符串，还需解析
      var obj = eval("(" + json + ")");
      // console.log(obj.data)
      const bbArray = obj.data.map(e => {
        return {
          date: e.date,
          content: e.content,
          from: e.from,
        };
      });
      // console.log(fundsArray)
      saveToLocal.set("zhheo-bb", JSON.stringify(bbArray), 5 / (60 * 24));
      const data = saveToLocal.get("zhheo-bb");
      generateBBHtml(JSON.parse(data));
    }
  };
}

var generateBBHtml = array => {
  var $dom = document.querySelector("#bber");
  var result = '<section class="timeline page-1"><ul><div class="list">';
  console.log(array);

  if (array.length) {
    for (let i = 0; i < array.length; i++) {
      var from_icon = "";
      if (array[i].from.indexOf("iPhone") != -1) {
        from_icon = '<i class="fas fa-mobile-alt"></i>';
      } else if (array[i].from.indexOf("iPad") != -1) {
        from_icon = '<i class="fas fa-tablet-alt"></i>';
      } else if (array[i].from.indexOf("Mac") != -1) {
        from_icon = '<i class="fas fa-laptop"></i>';
      } else if (array[i].from.indexOf("微信") != -1) {
        from_icon = '<i class="fab fa-weixin" style="font-size: 0.6rem"></i>';
      } else {
        from_icon = '<i class="fas fa-tools"></i>';
      }

      var d = new Date(array[i].date);
      var dtime = array[i].date,
        data =
          d.getFullYear() +
          "/" +
          (d.getMonth() + 1) +
          "/" +
          d.getDate() +
          " " +
          d.getHours() +
          ":" +
          d.getMinutes() +
          ":" +
          d.getSeconds();
      var dataCont =
        '<p class="datacont">' + urlToLink(array[i].content) + "</p>";
      var dataTime = '<p class="datatime">' + data + "</p>";

      result +=
        `<li class="item"><div>` +
        dataTime +
        dataCont +
        `</p><p class="datafrom"><small>` +
        from_icon +
        array[i].from +
        `</small></p></div></li>`;
    }
  } else {
    result += '!{_p("aside.card_funds.zero")}';
  }
  result += "</div></ul></section>";

  var $dom = document.querySelector("#bber");

  $dom.innerHTML = result;
  Lately({
    target: "#bber .datatime",
  });
  window.lazyLoadInstance && window.lazyLoadInstance.update();
  window.pjax && window.pjax.refresh($dom);
};

if (document.querySelector("#bber")) {
  getbbdata();
}
function urlToLink(str) {
  console.log("判断是否是图片", str.indexOf("http"));
  if (str.indexOf("http") != -1) {
    var re_forpic =
      /\bhttps?:[^:<>"]*\/([^:<>"]*)(\.(jpeg)|(png)|(jpg)|(webp))(!blogimg)?/g;
    var a1;
    var a2;
    str.replace(re_forpic, function (imgurl) {
      a1 =
        "<a href=" +
        imgurl +
        " data-fancybox='gallery' data-caption='' data-thumb=" +
        imgurl +
        ">";
      a2 = "<img src=" + imgurl + "></img></a>";
    });
    str = a1 + a2;
    return a1 + a2;
  } else {
    var re = /\bhttps?:\/\/(?!\S+(?:jpe?g|png|bmp|gif|webp|gif))\S+/g;

    str = str.replace(re, function (website) {
      return (
        " <a href='" + website + "'rel='noopener' target='_blank'>↘链接↙</a>"
      );
    });
    return str;
  }
}
/*
MIT License - http://www.opensource.org/licenses/mit-license.php
For usage and examples, visit:
https://tokinx.github.io/lately/
Copyright (c) 2017, Biji.IO
*/
var $jscomp = $jscomp || {};
$jscomp.scope = {};
$jscomp.arrayIteratorImpl = function (b) {
  var g = 0;
  return function () {
    return g < b.length
      ? {
          done: !1,
          value: b[g++],
        }
      : {
          done: !0,
        };
  };
};
$jscomp.arrayIterator = function (b) {
  return {
    next: $jscomp.arrayIteratorImpl(b),
  };
};
$jscomp.makeIterator = function (b) {
  var g = "undefined" != typeof Symbol && Symbol.iterator && b[Symbol.iterator];
  return g ? g.call(b) : $jscomp.arrayIterator(b);
};
(function (b, g) {
  var p = function (h) {
    var d = h.lang || {
      second: "\u79d2",
      minute: "\u5206\u949f",
      hour: "\u5c0f\u65f6",
      day: "\u5929",
      month: "\u4e2a\u6708",
      year: "\u5e74",
      ago: "\u524d",
      error: "NaN",
    };
    h = $jscomp.makeIterator(document.querySelectorAll(h.target || ".time"));
    for (var c = h.next(); !c.done; c = h.next()) {
      c = c.value;
      var a = c.dateTime;
      var e = c.title,
        f = c.innerHTML;
      if (
        !a ||
        isNaN(
          new Date(
            (a = a.replace(/(.*)[a-z](.*)\+(.*)/gi, "$1 $2").replace(/-/g, "/"))
          )
        )
      )
        if (e && !isNaN(new Date((e = e.replace(/-/g, "/"))))) a = e;
        else if (f && !isNaN(new Date((f = f.replace(/-/g, "/"))))) a = f;
        else break;
      c.title = a;
      a = new Date(a);
      a = (new Date().getTime() - a.getTime()) / 1e3;
      e = a / 60;
      f = e / 60;
      var k = f / 24,
        l = k / 30,
        m = l / 12;
      c.innerHTML =
        (1 <= m
          ? Math.floor(m) + d.year
          : 1 <= l
          ? Math.floor(l) + d.month
          : 1 <= k
          ? Math.floor(k) + d.day
          : 1 <= f
          ? Math.floor(f) + d.hour
          : 1 <= e
          ? Math.floor(e) + d.minute
          : 1 <= a
          ? Math.floor(a) + d.second
          : d.error) + d.ago;
    }
  };
  var n = (function () {
    return this || (0, eval)("this");
  })();
  "Lately" in n || (n.Lately = p);
})();

接着在 css 文件中添加:

1
2
3
.datacont img {
  width: 100%;
}

直接把洪哥得 heobbe.js 替换成,作者编写好得 js 链接:

1
https://npm.elemecdn.com/msstatic@1.0.1/js/heobber.js

接着在 css 文件中添加:

1
2
3
.datacont img {
  width: 100%;
}