OLAINDEX安装-修改css适配手机


本文重点是记录一下修的数据,安装过程只是简单的提一下,具体需要参考OLAINDEX的文档
https://olaindex.js.org/#/

环境准备

宝塔操作
安装php 版本需要 >= 7.4 安装fileinfo、opcache、redis(选择安装)扩展。
删除proc_open、putenv函数。

curl -sS https://getcomposer.org/installer | php  
mv composer.phar /usr/local/bin/composer 
# 更换源为国内源,国外服务器可忽略此步骤
composer config -g repo.packagist composer https://mirrors.aliyun.com/composer
# 安装 git
yum -y install git

部署

cd web目录
git clone https://github.com/WangNingkai/OLAINDEX.git tmp 
mv tmp/.git . 
rm -rf tmp 
git reset --hard 
# 这里确保已成功安装 composer ,如果报权限问题,建议给予用户完整权限。
composer install -vvv
chmod -R 777 storage
# 此处 www 根据服务器具体用户组而定
chown -R www:www *
composer run install-app (此为自动安装,默认sqlite存储数据)

安装完成后,将域名指向应用目录的 public 下,并设置伪静态。

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

修改缓存

php 安装redis扩展
宝塔里安装redis插件
修改网站目录下的.env文件,找到缓存配置的注释,将 CACHE_DRIVER 的值改为 redis

# 缓存配置
# file/memcached/redis
CACHE_DRIVER=redis
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

ssh连接到服务器cd到网站目录 例子:cd /www/wwwroot/zixu.site

# 安装redis扩展
composer require predis/predis 
php artisan config:cache 
# 刷新缓存
php artisan cache:clear

防止图片等文件404

网站设置-配置文件,将下面的代码注释后保存(仅做参考)

    # location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    # {
    #     expires      30d;
    #     error_log /dev/null;
    #     access_log off;
    # }
    
    # location ~ .*\.(js|css)?$
    # {
    #     expires      12h;
    #     error_log /dev/null;
    #     access_log off; 
    # }

适配手机页面

目录/resources/views/default/layouts/main.blade.php 打开后在</head>前添加下面的样式,主要解决文件列表在手机上显示异常,在手机等设备上隐藏文件时间大小等信息,让布局更加合理。
2021-03-20:已经在GitHub上提交,并合并到主分支。

<style>
    @media (max-width: 991px){
        /*超出不换行,省略掉*/
        .table-sm td:nth-child(1),td:nth-child(2),td:nth-child(3) {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
    @media (max-width: 767px){
        /*文件名字*/
        .table-sm td:nth-child(1) {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        /*标题,文件大小、日期*/
        .w-100 tr>th:nth-child(2),tr>th:nth-child(3){
            display: none;
        }
        /*文件大小、日期*/
        .list-item td:nth-child(2),td:nth-child(3){
            display: none;
        }
        /*操作*/
        .w-100 tr>th:nth-child(4){
            position: absolute;
            right: 24px;
        }
        /*按钮*/
        .list-item td:nth-child(4){
            white-space: nowrap;
            position: absolute;
            right: 24px;
        }
    }
</style>

Other

替换ico,原来的有些丑,目录:/public/favicon.ico
修改没有头部信息文件时显示的div框,目录:/resources/views/default/one.blade.php
2021-03-20:已经修复,无需修改。

@if(count($accounts) > 1)
<div class="card-header d-flex align-items-center">
    <div class="dropdown mb-0 mr-2 my-1">
        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="btnChoiceAccount"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            选择盘符:
        </button>
        <div class="dropdown-menu" aria-labelledby="btnChoiceAccount">
            @foreach($accounts as $key => $account)
                <a class="dropdown-item"
                    href="{{ route('drive.query',['hash' => $account['hash_id']]) }}">{{ $key + 1 .':'.$account['remark'] }}</a>
            @endforeach
        </div>
    </div>
</div>
@endif
@if(setting('open_search', 0))
<div class="card-header d-flex align-items-center">
    <form class="form-inline mb-0 mr-2 my-1">
        <label class="mb-0 mr-2 my-1">
            <input class="form-control form-control-sm" type="text" name="keywords"
                    placeholder="搜索" value="{{ $keywords }}">
        </label>
        <button class="btn btn-primary btn-sm mr-2 my-1" type="submit">搜索</button>
    </form>
</div>
@endif

声明:纸盒博客|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - OLAINDEX安装-修改css适配手机


Carpe Diem and Do what I like