ComDoc ComDoc

소스 : https://github.com/pycrawling/SimpleDjangoBBS 부츠워치라는 사이트에서 디자인을 고르자... https://bootswatch.com CDN 서비스도 있다... ㄷㄷㄷ @,.@ https://www.jsdelivr.com/package/npm/bootswatch?path=dist 사용법은 단순하다. templates/base.html 에서 'Bootstrap CSS'의 링크를 지워주고 bootswatch에서 수정한 CSS를 대신 설정해 주면 된다. 주소에서 'lux'가 템플릿 이름이다. 이름을 바꿔가면서 템플릿을 감상할 수 있다. slate 취향에 맞게 약간의 모디파이를 하는 것도 좋을 것 같다. 간단하게 style문으로 예를 만들어 보았다. 물론 CSS로 작업..

별 내용은 없고... 하는 김에... https://github.com/pycrawling/betterSimpleDjangoBBS {% extends 'base.html' %} {% block title %}Sign up{% endblock %} {% block content %} Sign up {% csrf_token %} {{ form.as_table }} Sign Up {% endblock %} {% extends 'base.html' %} {% block title %}Password reset complete{% endblock %} {% block content %} Password reset complete Your new password has been set. You can log in ..

{% extends 'base.html' %} {% block title %}Log In{% endblock %} {% block content %} Log In {% csrf_token %} {{ form.as_table }} Log In Password Reset {% endblock %}

특별한 것은 없다. {% extends 'base.html' %} {% block title %}삭제 - {{object.title}}{% endblock %} {% block content %} 다음 글을 삭제할까요? {{object.title}} by {{object.author}} created at {{object.created_at|date:'Y-m-d, H:i'}} modified at {{object.modified_at|date:'Y-m-d, H:i'}} {%csrf_token%} {% endblock %}

style을 이용했다. {% extends 'base.html' %} {% block title %}write{% endblock %} {% block content %} {% csrf_token %} {{ form.as_p }} {% endblock %} base.html의 head 부분에 style 블럭을 만들었으면 깔끔했을 텐데.. 이렇게 style문을 쓰게 되는 상황을 미리 생각하지 못했다.

카드를 이용했다. https://getbootstrap.com/docs/5.0/components/card/ {% extends 'base.html' %} {% block title %}{{object.title}}{% endblock %} {% block content %} {{object.title}} by {{object.author}} created at {{object.created_at|date:'Y-m-d, H:i'}} modified at {{object.modified_at|date:'Y-m-d, H:i'}} {{object.content}} modify delete list {% endblock %}

일단 위가 상당히 허전하다. nav 바를 만들고, 그 아래 로그인 부분을 가져오자. navbar 부트스트랩의 네비게이션 바를 참고하자. https://getbootstrap.com/docs/5.0/components/navbar/ Simple Django BBS nav바의 컬러는 이런 식으로 조절한다. https://getbootstrap.com/docs/5.0/components/navbar/#color-schemes log in 로그인 부분은 사이에 넣어두자. {% if user.is_authenticated %} Hi '{{ user.username }}'! Log Out / Password Change {% else %} You are not logged in. Log In or Sign Up {..

첫 화면을 테이블로 수정하는 것이 좋을 것 같다. 테이블 수정한 테이블 부분의 코드이다. {% if object_list %} id title writer created {% for each in object_list %} {{each.id}} {{ each.title }} {{each.author}} {{each.created_at|date:'Y-m-d, H:i'}} {% endfor %} {% else %} an empty list {% endif %} 전 보단 찔끔 좋아졌다. 시간이 있으면 부트스트랩의 테이블 파트를 읽어 보자. https://getbootstrap.com/docs/5.0/content/tables/ 페이지네이션 수정 후의 코드이다. 심플한 페이지네이션도 주석처리해서 넣어두었다. {..