Layui Layer Laydate文档部署到个人服务器(含HTML文档镜像下载)

背景:官方layui文档关停,用人家的镜像文档过一阵子又用不了实属恶心人,所以想着自己部署到自己服务器上,想看就看

1. 下载layui文档 == 我从别人哪里fork过来的

https://gitee.com/changenen/layui_doc

2. layui文档上传到服务器

将layui放到linux上随便一个文件夹(Nginx配置也随之改变,如想直接粘贴复制我的配置,也根据我的路径上传即可)

在这里插入图片描述

3. nginx配置到layui文档的目录

Nginx配置 == 请自行取有关layui的配置即可 == 配置好Nginx重新加载Nginx配置即可生效

user www www;
worker_processes auto;
error_log /www/wwwlogs/nginx_error.log crit;
pid /www/server/nginx/logs/nginx.pid;
worker_rlimit_nofile 51200;

events {
    use epoll;
    worker_connections 51200;
    multi_accept on;
}

http {
    include mime.types;
    #include luawaf.conf;

    include proxy.conf;

    default_type application/octet-stream;

    server_names_hash_bucket_size 512;
    client_header_buffer_size 32k;
    large_client_header_buffers 4 32k;
    client_max_body_size 50m;

    sendfile on;
    tcp_nopush on;

    keepalive_timeout 60;

    tcp_nodelay on;

    fastcgi_connect_timeout 300;
    fastcgi_send_timeout 300;
    fastcgi_read_timeout 300;
    fastcgi_buffer_size 64k;
    fastcgi_buffers 4 64k;
    fastcgi_busy_buffers_size 128k;
    fastcgi_temp_file_write_size 256k;
    fastcgi_intercept_errors on;

    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
    gzip_vary on;
    gzip_proxied expired no-cache no-store private auth;
    gzip_disable "MSIE [1-6]\.";

    limit_conn_zone $binary_remote_addr zone=perip:10m;
    limit_conn_zone $server_name zone=perserver:10m;

    server_tokens off;
    
    
    access_log /www/wwwlogs/access.log;
    log_format main '$scheme-$remote_addr - $remote_user [$time_local] "$request" '
    '$status $body_bytes_sent "$http_referer" '
    '"$http_user_agent" "$http_x_forwarded_for"'
    '"$request_time" "$upstream_response_time"';
    
    
    upstream baota {
        server 127.0.0.1:9000;
    }

    server {
        listen 888;
        server_name phpmyadmin;
        index index.html index.htm index.php;
        root /www/server/phpmyadmin;
        location ~ /tmp/ {
            return 403;
        }

        #error_page   404   /404.html;
        include enable-php.conf;

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
            expires 30d;
        }

        location ~ .*\.(js|css)?$ {
            expires 12h;
        }

        location ~ /\. {
            deny all;
        }
    }


    server {
        listen 80;
        error_page 400 404 413 /4xx.html;
        error_page 500 502 503 504 /50x.html;
        
        # layui文档
        location /layui_doc {
          root /www/project;
        }

        
        # layer文档
        location /layer  {
           root /www/project/layui_doc;
        }
        
        # laydate文档
        location /laydate  {
           root /www/project/layui_doc;
        }
        
        location / {
            # layui文档引用的静态文件配置
            if ($http_referer ~ '(layui_doc/)|(doc/)|(layer/)|(layui/)|(demo/)|(laydate/)|(extend/)|(alone.html)') {
                root /www/project/layui_doc;
                break;
            }
        }
          
    }


    include /www/server/panel/vhost/nginx/*.conf;
}


4. 访问 - 大功告成

ip地址/layui_doc
ip地址/layer
ip地址/laydate


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
`layui.laydate` 是 LayUI 这一前端框架中提供的日期选择插件的一个实例,它可以帮助用户在网页上创建日期输入控件,并提供多种样式和功能。在使用 `laydate` 插件时,调整大小是通过设置相关属性来完成的。 ### 调整大小的基本步骤: #### 添加 laydate 元素 首先,在 HTML 中添加一个用于日期选择的 `<input>` 或 `<div>` 元素,并为其分配一个唯一的 ID,以便后续 JavaScript 操作: ```html <div id="myDatepicker"></div> ``` 接着引入 LayUIlaydate 所需的 CSS 和 JS 文件: ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layer@3.x/dist/css/layer.css"> <script src="https://cdn.jsdelivr.net/npm/layui@2.x/dist/layuimini.js"></script> <script> layui.use('laydate', function(){ var laydate = layui.laydate; }); </script> ``` #### 初始化 laydate 初始化 laydate 实例时,可以利用 `laydate.render()` 函数,传入元素的 ID 和需要配置的选项来实现基本的日期选择框: ```javascript $(function() { // 初始化日期选择器 laydate.render({ elem: '#myDatepicker', format: 'yyyy-MM-dd' }); }); ``` ### 调整大小的相关选项: 除了基本的日期选择功能外,`laydate` 提供了丰富的自定义选项,包括调整大小的功能。例如,你可以通过修改配置对象内的选项来自定义日期选择框的外观和行为。对于调整大小的需求,通常是指改变日期选择框的整体尺寸、弹出层的大小等。 #### 示例:调整日期选择框大小 假设你需要调整日期选择器的宽度和高度,可以在初始化时直接指定这些属性: ```javascript laydate.render({ elem: '#myDatepicker', range: '~', width: '200px', // 设置宽度 height: '300px', // 设置高度 fmt: 'yyyy-MM-dd', // 日期格式 done: function(value) { // 回调函数处理选择的日期 console.log(value); } }); ``` 这将使得日期选择框具有指定的宽度和高度。需要注意的是,`width` 和 `height` 的单位应与页面中其他元素一致,以保持布局的一致性和美观性。 ### 相关问题 - `layui.laydate` 调整大小的应用场景: 1. **响应式设计**:在不同设备和屏幕尺寸下,动态调整日期选择器的大小以适应界面需求。 2. **界面美化**:根据网站的主题风格,调整日期选择器的颜色、边框样式以及整体布局,以提升用户体验。 3. **优化性能**:针对特定的高密度设备或大屏幕显示情况,合理调整大小以避免过多内容挤压,提高可读性和交互体验。 ### 总结: `layui.laydate` 提供了灵活的方式来定制日期输入组件,包括调整大小等功能,这对于构建具有良好视觉效果和易用性的Web应用至关重要。通过合理配置和使用其API,开发者可以根据项目需求创造出既实用又美观的日期输入解决方案。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值