<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head th:fragment="head(title, links, scripts)">
    <title th:replace="${title}" th:text="${globalConfig.websiteName}">开发者客栈</title>
    <meta name="baidu-site-verification" content="code-x9mzArq1EX" />
    <!-- Required meta tags -->
    <meta name="keywords" content="开发者客栈，开发者社区，开源社区，spring boot开源社区，Java开源社区，社区文章，社区问答" />
    <meta name="description" content="开发者客栈是基于spring boot开发的一套Java版开源社区，提供写文章，提问题等功能，也可以帮助开发者免费部署供个人学习使用，商业用途需收费。" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
    <link rel="icon" th:href="${globalConfig.websiteFaviconIconUrl}" href="https://static.developers.pub/favicon.ico">

    <!-- cdn server -->
<!--    <link href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">-->
<!--    <link href="https://cdn.bootcdn.net/ajax/libs/toastr.js/1.3.1/css/toastr.min.css" rel="stylesheet">-->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/toastr.min.css" rel="stylesheet">

    <!--
        custom style，为什么不写在单独的css文件里？资源文件上传到cdn后，再对文件内容改动后再上传cdn，
        cdn同名文件有缓存，刷新不及时，每次都需要修改文件名后再上传cdn，这样很麻烦
    -->
    <style>
        body {
            -webkit-font-smoothing: antialiased;
        }
        .custom-empty {
            text-align: center;
            margin-top: 20px;
            width: 100%;
            font-size: 1rem;
        }
        html,
        .custom-bg-color {
            background-color: #EEEEEE;
        }
        .posts-comment-input-box,
        .posts-author-box,
        .posts-box,
        .page-box,
        .user-info-box {
            background-color: #fff;
        }
        .btn-outline-primary:hover,
        .page-item.active .page-link,
        .current-page {
            color: #fff !important;
        }
        .bottom-line,
        .list-group,
        .editor-title {
            border-bottom: 1px solid rgba(0,0,0,.125);
        }
        .faq-solution-box,
        .posts-comment-input-box {
            background-color: #fafbfc;
        }
        .posts-comment-input-box {
            margin-top: -20px;
        }
        .posts-comment-box,
        .posts-author-box,
        .posts-box,
        .editor-form-box,
        .editor-title,
        .card-body,
        .card-header {
            padding: 20px;
        }
        .type-box {
            padding: 10px;
        }
        .tag-box,
        .no-comment-box,
        .posts-author-box,
        .posts-box,
        .card,
        .user-info-box,
        .page-box,
        .carousel {
            margin-bottom: 20px;
        }
        .custom-theme-bg-color,
        .btn-outline-primary:hover,
        .page-item.active .page-link,
        .btn-primary,
        .btn-primary:active,
        .btn-primary:focus,
        .btn-primary:hover,
        .current-page {
            background-color: #28a745 !important;
        }
        .btn-outline-primary:hover,
        .page-item.active .page-link,
        .btn-primary,
        .btn-primary:active,
        .btn-primary:focus,
        .btn-primary:hover,
        .btn-outline-primary {
            border-color: #28a745;
        }
        .page-link,
        .page-link:hover,
        .btn-outline-primary,
        .posts-admin-tag-official,
        a:hover,
        .custom-font-color {
            color: #28a745;
        }
        a {
            color: #212529;
        }
        .dropdown-menu,
        .card {
            border: 0;
        }
        .input-group-text,
        .navbar-toggler,
        .modal-content,
        .card,
        .form-control,
        .btn,
        .dropdown-menu,
        .list-group-item:first-child,
        .list-group-item:last-child,
        .pagination {
            border-radius: 0;
        }
        /*  */
        html {
            padding-top: 82px;
        }
        .posts-list-desc,
        a {
            color: rgba(0,0,0,.87);
        }
        .custom-by-both {
            padding-left: 10px;
            padding-right: 10px;
        }
        .carousel-inner img {
            width: 100%;
            height: 100%;
        }
        .foot {
            height: 70px;
        }
        .foot-link {
            list-style: none;
            padding: 25px 0;
            width: 80%;
            margin: 0 auto;
            text-align: left;
            font-size: 0;
            border-top: 1px solid rgba(0,0,0,.1);
        }
        .foot li {
            font-size: 14px;
            padding: 0 10px;
            display: inline-block;
            vertical-align: middle;
            line-height: 1em;
        }
        .foot li:last-child {
            border-left: none;
            float: right;
            padding-right: 0;
        }
        .posts-list-desc {
            display: inline;
            max-height: 48px;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .posts-list-title {
            font-size: 18px;
            font-weight: 700;
            line-height: 1.5;
            margin-bottom: 5px;
            color: rgba(0,0,0,.85);
        }
        .posts-list-payload-item,
        .posts-list-payload-item a,
        .posts-list-payload-box-author {
            color: #6c757d !important;
        }
        .posts-list-payload-item {
            padding: 3px 8px;
        }
        .page-box {
            padding: 10px;
        }
        .faq-solution-box {
            margin-top: 10px;
            padding: 15px;
        }
        .faq-solution-box,
        .posts-list-desc {
            font-size: 13px;
            line-height: 24px;
        }
        .posts-admin-tag {
            margin-top: 4px;
            height: 16px;
            padding: 2px;
            border-radius: 2px;
            line-height: 1;
            font-size: 12px;
            margin-right: 6px;
            vertical-align: middle;
            -webkit-transform: translateY(1px);
            -ms-transform: translateY(1px);
            transform: translateY(1px);
        }
        .posts-admin-tag-official {
            background: rgba(101,212,117,0.1);
        }
        .posts-admin-tag-top {
            color: #f85959;
            background: rgba(248,89,89,0.1);
        }
        .posts-admin-tag-marrow {
            color: #3c8cff;
            background: rgba(60,140,255,0.1);
        }
        .selected-domain {
            border-bottom: 1px solid #28a745;
        }
        .user-info-box {
            height: 200px;
            width: 100%;
            margin-left: 0;
            margin-right: 0;
        }
        .user-info-date-box {
            height: 80px;
            padding-top: 40px;
            padding-left: 40px;
        }
        .user-info-date-box>p {
            display: inline-block;
        }
        .user-info-desc-box {
            margin-top: 15px;
            padding-left: 40px;
            padding-right: 40px;
        }

        /* 覆盖框架默认样式 */
        .navbar {
            padding: .5rem 6rem;
        }
        .list-group-item {
            border: none;
            padding: 0.75rem 1.25rem;
        }
        .btn {
            padding-left: 25px;
            padding-right: 25px;
        }
        .btn-sm {
            padding-left: 15px;
            padding-right: 15px;
        }

        .page-item:first-child .page-link,
        .page-item:last-child .page-link {
            border-radius: 0;
        }
        .comment-avatar-box {
            width: 40px;
            float: left;
        }
        .posts-comment-input-box-btn {
            width: 100%;
            display: none;
        }
        .posts-comment-input-box-textarea {
            padding: 4px 10px;
            font-size: 13px;
            line-height: 1.7;
        }
        .posts-comment-input-box-textarea,
        .comment-content-box {
            width: calc(100% - 40px);
            float: right;
        }
        .best-answer {
            margin-left: 20px;
        }
        .best-answer:hover,
        .reply-comment:hover {
            cursor: pointer;
        }
        .comment-content-box-title {
            font-size: 16px;
            color: #3d464d;
            font-weight: 300;
        }
        .comment-content-box-content {
            color: #505050;
            font-size: 14px;
            margin: 12px 0;
        }
        .comment-content-box-foot {
            color: #b2b2b2;
            font-size: 14px;
        }
        .navbar-count-msg-box {
            position: relative;
        }
        .navbar-count-msg {
            position: absolute;
            top: 8px;
            right: 0;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #f85959;
        }
        .navbar-light .navbar-nav .nav-link {
            color: rgba(0,0,0,.85);
        }
        .message-block {
            margin-right: 10px;
        }
        .third-oauth-login-box::before {
            content: '三方账号登录';
            position: absolute;
            left: 50%;
            bottom: 55px;
            font-size: 10px;
            transform: translateX(-50%);
            -webkit-transform: translate(-50%,-50%);
            padding: 0 10px;
            background-color: #fff;
        }
        .third-oauth-login-box {
            display: block;
            text-align: center;
        }

        /* 设备适配样式 */
        @media (max-width: 768px) {
            html {
                padding-top: 68px;
            }
            .navbar {
                padding: .5rem 1rem;
            }

            .foot-link {
                padding: 10px 0;
            }
            .foot li {
                display: block;
                padding: 10px 0 0 0;
            }
            .foot li:last-child {
                float: none;
            }
            .tag-box,
            .no-comment-box,
            .posts-author-box,
            .posts-box,
            .card,
            .carousel,
            .page-box,
            .user-info-box {
                margin-bottom: 10px;
            }
            .user-info-date-box {
                display: none;
            }
            .user-info-desc-box {
                padding-left: 10px;
                padding-right: 0;
            }
            .best-answer {
                margin-left: 10px;
            }
            .posts-comment-box,
            .posts-box,
            .editor-form-box,
            .card-body,
            .card-header,
            .list-group-item,
            .faq-solution-box,
            .editor-title {
                padding: 10px;
            }
            .type-box {
                padding: 0;
            }
            .posts-comment-input-box {
                margin-top: -10px;
            }
            .user-edit-btn {
                display: none;
            }
            .message-block {
                margin-right: 5px;
            }
        }
    </style>

    <th:block th:replace="${links}" />
    <th:block th:replace="${scripts}" />
</head>

</html>