这篇文章介绍了作者如何将腾讯云COS加入到Hexo博客写作和工作流程中的过程。作者首先转移了自己的图床到腾讯云COS,并配置了数据万象进行图片处理和添加水印,然后使用腾讯云CDN作为中间件加速图片加载。作者还介绍了使用Typora和upic进行图片上传的方法,并修改了Hexo主题中的fancybox函数实现点开查看大图功能。
此内容根据文章生成,并经过人工审核,仅用于文章内容的解释与总结
投诉最开始打造低成本博客的时候,使用的是GitHub转七牛云图床上的。当时流量小,加上七牛云有无限期10G免费额度,所以就用着了。后来因为转HTTPS,再因为自己域名服务器都在腾讯云,所以也将七牛云转到腾讯云上了。还有一个原因就是腾讯COS比七牛云便宜。
转移图床
得益于转移过程非常的简单,也加速了我用腾讯云COS的过程。
过程非常简单,也不需要什么基础,也很快就转移完了。修改好域名配置好设置,整个数据迁移过程就结束了。
接下来说说我是如何将cos加入到我的博客写作流程的。
数据万象配置
因为需要将图片添加水印,之前是使用七牛云进行添加的。在腾讯云上这个是使用数据万象服务进行添加。
配置方法也比较简单,设置好图片参数再设置图片样式即可。
比如我的图片链接格式。
红色部分是分隔符,用于区分链接和图片样式参数;蓝色部分是具体图片要更改成什么样子。
我设置了几种常见的图片参数
- 一种用于图片封面展示:图片质量要求高,图片尺寸不会很大。无水印。
- 一种用于文章内部图片展示:图片质量要求低,图片尺寸要于文章页面显示尺寸接近。有水印。
- 一种用于文章点开大图的样式展示:图片质量要求中等偏高,图片尺寸较大。有水印。
- 一种用于文章缩略图:图片质量要求非常低,图片尺寸非常小。无水印。
- 一种用于友情链接头像:图片质量要求非常低,图片尺寸非常小。无水印。(一页两百多张图,肯定要尽全力压质量和体积)
- 一种用于友情链接网站封面:图片质量要求非常低,图片尺寸较小。无水印。
使用腾讯云CDN
因为直接从对象存储中读取数据流量费非常的高,所以推荐使用腾讯云cdn作为中间件。
电脑上传到COS->数据万象处理图片->CDN获取处理过的图片->用户接收
写作软件 - Typora
众所周知Typora是一个非常棒的markdown写作工具,通过uPic可以将带参数的图片直传。
使用upic的原因是可以直接生成的链接是带参数。目前其他支持typora的我都试过,做不到。
upic的自定义能力非常高,鉴于picgo等不支持直出带参数的,还是推荐用upic。
不过因为我无法做到不同快捷键上传是不同参数,所以我就两个都装了。picgo虽然无法在typora里面直出带参数的链接,但是可以通过设置自定义链接格式的方法添加参数。
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
|
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; if(path !== undefined){ var httpRequest = new XMLHttpRequest(); httpRequest.open('GET', path + '?imageAve', true); httpRequest.send();
httpRequest.onreadystatechange = function () { if (httpRequest.readyState == 4 && httpRequest.status == 200) { var json = httpRequest.responseText; var obj = eval('(' + json + ')'); var value = obj.RGB; value ="#" + value.slice(2) 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(':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() } }
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; } }
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主题也是支持图片参数的,可以做到点开之后查看大图的效果。
首先进入主题设置。
可以将两种都填写上。
即可做到点开前后图片不同的操作。
引用站外地址,不保证站点的可用性和安全性
揽星招募
使用腾讯云的话除了有一定时间的试用期以外还有现金券福利。
感谢腾讯云COS提供免费代金券等福利,COS开发者招募计划火热进行中,等你来参加。
有需要的小伙伴可以尝试。