yangchaojie
/
Blog


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707
							{% load static %}{% load day_util %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <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="apple-mobile-web-app-capable" content="yes"/>
    <meta name="robots" content="index,follow"/>

    <meta
            name="description"
            content="{{ article.intro }}"
    />
    <meta name="keywords" content="{{ article.title }}"/>
    <meta name="author" content="CyberSicko"/>
    <meta name="theme-color" content="#ffffff"/>
    <title>{{ article.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"
    />

    <link rel="stylesheet" href="{% static 'highlightjs/styles/androidstudio.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/fonts.css' %}">
    <link rel="shortcut icon" href="{% static 'favicon.ico' %}">
    <style>
        :root {
            --primary: #000000;
            --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);

        }

        a {
            color: var(--primary);
            transition: color .2s;
        }

        a:hover {
            color: darken(var(--primary), 10%);
        }

        /* 主容器：限制最大宽度并居中 */
        .ui.grid.stackable.container {
            max-width: var(--max-width);
            margin: 1rem 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: 1.2rem;
        }

        /* 移动端：展开动画更顺滑 */
        .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 > a > img {
            width: 100%;
            height: 100%;
        }

        blockquote {
            margin: 0;
        }

        blockquote {
            padding: 15px;
            background: #eee;
        }

        blockquote ::before {
            content: '\201C';
        }

        blockquote ::after {
            content: '\201D';
        }

        p > a {
            color: #4183c4;
        }

        span > code {
            background: #eee;
            border-radius: 3px;
            padding-left: 5px;
            padding-right: 5px;
            color: crimson;
        }

        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: 1.2rem;
            font-weight: 500;
        }

        .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;
        }

        /* 让编辑器生成的表格始终填满可用宽度 */
        #article table {
            /* 覆盖 inline style */
            width: 100% !important;
            max-width: 100% !important;
            margin: 1rem 0; /* 上下留白，左右不需要居中 */
            border-collapse: collapse;
        }

        /* 去掉默认 cell 间距 */
        #article table {
            border-spacing: 0;
        }

        #article_content {
            margin-top: 2rem;
        }

        /* 头部和单元格：更小的内边距和字体 */
        #article table th,
        #article table td {
            padding: 0.4em 0.5em; /* 紧缩内填充 */
            font-size: 0.88rem; /* 略微小一点的文字 */
            line-height: 1.3; /* 行高也缩小 */
            border: 1px solid #ddd; /* 细线框 */
            text-align: left;
            vertical-align: middle;
        }

        /* 表头背景：灰黑主题色 */
        #article table th {
            background-color: #f5f2f0;
            font-weight: 600;
        }

        /* 斑马条纹 */
        #article table tr:nth-child(even) td {
            background-color: #f7f7f7;
        }

        /* 悬停高亮 */
        #article table tr:hover td {
            background-color: #ececec;
        }

        /* 更紧凑的响应式调整 */
        @media (max-width: 600px) {
            #article table th,
            #article table td {
                padding: 0.25em 0.4em;
                font-size: 0.8rem;
            }
        }

        .pre {
            background-color: antiquewhite;
            border-radius: 4px;
        }

        /* 保证每个图都有左右和上下间隙 */
        #article a[data-pswp-width] {
            display: inline-block; /* 让 margin 生效 */
        }

        /* 如果有 img 没包 <a> 的，也同样 */
        #article_content img {
            display: inline-block;
            margin: 0.5rem;
            max-width: 100%;
            height: auto;
        }

        /* 去除一切过渡，避免闪动 */
        #article_content img,
        #article a img {
            transition: none !important;
        }

        #article_content {
            font-weight: 500;
        }
    </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="/" class="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">
                <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="/" class="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>
    </div>
