利用alist搭建狐狸半岛的思路

简单回顾一下file建站历程。

网盘框架

我选择的是alist，在此之前是zfile。但是zfile经过实验发现有点问题，研究了很久都没有办法上传整个文件夹，遂直接放弃，转向使用alist。比较于Java后端的zfile，alist用的GO看起来要更加轻便，更加适合这种小负载场景。

挂载网盘

按照官方指南，轻松挂载上Google Drive和139 Cloud。

要注意的是Google Drive配置中的web应用验证界面如果选择了测试中，则refresh token会每七天过期，需要重置。关闭应用icon显示，可以将应用状态切换至运行中。目前该状态的情况还在测试中，应该是可以避免refresh token过期的。

139网盘（原和彩云）的个人盘是分新旧的，要注意。

文件预览

搭建only office

对于office，alist默认提供了Microsoft和Google的在线服务。这两者都是有文件上限的，没记错是5MB，因而用起来还是比较受限的。于是考虑自行部署ONLYOFFICE。

ONLYOFFICE的部属很简单，docker拉取镜像就行。要注意的是，需要自行编写view.html页面，不然没法调用。配置好nginx反代就可使用。

尝试搭建koodo-reader

很喜欢的开源阅读项目。但是web部署时不能接入网盘，有点遗憾。观望一段时间，暂且无法预览.mobi格式的电子书了。

尝试搭建kkFileView

也是直接docker拉取就行，但是不知道为什么总是没法正常使用。其他方法都可以的到这里就不行了。但是目前来看kkFileView还是很优秀的，观察一下alist会不会考虑适配。

借用XDOC

XDOC更简单了，算是国内非常快的在线预览方式了。但是ppt预览是默认转化成pdf再展示的。

其他文件格式

.pdf有pdf.js、ONLYOFFICE、XDOC，.epub有epub.js，.zip和.rar由XDOC提供在线预览。

美化

这段放在head

<link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/lxgwwenkai-regular.css" />
<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
<script async src="https://busuanzi.icodeq.com/busuanzi.pure.mini.js"></script>

<style>
    /* 全局字体 */
    * {
        font-family: LXGW WenKai
    }

    * {
        font-weight: bold
    }

    body {
        font-family: LXGW WenKai;
    }
</style>

这段放在body

<!-- 网页鼠标点击特效 - 爱心 -->
<script type="text/javascript">
         ! function (e, t, a) {
            function r() {
                for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[
                        e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +
                    "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e]
                    .scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
                requestAnimationFrame(r)
            }
            function n() {
                var t = "function" == typeof e.onclick && e.onclick;
                e.onclick = function (e) {
                    t && t(), o(e)
                }
            }
 
            function o(e) {
                var a = t.createElement("div");
                a.className = "heart", s.push({
                    el: a,
                    x: e.clientX - 5,
                    y: e.clientY - 5,
                    scale: 1,
                    alpha: 1,
                    color: c()
                }), t.body.appendChild(a)
            }
 
            function i(e) {
                var a = t.createElement("style");
                a.type = "text/css";
                try {
                    a.appendChild(t.createTextNode(e))
                } catch (t) {
                    a.styleSheet.cssText = e
                }
                t.getElementsByTagName("head")[0].appendChild(a)
            }
 
            function c() {
                return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
                    .random()) + ")"
            }
            var s = [];
            e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
                .mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
                    setTimeout(e, 1e3 / 60)
                }, i(
                    ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
                ), n(), r()
        }(window, document);
    
</script>