1. WYSIWYG
WYSIWYG[위지윅]은 What You See Is What You Get의 약자로 텍스트를 작성할 때 Bold, Italic, 글자 크기, color 등을 바꿀 수 있도록 pop-up 형태로 옵션을 제공해주고, text의 style과 관련된 다양한 기능을 제공해주는 라이브러리들을 말한다. 이 강의에서는 medium-editor 라는 라이브러리를 사용한다.
github:
https://github.com/yabwe/medium-editor
홈페이지:
https://yabwe.github.io/medium-editor/
ArticleCreate에 적용
article을 작성할 때 medium-editor가 동작하도록 세팅해본다. 우선 form에서 content 부분에 적용되도록 Articleapp/form.py를 수정한다. forms는 django.forms를 import 해와야하므로 주의하자. class로 기본적으로 'editable'을 선언해주면 된다. 'text-start' class 명을 추가하면 text의 입력이 가장 왼쪽에서 시작하게 해준다. 그리고 height : auto 옵션은 글 문단의 높이에 따라 text input 창의 높이가 자동으로 커지는 옵션이다.
from django import forms
from django.forms import ModelForm
from articleapp.models import Article
class ArticleCreationForm(ModelForm):
content = forms.CharField(widget=forms.Textarea(attrs={'class': 'editable text-start',
'style': 'height: auto;'}))
class Meta:
model = Article
fields = ['title', 'image', 'project', 'content']
link 추가
articleapp/create.html에 홈페이지의 CDN 및 script 태그를 추가한다.
{% extends 'base.html' %}
{% load bootstrap4 %}
{% block content %}
{# Medium Editor 홈페이지 CDN 코드 #}
<script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
{# #}
{# ... 중략 ... #}
{# Medium Editor 홈페이지 Usage Script 코드(MediumEditor 선언) #}
<script>var editor = new MediumEditor('.editable');</script>
{# #}
{% endblock %}
detail, update 화면 수정
detail 화면에는 WYSIWIG가 적용되어 있지 않아서, HTML 태그를 포함해서 출력된다. 이 부분은 detail.html 에서 | safe 구문을 추가해주면 된다.
<p>
{{ target_article.content | safe }}
</p>
update에도 적용될 수 있도록 update.html에도 <script> 코드들을 추가한다.
2. 프로젝트 다듬기
마지막으로 프로젝트에서 미진했던 부분들만 조금 수정한다.
Article Create : Project 미설정 가능
article을 만들 때, project를 설정하지 않아도 되도록 수정한다. 기존에는 project를 선택하지 않으면 '파일을 선택하세요' 라는 구문이 떴다.
이것은 기본적으로 article의 FK 값으로 project가 들어가도록 model에서 설정해줬기 때문이다.
project = models.ForeignKey(Project, on_delete=models.SET_NULL, related_name='article', null=True)
그러나 null=True로 줬으므로 굳이 선택하지 않아도 되는데, form 에서 인식하지 못하는 거라, forms.py에 ModelChoiceField를 적용해주면 된다. queryset=Project.objects.all()을 해주면 Project에 NULL인 값도 입력이 가능해진다.
project = forms.ModelChoiceField(queryset=Project.objects.all())
프로젝트 번호 : 이름 나오게 하기 - __str__
프로젝트 선택 시, 프로젝트의 번호나 이름이 나오는 것이 아니라 form에서 기본적으로 제공하는 Project object라는 이름으로만 나왔다. 이를 수정한다.
__str__를 Project Model에서 오버라이드하면 된다!
class Project(models.Model):
title = models.CharField(max_length=20, null=False)
description = models.TextField(null=True)
image = models.ImageField(upload_to='project/', null=False)
created_at = models.DateTimeField(auto_now=True)
def __str__(self):
return f'{self.pk} : {self.title}'
Homepage 설정
기본 주소로 접근 시 404 error가 아니라 articles/list가 뜨도록 home으로 가는 url을 매칭해준다.
pragmatic/urls.py
urlpatterns = [
path('', ArticleListView.as_view(), name='home'),
# 중략...
Profile 페이지 수정 : Material Icon 적용
mypage 에서 profile edit, change info, quit 등의 링크를 아이콘으로 변경하여 보기 좋게 만들자.
구글에서 제공하는 Material icons의 홈페이지, github 사이트이다. github 사이트에서 Using font 링크를 받아와서 head.html에 붙여넣는다.
Google Material icons : https://material.io/resources/icons/?style=baseline
Google Material icons Github : https://github.com/google/material-design-icons
{# GOOGLE MATERIAL ICONS #}
<link href="https://fonts.googleapis.com/css2?family=Material+Icons"
rel="stylesheet">
Google Material Icons는 class의 이름을 홈페이지에 나와있는 아이콘들의 이름을 각 태그의 내용으로 적어주면 아이콘으로 바로 바꿔준다! 예를 들어 아래와 같이 <a> 태그 안에 'edit'이라는 글자를 넣고 class='material-icons'라고 해주면 자동으로 'edit'이라는 글자가 적절한 아이콘으로 바뀐다.
<a href="{% url 'profileapp:update' pk=target_user.profile.pk %}"
class="material-icons">
<div>
edit
</div>
</a>
change info, quit 도 google material icons에 맞도록 각각 settings, cancel로 수정 후 style을 적용하여 아이콘으로 변경하자.
참조
1. 작정하고 장고! Django로 Pinterest 따라만들기 : 바닥부터 배포까지-박형석님 인프런 강의
