yangchaojie
/
Blog


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
							{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="baidu-site-verification" content="codeva-y7kl5gdyM4"/>

    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=no"
    />
    <meta
            name="description"
            content="CyberSicko.net"
    />
    <link rel="shortcut icon" href="{% static 'favicon.ico' %}">

    <meta name="keywords" content="Semantic-UI, Theme, Design, Template"/>
    <meta name="author" content="CyberSicko"/>
    <meta name="theme-color" content="#ffffff"/>
    <title>CyberSicko.NET</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200;300;400;500;600;700;900&display=swap"
          rel="stylesheet">
    <link
            rel="stylesheet"
            href="{% static 'semantic.min.css' %}"
            type="text/css"
    />
    <link
            rel="stylesheet"
            href="{% static 'photoswipe/photoswipe.css' %}"
            type="text/css"
    />

    {% if is_login %}
        <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">

    {% endif %}
    <style>
        :root {
             --primary: #333333;
            --bg-light: #f8f8f8;
            --text: #333;
            --gray: #666;
            --line-height: 1.8;
            --max-width: 900px;
            --sidebar-width: 300px;
        }

        body {
            color: var(--text);
            background: whitesmoke;
            line-height: var(--line-height);
        }


        /* 主容器：限制最大宽度并居中 */
        .ui.grid.stackable.container {
            max-width: var(--max-width);
            margin: 2rem auto;
            padding: 0 1rem;
        }

        /* 段落与标题留白 */
        p {
            margin-bottom: 1rem;
        }

        h2.ui.header {
            margin-top: 2rem;
            margin-bottom: 1rem;
        }

        /* 卡片式内容区 */
        .eleven.wide.column {
            background: #fff;
            padding: 2rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border-radius: 4px;
        }

        /* 代码块滚动与样式 */
        .pre {
            overflow-x: auto;
            padding: 1rem;
            background: #fafafa;
            border-left: 3px solid var(--primary);
            margin: 1.5rem 0;
        }

        /* 顶部菜单去掉死板的灰色，增加一点阴影 */
        .ui.top.fixed.menu {
            background: #fff;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        }

        /* 菜单项内边距更舒适 */
        .ui.menu .item {
            padding: 0.8rem 1.2rem;
            font-size: 1rem;
        }

        /* 移动端：展开动画更顺滑 */
        .ui.vertical.menu {
            transition: max-height .3s ease-out;
            overflow: hidden;
        }

        .ui.vertical.menu.collapsed {
            max-height: 0 !important;
        }

        .ui.vertical.menu.expanded {
            max-height: 500px !important;
        }

        /* 右侧 Archiv/Top 区域在大屏下保持粘性 */
        .four.wide.right.floated.column {
            position: sticky;
            top: 80px; /* 根据你的导航高度微调 */
            max-width: var(--sidebar-width);
            margin-left: 2rem;
        }

        /* 调整归档和标签列表间距 */
        .ui.list .item {
            padding: .5rem 0;
        }
    </style>
    <style type="text/css">
        p {
            font-size: 1.2em;
        }

        body {
            padding-top: 54px;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: grayscale;
        }


        .ui.borderless.menu {
            background-color: #f8f8f8;
        {#box-shadow: none;#} flex-wrap: wrap;
            border: none;
            padding-left: 0;
            padding-right: 0;
        }

        .ui.borderless.menu .header.item {
            font-size: 18px;
            font-weight: 400;
        }

        .ui.mobile.only.grid .ui.menu .ui.vertical.menu {
            display: none;
        }

        .ui.mobile.only.grid .ui.vertical.menu .dropdown.icon {
            float: unset;
        }

        .ui.mobile.only.grid .ui.vertical.menu .dropdown.icon:before {
            content: "\f0d7";
        }

        .ui.mobile.only.grid .ui.vertical.menu .ui.dropdown.item .menu {
            position: static;
            width: 100%;
            background-color: unset;
            border: none;
            box-shadow: none;
        }

        .ui.mobile.only.grid .ui.vertical.menu .ui.dropdown.item .menu {
            margin-top: 6px;
        }

        .ui.container > .ui.message {
            background-color: rga(238, 238, 238);
            box-shadow: none;
            padding: 5rem 4rem;
            margin-top: 1rem;
        }

        .ui.message h1.ui.header {
            font-size: 4.5rem;
        }

        .ui.message p.lead {
            font-size: 1.3rem;
            color: #333333;
            line-height: 1.4;
            font-weight: 300;
        }

        p > a > img {
            width: 100px;
            height: 100px;
        }

        {% block css %}

        {% endblock %}


    </style>

</head>

<body id="root">
{% if is_login %}
    {% csrf_token %}
{% endif %}
<div class="ui tablet computer only padded grid">
    <div class="ui top fixed borderless fluid huge menu">
        <div class="ui container">
            <a href="/" class="header item " >CyberSicko.net</a>
            <a href="{% url 'index' %}" class="{% if current_category == None %}
                active
                {% else %}
                {% endif %} item">主页</a>

            {% for item in category %}
                {#                    <li class="category_li"><a href="/category/{{ item.name }}?page=1">{{ item.name }}</a></li>#}
                <a class="{% if current_category != None and current_category == item.name %}
                active
                {% else %}
                {% endif %} item" href="/category/{{ item.name }}?page=1">{{ item.name }}</a>

            {% endfor %}

            <div class="right menu">
                <div id="dropdown1" class="ui dropdown item right">关联<i class="dropdown icon"></i>
                    <div class="menu">
                        <a class="item" href="http://git.cybersicko.net"><i class="gitlab icon"></i>GOGS</a>
                        <a class="item" href="http://files.cybersicko.net"><i class="file icon"></i>Files</a>
                    </div>
                </div>
                <a href="/login" class="item"> <i class="icon share square"></i>
                    Sign in</a>
            </div>
        </div>
    </div>
</div>
<div class="ui mobile only padded grid">
    <div class="ui top fixed borderless huge fluid menu">
            <a href="/" class="header item " >CyberSicko.net</a>
        <div class="right menu">
            <div class="item">
                <button class="ui icon toggle basic button">
                    <i class="content icon"></i>
                </button>
            </div>
        </div>
        <div class="ui vertical borderless fluid menu">
            <a href="{% url 'index' %}" class="{% if current_category == None %}
                active
                {% else %}
                {% endif %} item">主页</a>
            {% for item in category %}
                {#                    <li class="category_li"><a href="/category/{{ item.name }}?page=1">{{ item.name }}</a></li>#}
                <a class="{% if current_category != None and current_category == item.name %}
                active
                {% else %}
                {% endif %} item" href="/category/{{ item.name }}?page=1">{{ item.name }}</a>

            {% endfor %}
            <a href="/login" class="item"> <i class="icon share square"></i>
                Sign in</a>
            <div id="dropdown1" class="ui dropdown item right">关联<i class="dropdown icon"></i>
                <div class="menu">
                    <a class="item" href="http://git.cybersicko.net"><i class="gitlab icon"></i>GOGS</a>
                    <a class="item" href="http://files.cybersicko.net"><i class="file icon"></i>Files</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% block container %}

{% endblock %}
<footer style="margin-top: 50px" class="ui secondary segment">
    <div class="ui two column stackable grid">
        <div class="ten wide column">
            <img style="width: 8rem" src="{% static '/img.png' %}">
            <p> © 2023 - 2023 cybersicko.net - All Rights Reserved.</p>
        </div>
        <div class="six wide column">
            <div class="ui left aligned container" style="margin-top:10px">
                <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=50019002503732"
                   style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img
                        src="{% static '/备案图标.png' %}" style="float:left;"/>
                    <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;"> 渝公网安备
                        50019002503732号</p></a>
                <a rel="nofollow"
                   href="http://beian.miit.gov.cn/publish/query/indexFirst.action"
                   target="_blank"><p>皖ICP备2023011943号</p></a>
            </div>
        </div>
    </div>
</footer>
<script type="application/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<script type="application/javascript" src="{% static 'semantic.js' %}"></script>
<script type="application/javascript" src="{% static 'photoswipe/photoswipe.umd.min.js' %}"></script>
<script type="application/javascript" src="{% static 'photoswipe/photoswipe-lightbox.umd.min.js' %}"></script>
<script>
    $('#search')
        .search({
            type: 'category',
            minCharacters: 3,
            apiSettings: {
                url: '/search?keywords={query}'
            }
        })
    var lightbox = new PhotoSwipeLightbox({
        gallery: '.extra.images',
        children: 'a',
        // dynamic import is not supported in UMD version
        pswpModule: PhotoSwipe
    });
    lightbox.init();

    $(document).ready(function () {
        $(".ui.toggle.button").click(function () {
            $(".mobile.only.grid .ui.vertical.menu").toggle(100);
        });

        $(".ui.dropdown").dropdown();
    });
</script>
{% block js %}
{% endblock %}

<script>
</script>
</body>
</html>