<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="~{admin/include::head}">
    </head>
    <style>
    .layui-form {
        padding: 18px 50px 1px 10px;background:white;
        box-shadow: 0 10px 20px 0 rgba(236,236,236,.86);
        border-radius: 5px;
    }
    .layui-elem-quote-warning {
        border-left: 5px solid #d8a900;
    }
    .layui-form-mid {
        float: none;    
    }
    </style>
    <body style="background-color: #f2f2f2">
        <ul th:replace="~{admin/include::nav}"></ul>
        
        <div class="manage-body">
            <div>
            <h2 class="manage-title"><b>站点设置</b></h2>
            </div>
            <div class="layui-form" id="editCommentForm" lay-filter="editCommentForm">

                <div class="layui-form-item">
                    <label class="layui-form-label">站点名称<span>*</span></label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@siteConfig.name}" name="name" lay-verify="required"/>
                        <div class="layui-form-mid layui-word-aux">站点的名称，一般用于页面 title 和主题显示
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">站点描述<span>*</span></label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@siteConfig.description}" name="description" lay-verify="required"/>
                        <div class="layui-form-mid layui-word-aux">一般将其提供给爬虫做 SEO，即首页 header meta description 的 content
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">站点地址<span>*</span></label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@siteConfig.address}" name="address" lay-verify="required"/>
                        <div class="layui-form-mid layui-word-aux">网站地址，可能用于生成绝对地址而非相对地址用（如生成 RSS）
                            <br>请将该项填写为博客地址（带 scheme：http:// 或 https://），如博客地址为 myblog.com，请填写 http://myblog.com
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">RSS 开关</label>
                    <div class="layui-input-block">
                      <input type="checkbox" 
                        th:attr="checked=${@siteConfig.rssOn}? ''"
                        th:value="${@siteConfig.rssOn}"
                        name="rssOn" lay-skin="switch" lay-filter="rssOnSwitch" lay-text="ON|OFF">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">关键词</label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@siteConfig.keywords}" name="keywords"/>
                        <div class="layui-form-mid layui-word-aux">多关键词用英文半角逗号分隔
                            <br>一般将其提供给爬虫做 SEO，即首页 header meta keywords 的 content
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">版权信息</label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@siteConfig.copyright}" name="copyright"/>
                    <div class="layui-form-mid layui-word-aux">
                    版权信息
                    <br>部分主题可能不需要设置该参数
                    </div>
                </div>
                    </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备案信息</label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@siteConfig.beiAnInfo}" name="beiAnInfo"/>
                        <div class="layui-form-mid layui-word-aux">
                        备案信息
                        <br>部分主题可能不需要设置该参数
                        </div>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">Gravatar<span>*</span></label>
                    <div class="layui-input-block">
                        <input class="layui-input" lay-verify="required" th:value="${@siteConfig.gravatarUrl}" name="gravatarUrl"/>
                        <div class="layui-form-mid layui-word-aux">
                            网站采用的 Gravatar 的网址，可以是 CDN 地址，结尾有“/”，若不清楚此项的意义，请留默认值
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">每页文章数</label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@siteConfig.pageSize}" lay-verify="required|number|gt:0" name="pageSize"/>
	                    <div class="layui-form-mid layui-word-aux">
		                    每页文章数，用于博客文章列表页面显示的每页文章数
		                    <br>部分主题可能不需要设置该参数
	                    </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">每页评论数<span>*</span></label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@siteConfig.commentPageSize}" lay-verify="required|number|gt:0" name="commentPageSize"/>
	                    <div class="layui-form-mid layui-word-aux">
	                        每页评论数，用于博客文章页面/独立页面显示的每页评论数
	                    </div>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">最近文章数<span>*</span></label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@siteConfig.recentSize}" lay-verify="required|number|gt:0" name="recentSize"/>
                    <div class="layui-form-mid layui-word-aux">
	                    最近文章数，用于页面或主题模板侧边栏展示的最近文章的数量
	                    <br>部分主题可能不需要设置该参数
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">热门文章数<span>*</span></label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@siteConfig.popularSize}" lay-verify="required|number|gt:0" name="popularSize"/>
	                    <div class="layui-form-mid layui-word-aux">
	                    热门文章数，用于页面或主题模板侧边栏展示的热门文章的数量
	                    <br>部分主题可能不需要设置该参数
	                    </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">标签展示数<span>*</span></label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@siteConfig.tagSize}" lay-verify="required|number|gt:0" name="tagSize"/>
                        <div class="layui-form-mid layui-word-aux">
                        标签展示数，用于页面或主题模板侧边栏展示的标签数量
                        <br>部分主题可能不需要设置该参数
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">最近评论条数<span>*</span></label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@siteConfig.recentCommentSize}" lay-verify="required|number|gt:0" name="recentCommentSize"/>
                        <div class="layui-form-mid layui-word-aux">
                        用于页面或主题模板侧边栏展示的最近评论条数
                        <br>部分主题可能不需要设置该参数
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">最近评论条数层级<span>*</span></label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@siteConfig.recentCommentLevel}" lay-verify="required|number|gt:0" name="recentCommentLevel"/>
                        <div class="layui-form-mid layui-word-aux">
                        用于页面或主题模板侧边栏展示的最近评论条数的层级递归
                        <br>部分主题可能不需要设置该参数
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">开启图片压缩</label>
                    <div class="layui-input-block">
                        <input type="checkbox" 
                            th:attr="checked=${@siteConfig.imageCompress}? ''"
                            th:value="${@siteConfig.imageCompress}"
                            name="imageCompress" lay-skin="switch" lay-filter="imageCompress" lay-text="ON|OFF">
                        <div class="layui-form-mid layui-word-aux">
                            是否开启图片压缩。是当且仅当部署系统存在 avifenc/cwebp/gif2webp 时生效。除 gif 必定采用 webp 外，会自动选择较小的文件。
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="submit">提交</button>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div th:replace="~{admin/include::feet}"></div>
        <th:block th:replace="~{admin/include::head-script}"></th:block>
        
        <script>
        layui.use(['form'], function(){
            var form = layui.form;
            document.querySelectorAll('[lay-skin="switch"]').forEach(check => {
                form.on(`switch(${check.getAttribute('lay-filter')})`, (data) => {
                    var el = data.elem;
                    el.value = !!el.checked;
                });
            })
            form.on('submit(submit)', function(data){
                $.ajax({
                    url: location.href,
                    data: JSON.stringify(data.field),
                    contentType: 'application/json',
                    method: 'POST',
                    success: function (result) {
                        layer.msg('保存成功', {time:1000}, function(){
                            location.reload();
                        });
                    },
                    error: function (res) {
                        var r = res.responseJSON;
                        layer.msg(r&&r.data||'服务器错误', {time:2000});
                    }
                });
            });
            form.render();
            
        })
        </script>
    </body>

</html>