yangchaojie
/
Blog


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
							{% 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="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="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="shortcut icon" href="{% static 'favicon.ico' %}">

    <style type="text/css">
        blockquote {
            margin: 0;
        }

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

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

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

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


        .pre {
            background-color: antiquewhite;
            border-radius: 4px;
        }
    </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"><img style="width: 7em;" src="{% static '/img.png' %}"/></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"><img style="width: 7em;" src="{% static '/img.png' %}"/></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 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>
                        </div>
                        <div class="text">hava a nice day.</div>
                    </div>
                </div>
            </div>

            {% autoescape off %}
                {{ article.html_text }}
            {% endautoescape %}


            <div class="ui hidden divider"></div>
        </div>
        <div class="four wide right floated column">
            <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 divider"></div>
<footer>
    <div style="text-align: center;height: 40px"><p>@2024 C.J</p></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>
    $(document).ready(function () {
        $(".ui.toggle.button").click(function () {
            $(".mobile.only.grid .ui.vertical.menu").toggle(100);
        });

        $(".ui.dropdown").dropdown();
    });
    let imgs = $('#article').find('p>img')

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

    for (let i = 0; i < imgs.length; i++) {
        if ($(imgs[i]).attr('alt')) {
            let alt = $(imgs[i]).attr('alt')
            let src = $(imgs[i]).attr('src')
            $(imgs[i]).parent().html(`<a data-pswp-width="${alt.split(',')[0]}" data-pswp-height="${alt.split(',')[1]}" href="${src}"><img  class="${getClass(alt.split(',')[0])}" width="${alt.split(',')[0]}" height="${alt.split(',')[1]}" data-magnify="gallery" data-src="${src}"  src="${src}"  data-href="${src}" "/></a>`)
        } else {
            let src = $(imgs[i]).attr('src')
            $(imgs[i]).parent().html(`<img  class="ui fluid rounded image"  src="${src}" />`)
        }
    }
    var lightbox = new PhotoSwipeLightbox({
        gallery: 'p',
        children: 'a',
        // dynamic import is not supported in UMD version
        pswpModule: PhotoSwipe
    });
    lightbox.init();

</script>

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