利用腾讯云为静态页面添加“动态”相册

最新推荐文章于 2022-07-31 00:18:58 发布

Lruihao

最新推荐文章于 2022-07-31 00:18:58 发布

阅读量477

点赞数 1

分类专栏：前端文章标签： Cos-Album 相册腾讯云

本文链接：https://blog.csdn.net/qq_39520417/article/details/110673905

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

title: 利用腾讯云为静态页面添加“动态”相册
date: 2019-11-24 10:52:34
tags:

腾讯云cos桶
Frontend
categories:
Frontend
JavaScript

https://lruihao.cn/posts/cos-album/
cos桶相册，终于！！终于来了！！，思路参考自给hexo静态博客添加动态相册功能，
功能虽好，但是还是先友情提示！
开放API是一个很危险的操作，意味着你的cos桶里面的所有资源包括目录结构都暴露的整个世界中，所以建议不要放一些比较私密的照片，保护自己的隐私，提防不良用心之人。下面就开始吧！

创建腾讯云cos存储桶

就创建一个COS就好了！有几点注意事项：

权限设置为共有读私有写
policy权限设置整个桶的读操作
跨域访问CORS设置，自己随意

上传照片

首先我这个cos相册，相册分类就是文件夹分类，所以cos桶里面先新建不同的文件夹，文件夹名称就是相册名称，
每个相册里面需要放置一张名称为**“封面.jpg”**的图片作为该相册的封面。

上传工具

COSBrowser GUI工具,桌面/移动版【官方、推荐】
COSCMD 命令行工具【官方】
PicGo 图床上传工具【第三方、推荐】

食用方式

下载地址，别忘点赞哈

首先，下载源码，引入cos-album.css和cos-album.js
然后，在你的js中new一个Cosalbum对象(xmlLink后不需要添加/)

Step1

<link rel="stylesheet" type="text/css" href="cos-album.min.css?v=1.1.2">
<script type="text/javascript" src="cos-album.min.js?v=1.1.2"></script>

Step2

<script type="text/javascript">
  new Cosalbum({
    'xmlLink': 'https://img-xxxxxxxxxx.cos.ap-chengdu.myqcloud.com',
    'prependTo': '',
    'viewNum': 4,
    'imgUrl': '//img.lruihao.cn'
  });
</script>

Params

param	type	description
xmlLink	String	需要解析的騰訊云COS桶XML鏈接
prependTo	String	可選解析相冊到某個節點,默認: ‘body’
viewNum	Number	每個相冊顯示的照片數目,默認: 4
imgUrl	String	图片CDN链接,雙擊複製URL Since: 1.1.2

viewport视个人爱好添加。
hexo中使用时css和js都需要做适当调整，配合加密功能使用等等，这里不再展开。
注：代码设定不加载根目录文件，所以可以利用静态服务把源码部署在根目录，配合PicGo、COSBrowser上传来搭建个人图床。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>cos-album</title>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <link rel="stylesheet" type="text/css" href="cos-album.css">
    <script type="text/javascript" src="cos-album.js" defer></script>
  </head>
  <body>
    <script type="text/javascript">
      new Cosalbum({
        'xmlLink': 'https://img-xxxxxxxxxx.cos.ap-chengdu.myqcloud.com',
        'prependTo': '',
        'viewNum': 8
      });
    </script>
    <!-- 你的其他内容，如评论等 -->
  </body>
</html>