{% 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 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 {
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 %}
<h3 class="ui dividing header" style="margin-top: 10vh">评论</h3>
<div class="ui comments">
{% 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 }}
</a>
</div>
</div>
</div>
{% endfor %}
</div>
<form onsubmit="save()" 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 }}">
<h4 class="ui dividing header">发表评论</h4>
<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>
<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 save() {
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>
$(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 < 800) {
return 'ui medium rounded image'
} else if (width > 800) {
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 style="display: inline-block;" 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 style="display: inline-block;" class="ui fluid rounded image" src="${src}" />`)
}
}
var lightbox = new PhotoSwipeLightbox({
gallery: 'p',
children: 'a[data-pswp-width]',
// dynamic import is not supported in UMD version
pswpModule: PhotoSwipe
});
lightbox.init();
</script>
<script>
hljs.initHighlightingOnLoad();
</script>
</body>
</html>