윅슨 블로그 수정사항 업데이트 완료. - 페이지네이션 기능은 추후 어떤식으로 보여질거냐에 따라 추가해야함.

This commit is contained in:
haesung lee
2023-08-21 17:44:35 +09:00
parent 19359fa961
commit bb044c4a39
13 changed files with 514 additions and 157 deletions

View File

@@ -3,90 +3,61 @@
<head>
<title>Blog</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.16/css/uikit.min.css"/>
<style>
a:link {
color: inherit;
text-decoration: none;
}
a:visited {
color: inherit;
text-decoration: none;
}
a:hover {
color: inherit;
text-decoration: underline;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
<link rel="stylesheet" href="/static/css/style.css"/>
<!-- include libraries(jQuery, bootstrap) -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.16/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.16/js/uikit-icons.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<div class="wixon__wrap">
<header>
<div class="header__inner">
<h1><a href="/"><img src="/static/images/logo.png" alt="WIXON" /></a></h1>
<div class="nav__div">
<span class="nav__title">WXNNER BLOG</span>
<span class="uk-icon" uk-icon="icon: menu"></span>
</div>
<ul class="login__section">
{% if g.is_login %}
<li>
<a class="user__nav__open" href="#">{{ g.user_info.mb_name }} <span class="uk-icon" uk-icon="icon: triangle-down"></span></a>
<div class="login_nav">
<ul>
<li class="uk-active"><a href="/write">포스트 작성</a></li>
<li class="uk-active"><a target="_blank" href="http://www.wixon.co.kr/backS1te">관리자 페이지</a></li>
<li class="uk-active"><a href="/logout">로그아웃</a></li>
</ul>
</div>
</li>
{% else %}
<li><a href="/login">로그인</a></li>
{% endif %}
</ul>
</div>
</header>
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="/">
<img src="http://webmail.wixon.co.kr/user_img/logoImage.jpeg" alt="">
</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
{% if g.is_login %}
<li>
<a href="#">{{ g.user_info.mb_name }} <span class="uk-icon"
uk-icon="icon: triangle-down"></span></a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="/write">포스트 작성</a></li>
<li class="uk-active"><a target="_blank" href="http://www.wixon.co.kr/backS1te">관리자 페이지</a></li>
<li class="uk-active"><a href="/logout">로그아웃</a></li>
</ul>
</div>
</li>
{% else %}
<li><a href="/login">로그인</a></li>
{% endif %}
</ul>
</div>
</nav>
{% block content %}{% endblock %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.16/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.16/js/uikit-icons.min.js"></script>
</body>
</html>
{% block content %}{% endblock %}
<script>
$(document).ready(function(){
// 로그인 메뉴 활성화
let check_state = 0;
$(".login__section .user__nav__open").click(function(){
if(check_state != 0){
$(this).find("span").attr("uk-icon","icon: triangle-down");
check_state = 0;
}else{
$(this).find("span").attr("uk-icon","icon: triangle-up");
check_state = 1;
}
$(".login_nav").toggle(300);
});
})
</script>

View File

@@ -1,37 +1,140 @@
{% extends 'base.html' %}
{% block content %}
<style>
.blog-card {
margin: 10px;
}
{% extends 'base.html' %}
.blog-card img {
width: 100%;
height: auto;
}
</style>
<div class="uk-container">
<div class="uk-grid uk-grid-small uk-child-width-1-4@m uk-child-width-1-2@s" uk-grid>
{% if not posts %}
<h4 style="margin-top: 30px">작성된 포스트가 없습니다.</h4>
{% else %}
{% for post in posts %}
<div>
<div class="uk-card uk-card-default blog-card">
<div class="uk-card-media-top">
<img src="{{ post.thumbnail_img | default('https://via.placeholder.com/300x200', true) }}"
alt="{{ post.title }}" style="max-width: 100%;max-height: 500px;">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">{{ post.title }}</h3>
<a href="{{ url_for('post', post_id=post.id) }}" class="uk-button uk-button-text">Read
more</a>
{% block content %}
<div class="container">
<div class="content">
{% if not posts %}
<h4 style="margin-top: 100px">작성된 포스트가 없습니다.</h4>
{% else %}
<div class="content__inner">
<ul class="post__lists post__lists0">
</ul>
<ul class="post__lists post__lists1">
</ul>
<div class="new__div">
<ul class="post__lists post__lists2">
</ul>
<div class="new__post__div">
<h2>최근 포스트</h2>
<ul class="new__posts">
{% for post in posts %}
<li>
<a href="{{ url_for('post', post_id=post.id) }}">
<div class="new__desc">
<p class="new__category">{{ post.category }}</p>
<h3 class="new__title">{{ post.title }}</h3>
<p class="new__date">
<b>{{ (post.add_date).strftime("%b %d") }}</b> / {{ (post.add_date).strftime("%Y") }}
</p>
</div>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<ul class="fake__lists">
{% for r_post in random_posts %}
<li>
<a href="{{ url_for('post', post_id=r_post.id) }}">
<div class="lists__img">
<img src="{{ r_post.thumbnail_img | default('https://via.placeholder.com/300x200', true) }}" alt="{{ r_post.title }}" />
</div>
<div class="lists__desc">
<p class="lists__category">{{ r_post.category }}</p>
<h3 class="lists__title">{{ r_post.title }}</h3>
<p class="lists__content">
컨텐츠 내용 내용 내용 내용 내용 집어넣을곳 testtest 블라블라블라 ~~~ 어쩌고 저쩌고 컨텐츠 내용 내용 내용 내용 내용 집어넣을곳 testtest 블라블라블라 ~~~ 어쩌고 저쩌고 컨텐츠 내용 내용 내용 내용 내용 집어넣을곳 testtest 블라블라블라 ~~~ 어쩌고 저쩌고
</p>
{# <p class="lists__content">{{ r_post.contents | safe }}</p> #}
<p class="lists__date">
<b>{{ (r_post.add_date).strftime("%b %d") }}</b> / {{ (r_post.add_date).strftime("%Y") }}
</p>
</div>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
<footer>
<div class="footer__inner">
<div class="footer__info">
<p class="footer__tel">
TEL 02-3141-1305 / 1306 E-mail cser@wixon.co.kr / 기업부설연구소 제 2021154317호
</p>
<address>
서울시 마포구 동교로 215-1 한사 스튜디오 406 (주)윅슨어소시에이츠 / #406 , HANSA Studio, 215-1, Donggyo-ro, Mapo-gu, Seoul, Korea
</address>
<p class="copywriter">
&copy; wixon associates Inc. 2022
</p>
<p class="slogan">
wixon. Who Invariable eXistence On the New era " wixon associates Inc. "
</p>
<ul>
<li><a href="/"><img src="/static/images/opusclam.png" alt="WIXON" /></a></li>
<li><a href="/"><img src="/static/images/lpstock.png" alt="WIXON" /></a></li>
</ul>
</div>
{% endfor %}
{% endif %}
<h2 class="footer__logo">
<a href="/"><img src="/static/images/logo.png" alt="WIXON" /></a>
</h2>
</div>
</footer>
<script>
moment.locale('en');
console.log(moment().format('ll'));
$(document).ready(function() {
const count__lists = $(".fake__lists li").length;
if (count__lists < 4) {
for (let i = 0; i < count__lists; i++) {
let n_1 = i % 3;
switch (n_1) {
case 1.:
$(".post__lists0").append($(".fake__lists li:first-child"));
break;
case 2:
$(".post__lists1").append($(".fake__lists li:first-child"));
break;
case 0:
$(".post__lists2").append($(".fake__lists li:first-child"));
break;
}
}
}else if(count__lists>3 && count__lists<7){
$(".post__lists2").append($(".fake__lists li:first-child"));
for (let i = 0; i < count__lists-1; i++) {
let n_1 = i % 2;
switch (n_1) {
case 0:
$(".post__lists0").append($(".fake__lists li:first-child"));
break;
case 1:
$(".post__lists1").append($(".fake__lists li:first-child"));
break;
}
}
}else{
for(let i=0;i<6;i++){
let n_1 = i % 2;
switch(n_1){
case 0:$(".post__lists0").append($(".fake__lists li:first-child"));
break;
case 1:$(".post__lists1").append($(".fake__lists li:first-child"));
break;
}
}
$(".post__lists2").append($(".fake__lists li:first-child"));
}
$(".fake__lists").html("");
})
</script>
{% endblock %}
</div>
</div>
{% endblock %}
</body>
</html>

View File

@@ -1,57 +1,95 @@
{% extends 'base.html' %}
{% block content %}
<div class="uk-container" style="margin-top: 30px">
<div class="uk-card uk-card-default uk-margin" style="padding: 10px 30px">
<div class="uk-card-body" style="padding: 10px 30px">
{% if g.is_login and (g.user_info.mb_id == post.mb_id or g.user_info.mb_id in ['admin', 'wixon']) %}
<div style="float: right;color: white">
<a href="{{ url_for('edit_post', post_id=post.id) }}" class="uk-button uk-button-primary">수정</a>
<a class="uk-button uk-button-danger" href="javascript:blogDelete('{{ post.id }}');">삭제</a>
<div class="container__post">
<div class="content">
<div class="content__info">
<p class="content__category">{{ post.category }}</p>
<div class="title__div">
<h3 class="content__title">{{ post.title }}</h3>
<p class="content__date"><span>{{ post.mb_id }}</span> {{ post.add_date }}</p>
</div>
<div class="content__desc">
{{ post.contents | safe }}
</div>
</div>
<div class="etc__list">
<div class="other__list">
<ul>
{% if prev_post is not none %}
<li>
<p class="other__list__way">이전</p>
<p class="other__list__title">
<a href="{{ url_for('post', post_id=prev_post.id) }}">{{ prev_post.title }}</a>
</p>
<p class="other__list__date">
<span>{{ prev_post.mb_id }}</span> {{ prev_post.add_date }}
</p>
</li>
{% else %}
<li>
<p class="other__list__way">이전</p>
<p class="other__list__title">
이전 글이 없습니다.
</p>
</li>
{% endif %}
{% if next_post is not none %}
<li>
<p class="other__list__way">다음</p>
<p class="other__list__title">
<a href="{{ url_for('post', post_id=next_post.id) }}">{{ next_post.title }}</a>
</p>
<p class="other__list__date">
<span>{{ next_post.mb_id }}</span> {{ next_post.add_date }}
</p>
</li>
{% else %}
<li>
<p class="other__list__way">다음</p>
<p class="other__list__title">
다음 글이 없습니다.
</p>
</li>
{% endif %}
</ul>
</div>
<div class="btn__area">
{% if g.is_login and (g.user_info.mb_id == post.mb_id or g.user_info.mb_id in ['admin', 'wixon']) %}
<a href="{{ url_for('edit_post', post_id=post.id) }}" class="btn__edit">수정</a>
<a class="btn__delete" href="javascript:blogDelete('{{ post.id }}');">삭제</a>
{% endif %}
<a href="{{ url_for('index') }}" class="btn__lists">목록</a>
</div>
{% endif %}
<h3 class="uk-card-title">[{{ post.category }}] {{ post.title }}</h3>
<p class="uk-text-meta" style="float: right">Posted on {{ post.add_date }}</p>
<div style="width: 100%;border-top: 1px solid #eee;padding: 15px">
{{ post.contents | safe }}
</div>
</div>
</div>
<div class="uk-card uk-card-default uk-margin custom-table">
<div class="uk-card-body" style="padding: 0px">
<table class="uk-table uk-table-divider">
<tbody>
{% if prev_post is not none %}
<tr>
<td style="width: 80px;text-align: center;padding: 8px 6px;">이전</td>
<td style="padding: 8px 6px;">
<a href="{{ url_for('post', post_id=prev_post.id) }}">{{ prev_post.title }}</a>
</td>
</tr>
{% endif %}
{% if next_post is not none %}
<tr>
<td style="width: 80px;text-align: center;padding: 8px 6px;">다음</td>
<td style="padding: 8px 6px;">
<a href="{{ url_for('post', post_id=next_post.id) }}">
<div style="width: 100%">
{{ next_post.title }}
</div>
</a>
</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
<div style="text-align: right;padding: 15px;">
<a href="{{ url_for('index') }}" class="uk-button uk-button-default">목록</a>
</div>
</div>
<footer>
<div class="footer__inner">
<div class="footer__info">
<p class="footer__tel">
TEL 02-3141-1305 / 1306 E-mail cser@wixon.co.kr / 기업부설연구소 제 2021154317호
</p>
<address>
서울시 마포구 동교로 215-1 한사 스튜디오 406 (주)윅슨어소시에이츠 / #406 , HANSA Studio, 215-1, Donggyo-ro, Mapo-gu, Seoul, Korea
</address>
<p class="copywriter">
&copy; wixon associates Inc. 2022
</p>
<p class="slogan">
wixon. Who Invariable eXistence On the New era " wixon associates Inc. "
</p>
<ul>
<li><a href="/"><img src="/static/images/opusclam.png" alt="WIXON" /></a></li>
<li><a href="/"><img src="/static/images/lpstock.png" alt="WIXON" /></a></li>
</ul>
</div>
<h2 class="footer__logo">
<a href="/"><img src="/static/images/logo.png" alt="WIXON" /></a>
</h2>
</div>
</footer>
</div>
<script>
function blogDelete(id) {
Swal.fire({
@@ -87,6 +125,14 @@
}
});
}
$(document).ready(function(){
var cheack_li = $(".other__list li").length;
if(cheack_li>1){
$(".other__list li:first-child").css("borderBottom","1px solid #d2d2d2");
}
})
</script>
{% endblock %}
</body>
</html>