</div>
<div class="ui grid stackable container">
    <div class="row" id="article">
        <div style="padding-left: 3rem;padding-right: 3rem" class="eleven wide column">
            <h1 class="ui large header">
                <div class="content">{{ article.title }}</div>
            </h1>
            <div class="ui comments" style="margin-top: 0">
                <div class="comment">
                    <a class="avatar">
                        <img src="/user_avatar/{{ article.user_id }}">
                    </a>
                    <div class="content">
                        <a class="author">{{ article.user__first_name }}{{ article.user__last_name }}</a>
                        <div class="metadata">
                            <div class="date">发布于: {{ article.created_time|days_until }}</div> {% if is_login %}
                            <a style="font-style: italic; color: #0d6678" target="_blank"
                               href="/management/article/to_edit/{{ article.id }}">编辑</a>
                        {% endif %}
                        </div>
                        <div class="text">hava a nice day.</div>
                    </div>
                </div>
            </div>

            <div id="article_content">
                {% autoescape off %}
                    {{ article.html_text }}
                {% endautoescape %}
            </div>
            <h3 class="ui dividing header" style="margin-top: 10vh">评论</h3>
            <div class="ui comments">
                {% if comments|length <= 0 %}
                    <p style="text-align: center;font-style: italic">还没有评论</p>
                {% endif %}

                {% for comment in comments %}
                    <div class="comment">
                        <a class="avatar">
                            <img src="{{ comment.avatar | get_avatar }}">
                        </a>
                        <div class="content">
                            <a target="_blank" href="{{ comment.website }}" class="author">{{ comment.nick_name }}</a>
                            <div class="text">{{ comment.comment }}</div>
                            <div class="actions">
                                <a href="mailto:{{ comment.email }}"> <i class="mail icon"></i>联系他</a>
                                <a>
                                    <i class="time icon"></i>
                                    {{ comment.created_time | days_until }}
                                </a>
                            </div>
                        </div>
                    </div>

                {% endfor %}

            </div>

            <form method="post" action="/comment/add" id="comment_form" style="margin-top: 10px"
                  class="ui form">
                {% csrf_token %}
                <input hidden="hidden" name="article_id" value="{{ article.id }}">
                <input hidden="hidden" name="article_title" value="{{ article.title }}">
                <h4 class="ui dividing header">发表评论</h4>
                <input id="veryCode" type="text" name="veryCode" hidden="hidden">
                <div class="field">
                    <div class="two fields">
                        <div class="field">
                            <label>昵称<span style="color: red">*</span></label>
                            <input id="nick_name" type="text" name="nick_name" placeholder="昵称">
                        </div>
                        <div class="field">
                            <label>Email<span style="color: red">*</span></label>
                            <input id="email" type="email" name="email" placeholder="Email">
                        </div>
                    </div>
                </div>
                <div class="field">
                    <div class="two fields">
                        <div class="twelve wide field">
                            <label>网站(可不填)</label>
                            <input id="website" type="url" name="website" placeholder="网站">
                        </div>
                        <div class="four wide field">
                            <label>头像<span style="color: red">*</span></label>
                            <div class="ui fluid selection dropdown">
                                <input value="jenny" type="hidden" name="avatar">
                                <i class="dropdown icon"></i>
                                <div class="default text">
                                    Jenny Hess
                                </div>
                                <div class="menu">
                                    <div class="item" data-value="jenny">
                                        <img class="ui mini avatar image"
                                             src="https://semantic-ui.com/images/avatar/small/jenny.jpg">
                                        Jenny Hess
                                    </div>
                                    <div class="item" data-value="elliot">
                                        <img class="ui mini avatar image"
                                             src="https://semantic-ui.com/images/avatar/small/elliot.jpg">
                                        Elliot Fu
                                    </div>
                                    <div class="item" data-value="stevie">
                                        <img class="ui mini avatar image"
                                             src="https://semantic-ui.com/images/avatar/small/stevie.jpg">
                                        Stevie Feliciano
                                    </div>
                                    <div class="item" data-value="christian">
                                        <img class="ui mini avatar image"
                                             src="https://semantic-ui.com/images/avatar/small/christian.jpg">
                                        Christian
                                    </div>
                                    <div class="item" data-value="matt">
                                        <img class="ui mini avatar image"
                                             src="https://semantic-ui.com/images/avatar/small/matt.jpg">
                                        Matt
                                    </div>
                                    <div class="item" data-value="justen">
                                        <img class="ui mini avatar image"
                                             src="https://semantic-ui.com/images/avatar/small/justen.jpg">
                                        Justen Kitsune
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <textarea name="comment" placeholder="评论"></textarea>
                </div>
                <div style="color: red">{{ msg }}</div>
                <button class="ui blue labeled submit icon button">
                    <i class="icon edit"></i> 提交
                </button>
            </form>

            <div class="ui hidden divider"></div>
        </div>
        <div class="four wide right floated column">
            <h4 class="ui header">搜索</h4>
            <div id="search" class="ui category search">
                <div class="ui icon input">
                    <input class="prompt" type="text" placeholder="搜索">
                    <i class="search icon"></i>
                </div>
            </div>

            <h4 class="ui header">归档</h4>
            <div class="ui list">
                {% for record in records %}
                    <a class="item" href="/date/{{ record.datetime }}?page=1">{{ record.datetime }}
                        ({{ record.count }})</a>
                {% endfor %}
            </div>

            <h4 class="ui header">Top</h4>
            <div class="ui list">
                {% for tag in tags %}
                    <a class="item" href="/tag/{{ tag.name }}?page=1">{{ tag.name }} ({{ tag.count }})</a>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
