因为我的blog经常发一些图片,而且单张大小都很大,单靠服务器是扛不住的。

所以打算搞个图片服务器,还想免费又好用,经过几番实践搞出了如下方式。速度可以,还免费


架构方式为:又拍云+github+Ueditor


对,你没看错,还混进了github,真是良心网站


方案是又拍云和github各传一份图片,又拍云的用于网页普通展示,github用于大图的查看。


以单反拍出的5K照片为例,展示的压缩为1080p就足够了,大图的压缩的4K也很清楚。


图片压缩方案可以看我这篇 使用photoshop高效高质量压缩图片

然后使用js批量生成html代码,插入到ueditor编辑器内就大功告成


具体教程如下


1.免费使用又拍云


加入又拍云联盟可得每月15G CDN流量和10G存储空间,对于个人博客肯定够用了

首先注册,来点我的推广链接注册 注册又拍云


然后就是申请加入又拍云联盟了,也很简单,在你的网站首页底部加上又拍云的logo即可



详细见申请页面 加入又拍云联盟





大概五个工作日内就能通过,一次性赠送一年的代金券,接下来就可以愉快的上传图片了


首先创建Bucket,这个免费提供域名CDN加速,很良心,但域名需要通过备案





上传推荐使用ftp,配置如图




主机名 v0.ftp.upyun.com, 用户名 操作员名/Bucket名, 密码就是操作员密码


上传文件把文件名改成1,2,3,4.....,至于原因,你待会就知道了


推荐一个超级好用的批量文件重命名工具,仅需一步即可实现1-n的重命名,下载链接 批量重命名工具




2.免费使用github


这个简单,就建立仓库上传文件就行,存储空间无限,太良心了虽然速度比不上又拍云,用于查看大图足够了


使用git上传文件方式可看我这篇博客 使用github和git托管你的代码




3.引入viewer.js,用于查看大图


强大之处就不多说了,viewer.js的github主页 viewer.js


引入方式也很简单,在你的文章详情页引入


<link rel="stylesheet" href="路径/viewerjs/viewer.min.css">
<script src="路径/viewerjs/viewer.min.js"></script>


再加上如下代码


<script type="text/javascript">
    var viewer = new Viewer(document.getElementById('images'), {
        url: 'data-original'
    });
</script>



然后id为images的<div>内的所有<img>都可以点击查看大图了,如下


<div id="images">
    <img src="小图地址(又拍云)" data-original="大图地址(github)"/>
</div>





4.使用js生成html,并插入Ueditor


很简单,直接贴代码


<body>
<div id="btns">
    <div>
        <table>
            <tr>
                <th>总数</th>
                <td><input type="text" id="sum"></td>
                <th>扩展名</th>
                <td><input type="text" id="ext"></td>
                <th>文件夹</th>
                <td><input type="text" id="name"></td>
                <td>
                    <button onclick="setContent()">写入内容</button>
                </td>
            </tr>
        </table>
    </div>
</div>
<div>
    <script id="editor" type="text/plain"></script>
</div>

<script type="text/javascript">
    SyntaxHighlighter.all();
    var ue = UE.getEditor('editor');

    function setContent() {
        var sum = document.getElementById("sum").value;
        var ext = document.getElementById("ext").value;
        var name = document.getElementById("name").value;
        var image = "github基地址" + encodeURI(name) + "/";
        var thumb = "又拍云基地址" + encodeURI(name) + "/";
        var content = "";
        for (var i = 1; i <= sum; i++) {
            content = content + "<p style=\"text-align: center;\">";
            content = content + "<img src=\"" + thumb + i + ext + "\"";
            content = content + " data-original=\"" + image + i + ext + "?raw=true\"/>";
            content = content + "</p>\n";
            content = content + "<p>";
            content = content + "<br/>";
            content = content + "</p>";
        }
        UE.getEditor('editor').setContent(content);
    }
</script>
</body>


效果如图,仅需填写文件夹名和数量,一键生成




个人网站运营不易ヾ(◍°∇°◍)ノ゙如果有帮到你赞助一下吧

Kevin博客
  • 最新评论
  • 总共0条评论