avatar

目录
hexo博客添加相册功能

两周前开始,我就一直想在yilia主题下实现一个相册功能,终于让我找到一个好方法了。

背景

​ 在走进hexo搭建博客这个坑之后,一直想实现相册功能。但是。。。我就是一个比小白还白的百中白啊~怎么办呢?实力不够,google来凑。

​ 网络上大部分关于hexo yilia都是基于litten大神的博客的相册样式进行修改的。而我不知道什么原因,反正我是没成功。。。。。。终于皇天不负有心人,终于让我找到能较轻松实现相册功能的方法了。

实现方法

原理

腾讯云cos存储桶使用api在线获取相册的内容,再在博客相册显示

效果如下

相册效果展示

方法

创建腾讯云cos存储桶

  • 在[腾讯云](https://cloud.tencent.com/)注册\登录
  • 进入 产品—基础—存储—对象存储进入对象存储.pngi

  • 创建存储桶
  • 填写存储桶名称,选择所属地区,访问权限选共有读私有写点击确定就可以了

    存储桶设置

  • 跨域访问CORS设置
  • 基储配置中找到跨域访问CORS设置跨域访问.jpg

    操作选择GET,来源Origin填写你的域名,带http或者https,其他默认不要填,如下图

    o_1di80mv70rth4go8ljjgv17rna.jpg

  • 设置读写权限
  • 在权限管理中设置 存储桶访问权限 为公有读私有写,一般按照我这来基本就不用动访问权限设置了,再将Policy权限保持为空。o_1di8181261db2qfl24m1cij11foa.jpg

  • 访问域名
  • 记住访问域名,下面要用。yuminga

    复制这个访问域名,看能不能在浏览器中打开,如果没有显示error节点,说明前面都操作对了

    上传照片

    上传照片方式有很多(推荐用coscmd命令行写个脚本),不过这里教程中你就直接上腾讯云后台上传就好了,想要其他骚操作等相册做好了再自己百度吧。

  • 注意事项
    1. 上传照片前,先在存储桶中建立一个文件夹,也就是你的相册名字,当然你也可以新建多个文件夹。
    2. 但是有一点需要需要注意的是,不能直接上传一个文件夹,那样会出bug,见完文件夹后往里面上传照片,文件夹里面不能再新建文件夹了(除非你自己改造下面的相应代码)
    3. 每个文件中需要一张命名为封面的图片,它会作为你的该文件夹相册的封面

    hexo本地配置

    建立一个相册页面

    hexo new page photos

    编辑blog/sources/photos/index.md文件添加以下代码

    html
    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
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    <style type="text/css">
    .main-inner{
    width: 100%;
    }
    .main {
    padding-bottom: 150px;
    margin-top: 0px;
    background: #121212;
    }
    .main-inner{
    margin-top: unset;
    }
    .page-post-detail .post-meta{
    display: none;
    }
    body {
    background-image: unset;
    background-attachment: unset;
    background-size: 100%;
    /*background-position: top left;*/
    }
    .header{
    background: rgba(28, 25, 25, 0.6);
    border-bottom: unset;
    }
    .menu .menu-item a{
    font-weight: 300;
    color: #e6eaed;
    }

    .imgbox{
    width: 100%;
    overflow: hidden;
    height: 250px;
    border-right: 1px solid #bcbcbc;
    }
    .box{
    visibility: visible;
    overflow: auto;
    zoom: 1;
    }
    .box li{
    float: left;
    width: 25%;
    position: relative;
    overflow: hidden;
    text-align: center;
    list-style: none;
    margin: 0;
    /*display: inline;*/
    padding: 0;
    height: 360px;
    }
    .box li span{
    display: block;
    padding: 4% 7% 10% 7%;
    min-height: 80px;
    background: #fff;
    color: #fff;
    font-size: 16px;
    background: #121212;
    font-weight: 600;
    line-height: 26px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

    img.imgitem{
    padding: unset;
    padding: unset;
    border: unset;
    position: relative;
    padding: 0px;
    height: auto;
    width: 100%;
    }


    div#posts.posts-expand {
    border: unset;
    padding: unset;
    margin-bottom: 10px;
    }
    .posts-expand .post-body img{
    padding: 0px !important;
    }
    .box p{
    display: block;
    background: #121212;
    color: #fff;
    font-size: 12px;
    font-family: 'SwisMedium';
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    }

    .box span strong{
    background: rgba(0,0,0,0.4);
    padding: 20px;
    }

    .posts-expand .post-title {
    display: none;
    }
    .title{
    display: inline-block;
    vertical-align: middle;
    background: url(https://image.idealli.com/bg11.jpg);
    font: 85px/250px 'ChaletComprimeMilanSixty';
    background-position: left bottom !important;
    color: #fff;
    background-size: 100% auto !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    width: 100%;
    text-align: center;
    border: unset;
    height: 700px;
    cursor: unset !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    .btn-more-posts{
    display: inline-block;
    vertical-align: middle;
    font: 85px/250px 'ChaletComprimeMilanSixty';
    color: #000;
    width: 100%;
    text-align: center;
    border: unset;
    height: 400px;
    background-color: #121212;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

    @media (max-width: 767px){
    .box li {
    width: 100%;
    }
    .title {
    height: 200px;
    }

    .box span {
    min-height: 80px;
    border-right: unset;
    font-size: 17px;
    }
    .box p{
    border-right: unset;
    font-size: 12px;

    }
    .posts-expand {
    margin: unset;
    }
    div#comments.comments.v {
    width: 96%;
    padding-top: 50px;
    }


    }

    @media (min-width: 1600px){
    .container .main-inner{
    width: 100%;
    }
    }

    .footer{
    background-color: #121212 !important;
    }
    .v * {
    color: #f4f4f4 !important;
    }

    .v .vwrap .vmark .valert .vcode {
    background: #00050b !important;
    }

    </style>

    <div id="box" class="box"></div>


    <script type="text/javascript">

    function loadXMLDoc(xmlUrl)
    {
    try //Internet Explorer
    {
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    }
    catch(e)
    {
    try //Firefox, Mozilla, Opera, etc.
    {
    xmlDoc=document.implementation.createDocument("","",null);
    }
    catch(e) {alert(e.message)}
    }

    try
    {
    xmlDoc.async=false;
    xmlDoc.load(xmlUrl);
    }
    catch(e) {
    try //Google Chrome
    {
    var chromeXml = new XMLHttpRequest();
    chromeXml.open("GET", xmlUrl, false);
    chromeXml.send(null);
    xmlDoc = chromeXml.responseXML.documentElement;
    //alert(xmlDoc.childNodes[0].nodeName);
    //return xmlDoc;
    }
    catch(e)
    {
    alert(e.message)
    }
    }
    return xmlDoc;
    }

    var xmllink="你的访问域名链接"
    //访问域名链接就是我上面提到的那个访问域名xml链接

    xmlDoc=loadXMLDoc(xmllink);
    var urls=xmlDoc.getElementsByTagName('Key');
    var date=xmlDoc.getElementsByTagName('LastModified');
    var wid=250;
    var showNum=12; //每个相册一次展示多少照片
    if ((window.innerWidth)>1200) {wid=(window.innerWidth*3)/18;}
    var box=document.getElementById('box');
    var i=0;

    var content=new Array();
    var tmp=0;
    var kkk=-1;
    for (var t = 0; t < urls.length ; t++) {
    var bucket=urls[t].innerHTML;
    var length=bucket.indexOf('/');
    if(length===bucket.length-1){
    kkk++;
    content[kkk]=new Array();
    content[kkk][0]={'url':bucket,'date':date[t].innerHTML.substring(0,10)};
    tmp=1;
    }
    else {
    content[kkk][tmp++]={'url':bucket.substring(length+1),'date':date[t].innerHTML.substring(0,10)};
    }
    }

    for (var i = 0; i < content.length; i++) {
    var conBox=document.createElement("div");
    conBox.id='conBox'+i;
    box.appendChild(conBox);
    var item=document.createElement("div");
    var title=content[i][0].url;
    item.innerHTML="<button class=title style=background:url("+xmllink+'/'+title+"封面.jpg"+");><span style=display:inline;><strong style=color:#f0f3f6; >"+title.substring(0,title.length-1)+"</strong></span></button>";
    conBox.appendChild(item);

    for (var j = 1; j < content[i].length && j < showNum+1; j++) {
    var con=content[i][j].url;
    var item=document.createElement("li");
    item.innerHTML="<div class=imgbox id=imgbox style=height:"+wid+"px;><img class=imgitem src="+xmllink+'/'+title+con+" alt="+con+"></div><span>"+con.substring(0,con.length-4)+"</span><p>上传于"+content[i][j].date+"</p>";
    conBox.appendChild(item);
    }
    if(content[i].length > showNum){
    var moreItem=document.createElement("button");
    moreItem.className="btn-more-posts";
    moreItem.id="more"+i;
    moreItem.value=showNum+1;
    let cur=i;
    moreItem.onclick= function (){
    moreClick(this,cur,content[cur],content[cur][0].url);
    }
    moreItem.innerHTML="<span style=display:inline;><strong style=color:#f0f3f6;>加载更多</strong></span>";
    conBox.appendChild(moreItem);
    }
    }

    function moreClick(obj,cur,cont,title){
    var parent=obj.parentNode;
    parent.removeChild(obj);
    var j=obj.value;
    var begin=j;
    for ( ; j < cont.length && j < Number(showNum) + Number(begin); j++) {
    console.log( Number(showNum) + Number(begin));
    var con=cont[j].url;
    var item=document.createElement("li");
    item.innerHTML="<div class=imgbox id=imgbox style=height:"+wid+"px;><img class=imgitem src="+xmllink+'/'+title+con+" alt="+con+"></div><span>"+con.substring(0,con.length-4)+"</span><p>上传于"+cont[j].date+"</p>";
    parent.appendChild(item);
    }
    if(cont.length > j){
    obj.value=j;
    parent.appendChild(obj);
    }
    }

    </script>

    然后hexo cl && hexo g && hexo d生成新的静态文件并上传。

    就完成啦~~~


    特别感谢

    小鸡: 给hexo静态博客添加动态相册功能

    文章作者: 小长弓
    文章链接: http://www.52chang.wang/post/24981.html
    版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 长弓不是弓长
    打赏
    • 微信
      微信
    • 支付宝
      支付宝

    评论