<div class="ui mini test modal">
    <div class="header">
        请输入验证码
    </div>
    <div class="content">
        <p id="veryCodeSet"></p>
        <div class="ui input">
            <input id="veryCodeInput" type="text" placeholder="请输入验证码">
        </div>
    </div>
    <div class="actions">
        <a onclick="submitComment()" id="confirmBtn" class="ui positive right labeled icon button">
            确认
            <i class="checkmark icon"></i>
        </a>
    </div>
</div>

<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 src="{% static 'highlightjs/highlight.min.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>
    restoreComment()

    function restoreComment() {
        if (localStorage.getItem('nick_name') !== undefined && localStorage.getItem('nick_name') !== '') {
            $("#nick_name").val(localStorage.getItem('nick_name'))
        }
        if (localStorage.getItem('email') !== undefined && localStorage.getItem('email') !== '') {
            $("#email").val(localStorage.getItem('email'))
        }
        if (localStorage.getItem('website') !== undefined && localStorage.getItem('website') !== '') {
            $("#website").val(localStorage.getItem('website'))
        }
    }

    function submitComment() {
        var veryCodeInput = $("#veryCodeInput").val()
        $("#veryCode").attr("value", veryCodeInput)
        document.getElementById("comment_form").submit()
    }


    document.getElementById("comment_form").addEventListener("submit", function (event) {
        event.preventDefault(); // 阻止表单提交
        // 表单验证逻辑
        var veryCode = $('#veryCode').val()
        if (veryCode === undefined || veryCode === '') {
            getVeryCode()
            return
        }
        var data = $('#comment_form').serializeArray();

        localStorage.setItem('nick_name', $('#nick_name').val())
        localStorage.setItem('email', $('#email').val())
        localStorage.setItem('website', $('#website').val())
        return true
        // 其他处理逻辑
    });

</script>
<script>

    function getVeryCode() {
        $.ajax('/comment/getVeryCode', {
            method: 'get',
            contentType: false,
            processData: false,
            success: function (res) {
                $('.mini.modal').modal('show')
                $("#veryCodeSet").html("请输入数字: " + res.data)
            },
            error: function (err) {
            }
        })
    }

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

        $(".ui.dropdown").dropdown();
    });

    function getClass(width) {
        if (width > 35 && width < 150) {
            return 'ui small rounded image'
        } else if (width > 150 && width < 800) {
            return 'ui medium rounded image'
        } else if (width > 800) {
            return 'ui fluid rounded image'
        }
    }

    $(function () {
        // 选中你文章区里的所有图片
        $('#article_content img').each(function () {
            const $img = $(this);
            const src = $img.attr('src');
            const alt = $img.attr('alt') || '';
            // 如果 alt 是 “宽,高” 格式
            let w, h;
            if (/,/.test(alt)) {
                [w, h] = alt.split(',').map(x => x.trim());
                // 在 img 外包一层 <a>
                $img.wrap(`
        <a
          href="${src}"
          data-pswp-width="${w}"
          data-pswp-height="${h}"
        ></a>
      `);
                // 再给 img 补属性
                $img
                    .css('display', 'inline-block')
                    .addClass(getClass(w))      // 你原来的那段 class 逻辑
                    .attr({
                        width: w,
                        height: h,
                        'data-magnify': 'gallery',
                        'data-src': src,
                        'data-href': src
                    });
            } else {
                // 没有 alt，就只加个样式，不包 a
                $img
                    .css('display', 'inline-block')
                    .addClass('ui fluid rounded image');
            }
        });

        // 然后初始化 PhotoSwipeLightbox，gallery 指向包了 a 的容器
        const lightbox = new PhotoSwipeLightbox({
            gallery: '#article',           // 或者 'p' 也行，但 #article 更保险
            children: 'a[data-pswp-width]',// 只选那些有宽高 data 的 a
            pswpModule: PhotoSwipe
        });
        lightbox.init();
    });


</script>

<script>
    hljs.initHighlightingOnLoad();
</script>
</body>
</html>