最开始打造低成本博客的时候，使用的是GitHub转七牛云图床上的。当时流量小，加上七牛云有无限期10G免费额度，所以就用着了。后来因为转HTTPS，再因为自己域名服务器都在腾讯云，所以也将七牛云转到腾讯云上了。还有一个原因就是腾讯COS比七牛云便宜。

转移图床

得益于转移过程非常的简单，也加速了我用腾讯云COS的过程。

腾讯云数据迁移

过程非常简单，也不需要什么基础，也很快就转移完了。修改好域名配置好设置，整个数据迁移过程就结束了。

接下来说说我是如何将cos加入到我的博客写作流程的。

数据万象配置

因为需要将图片添加水印，之前是使用七牛云进行添加的。在腾讯云上这个是使用数据万象服务进行添加。

配置方法也比较简单，设置好图片参数再设置图片样式即可。

比如我的图片链接格式。

链接

红色部分是分隔符，用于区分链接和图片样式参数；蓝色部分是具体图片要更改成什么样子。

我设置了几种常见的图片参数

  • 一种用于图片封面展示：图片质量要求高，图片尺寸不会很大。无水印。
  • 一种用于文章内部图片展示：图片质量要求低，图片尺寸要于文章页面显示尺寸接近。有水印。
  • 一种用于文章点开大图的样式展示：图片质量要求中等偏高，图片尺寸较大。有水印。
  • 一种用于文章缩略图：图片质量要求非常低，图片尺寸非常小。无水印。
  • 一种用于友情链接头像：图片质量要求非常低，图片尺寸非常小。无水印。(一页两百多张图，肯定要尽全力压质量和体积)
  • 一种用于友情链接网站封面：图片质量要求非常低，图片尺寸较小。无水印。

使用腾讯云CDN

因为直接从对象存储中读取数据流量费非常的高，所以推荐使用腾讯云cdn作为中间件。

工作流程

电脑上传到COS->数据万象处理图片->CDN获取处理过的图片->用户接收

写作软件 - Typora

众所周知Typora是一个非常棒的markdown写作工具，通过uPic可以将带参数的图片直传。

使用upic传图

使用upic的原因是可以直接生成的链接是带参数。目前其他支持typora的我都试过，做不到。

upic配置

upic的自定义能力非常高，鉴于picgo等不支持直出带参数的，还是推荐用upic。

不过因为我无法做到不同快捷键上传是不同参数，所以我就两个都装了。picgo虽然无法在typora里面直出带参数的链接，但是可以通过设置自定义链接格式的方法添加参数。

picgo

自定义链接格式

Fancybox - 点开查看大图

Hexo的butterfly主题自带fancybox功能，查看fancybox文档发现它是支持点开查看大图的功能的。我只需要告诉他大图的url，他就可以轻松实现。

在main.js中修改了fancybox相关函数。

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
/**
* fancybox和 mediumZoom
*/
 const addFancybox = function (ele) {
   const runFancybox = (ele) => {
     ele.each(function (i, o) {
       const $this = $(o)
       const lazyloadSrc = $this.attr('data-lazy-src') || $this.attr('src')
       const lazyloadSrc1600 = lazyloadSrc + '_1600w'
       const dataCaption = $this.attr('alt') || ''
       if (lazyloadSrc.indexOf('!blogimg') != -1) {
         $this.wrap(`<a href="${lazyloadSrc}" data-fancybox="images" data-caption="${dataCaption}" class="fancybox" data-srcset="${lazyloadSrc1600} 1600w"></a>`)
       }else {
         $this.wrap(`<a href="${lazyloadSrc}" data-fancybox="images" data-caption="${dataCaption}" class="fancybox" data-srcset="${lazyloadSrc} 1600w"></a>`)
       }
       
     })

     $().fancybox({
       selector: '[data-fancybox]',
       loop: true,
       transitionEffect: 'slide',
       protect: true,
       buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'],
       hash: false
     })
   }

   if (typeof $.fancybox === 'undefined') {
     $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.fancybox.css}">`)
     $.getScript(`${GLOBAL_CONFIG.source.fancybox.js}`, function () {
       runFancybox($(ele))
     })
   } else {
     runFancybox($(ele))
   }
 }

 const addMediumZoom = () => {
   const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img'))
   zoom.on('open', e => {
     const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff'
     zoom.update({
       background: photoBg
     })
   })
 }

 const jqLoadAndRun = () => {
   const $fancyboxEle = GLOBAL_CONFIG.lightbox === 'fancybox'
     ? document.querySelectorAll('#article-container :not(a):not(.gallery-group) > img, #article-container > img,.bber-content-img > img')
     : []
   const fbLengthNoZero = $fancyboxEle.length > 0
   const $jgEle = document.querySelectorAll('#article-container .justified-gallery')
   const jgLengthNoZero = $jgEle.length > 0

   if (jgLengthNoZero || fbLengthNoZero) {
     btf.isJqueryLoad(() => {
       jgLengthNoZero && runJustifiedGallery($jgEle)
       fbLengthNoZero && addFancybox($fancyboxEle)
     })
   }
 }

可以看到就是点开之前使用的原来的链接，点开之后会在链接后面添加_1600w。所以就做两个图片样式即可，另一个名字比第一个加上_1600w。

封面主题颜色

小伙伴都看到了我的每篇文章都会根据图片封面进行网页主题变色。这是使用腾讯云cos的提取主题色api和css颜色变量共同实现的。

