first push

This commit is contained in:
javamon117
2023-08-02 17:10:20 +09:00
parent 8811542e94
commit 52b7c9e7f0
14 changed files with 414 additions and 0 deletions

75
templates/base.html Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.16/css/uikit.min.css"/>
<style>
.blog-card {
width: 300px;
margin: 10px;
}
.blog-card img {
width: 100%;
height: auto;
}
.grid-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
</style>
<!-- include libraries(jQuery, bootstrap) -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.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://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
</head>
<body>
<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>
<li><a href="/">목록</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 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>

32
templates/index.html Normal file
View File

@@ -0,0 +1,32 @@
{% extends 'base.html' %}
{% block content %}
<div class="uk-container">
<div class="grid-container masonry-grid">
{% for post in posts %}
<div class="blog-card uk-card uk-card-default">
<div class="uk-card-media-top">
<img src="{{ post.thumbnail_img }}" alt="{{ post.title }}">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">{{ post.title }}</h3>
<!-- Truncate the contents to 100 characters, removing any HTML tags -->
<p>{{ post.contents | striptags | truncate(100) }}</p>
<a href="#" class="uk-button uk-button-text">Read more</a>
</div>
</div>
{% endfor %}
</div>
</div>
<script>
$(document).ready(function () {
$('.masonry-grid').masonry({
// options...
itemSelector: '.blog-card',
columnWidth: '.blog-card',
percentPosition: true
});
});
</script>
{% endblock %}

32
templates/login.html Normal file
View File

@@ -0,0 +1,32 @@
{% extends 'base.html' %}
{% block content %}
<div class="uk-container uk-margin-top">
<h1 class="uk-text-center"><span>윅슨 블로그 로그인</span></h1>
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
{{ messages[0] }}
</div>
{% endif %}
{% endwith %}
<form class="uk-form-stacked" action="{{ url_for('login') }}" method="post">
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Username</label>
<div class="uk-form-controls">
<input class="uk-input" id="form-stacked-text" type="text" placeholder="Username..." name="username">
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Password</label>
<div class="uk-form-controls">
<input class="uk-input" id="form-stacked-text" type="password" placeholder="Password..." name="password">
</div>
</div>
<div class="uk-margin">
<button class="uk-button uk-button-default">Log In</button>
</div>
</form>
</div>
{% endblock %}

65
templates/write.html Normal file
View File

@@ -0,0 +1,65 @@
{% extends 'base.html' %}
{% block content %}
<div class="uk-container uk-margin-top">
<h1 class="uk-text-center"><span>포스트 작성</span></h1>
<form action="/write" method="post" class="uk-form-stacked">
<div class="uk-margin">
<label class="uk-form-label" for="title">제목</label>
<div class="uk-form-controls">
<input class="uk-input" id="title" type="text" name="title" placeholder="제목을 입력하세요..." required>
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="category">카테고리</label>
<div class="uk-form-controls">
<select class="uk-select" id="category" name="category" required>
<option value="">카테고리를 선택하세요...</option>
<option value="IT">IT</option>
<option value="NEWS">NEWS</option>
<option value="ETC">ETC</option>
</select>
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="contents">내용</label>
<div class="uk-form-controls">
<textarea class="summernote" id="contents" name="contents" required></textarea>
</div>
</div>
<div class="uk-margin">
<button type="submit" class="uk-button uk-button-default">글 작성</button>
</div>
</form>
</div>
<script>
$(document).ready(function () {
$('.summernote').summernote({
height: 300,
callbacks: {
onImageUpload: function (files) {
var $editor = $(this);
var data = new FormData();
data.append("file", files[0]);
$.ajax({
url: "/upload_image",
method: "POST",
data: data,
processData: false,
contentType: false,
success: function (response) {
if (response.success) {
var imageUrl = response.fileUrl;
$editor.summernote("insertImage", imageUrl);
} else {
alert(response.message);
}
}
});
}
}
});
});
</script>
{% endblock %}