我将主题色部分都是用var(--heo-main)这个颜色变量，然后用js去请求api获取颜色变量，替换掉css文章中的这个变量对应的值即可。

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
//封面纯色
function coverColor() {
    var path = document.getElementById("post-cover")?.src;
    // console.log(path);
    if(path !== undefined){
        var httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
        httpRequest.open('GET', path + '?imageAve', true);//第二步：打开连接  将请求参数写在url中 
        httpRequest.send();
        /**
         * 获取数据后的处理程序
         */
        httpRequest.onreadystatechange = function () {
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                var json = httpRequest.responseText;//获取到json字符串，还需解析
                var obj = eval('(' + json + ')');
                var value = obj.RGB;
                value ="#" + value.slice(2)
                // console.log(value);
                //   document.getElementById('page-header').style.backgroundColor=value;
                // document.styleSheets[0].addRule('#page-header:before','background: '+ value +'!important');
                
                if(getContrastYIQ(value) == "light"){
                    value = LightenDarkenColor(colorHex(value),-40)
                }

                document.styleSheets[0].addRule(':root','--heo-main:'+ value +'!important');
                document.styleSheets[0].addRule(':root','--heo-main-op:'+ value +'23!important');
                document.styleSheets[0].addRule(':root','--heo-main-op-deep:'+ value +'dd!important');
                document.styleSheets[0].addRule(':root','--heo-main-none:'+ value +'00!important');
                heo.initThemeColor()
                document.getElementById("coverdiv").classList.add("loaded");
            }
        };
    }else{
        // document.styleSheets[0].addRule('#page-header:before','background: none!important');
        document.styleSheets[0].addRule(':root','--heo-main: var(--heo-theme)!important');
        document.styleSheets[0].addRule(':root','--heo-main-op: var(--heo-theme-op)!important');
        document.styleSheets[0].addRule(':root','--heo-main-op-deep:var(--heo-theme-op-deep)!important');
        document.styleSheets[0].addRule(':root','--heo-main-none: var(--heo-theme-none)!important');
        heo.initThemeColor()
    }
}

//RGB颜色转化为16进制颜色
function colorHex(str) {
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    var that = str;
    if (/^(rgb|RGB)/.test(that)) {
      var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
      var strHex = "#";
      for (var i = 0; i < aColor.length; i++) {
        var hex = Number(aColor[i]).toString(16);
        if (hex === "0") {
          hex += hex;
        }
        strHex += hex;
      }
      if (strHex.length !== 7) {
        strHex = that;
      }
      return strHex;
    } else if (reg.test(that)) {
      var aNum = that.replace(/#/, "").split("");
      if (aNum.length === 6) {
        return that;
      } else if (aNum.length === 3) {
        var numHex = "#";
        for (var i = 0; i < aNum.length; i += 1) {
          numHex += (aNum[i] + aNum[i]);
        }
        return numHex;
      }
    } else {
      return that;
    }  
}

//16进制颜色转化为RGB颜色
function colorRgb(str) {
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    var sColor = str.toLowerCase();
    if (sColor && reg.test(sColor)) {
      if (sColor.length === 4) {
        var sColorNew = "#";
        for (var i = 1; i < 4; i += 1) {
          sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
        }
        sColor = sColorNew;
      }
      //处理六位的颜色值
      var sColorChange = [];
      for (var i = 1; i < 7; i += 2) {
        sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
      }
      return "rgb(" + sColorChange.join(",") + ")";
    } else {
      return sColor;
    }                  
}

//变暗变亮主方法
function LightenDarkenColor (col, amt) {
    var usePound = false;

    if (col[0] == "#") {
      col = col.slice(1);
      usePound = true;
    }

    var num = parseInt(col, 16);

    var r = (num >> 16) + amt;

    if (r > 255) r = 255;
    else if (r < 0) r = 0;

    var b = ((num >> 8) & 0x00FF) + amt;

    if (b > 255) b = 255;
    else if (b < 0) b = 0;

    var g = (num & 0x0000FF) + amt;

    if (g > 255) g = 255;
    else if (g < 0) g = 0;


    return (usePound ? "#" : "") + String("000000" + (g | (b << 8) | (r << 16)).toString(16)).slice(-6);
}
//判断是否为亮色
function getContrastYIQ(hexcolor) {
    var colorrgb = colorRgb(hexcolor);
    var colors = colorrgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    var red = colors[1];
    var green = colors[2];
    var blue = colors[3];
    var brightness;
    brightness = (red * 299) + (green * 587) + (blue * 114);
    brightness = brightness / 255000;
    if (brightness >= 0.5) {
      return "light";
    } else {
      return "dark";
    }
}

然后在themes/butterfly/layout/includes/additional-js.pug中执行cover()即可。

在友情链接页面使用

因为友情链接非常多，导致同页面会加载大量图片，都使用各个博主自己的图片显然在速度体验上令人崩溃。所以都统一使用对象存储来保存。

比如在flink.pug中我修改了头像的图片链接。

1
img.flink-avatar.cf-friends-avatar(data-lazy-src=url_for(item.avatar+'_mini') onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )

可以看到就是在参数后添加了_mini参数。

同样的方法也应用到文章页面、最新文章卡片上等等。

在 typecho 的 Time/TimePlus 主题中使用图片参数

Time主题也是支持图片参数的，可以做到点开之后查看大图的效果。

首先进入主题设置。

设置外观

可以将两种都填写上。

设置参数

即可做到点开前后图片不同的操作。

引用站外地址，不保证站点的可用性和安全性
张洪Heo图集
张洪Heo

揽星招募

使用腾讯云的话除了有一定时间的试用期以外还有现金券福利。

感谢腾讯云COS提供免费代金券等福利，COS开发者招募计划火热进行中，等你来参加。

活动

有需要的小伙伴可以尝试。