gnuboard / g6

파이썬 게시판 그누보드6 : GNUBOARD6 is Python CMS with fastapi
https://sir.kr
MIT License
252 stars 84 forks source link

latest 의 style 또는 script 를 base.html 의 head 에 넣을 수 있는 방법? #223

Open kagla opened 8 months ago

kagla commented 8 months ago

templates/taeho/latest/main_list.html 에 선언된

<style type="text/css" media="screen and (max-width:1200px)">
  .main_bn {border-radius: 0px;}
 </style> 

<style type="text/css" media="screen and (max-width:1000px)">
 .main-slider .slick-dots {max-width: 200px;}
 </style> 

<style type="text/css" media="screen and (max-width:800px)">
  .main-slider .slick-dots {visibility: hidden;}
  .main-slider .slide-item > .slide-con > .slide-txt {width: 90%;}
 </style> 

위 코드를 base.html 의

<head>
...
</head>

사이에 넣을 수 있을까요?

Junanjunan commented 8 months ago

해당하는 style 태그 부분들만 따로 html file로 뽑아서 taeho/latest/main_list.html이랑 base.html의 head tag 안에 각각 {% include %} 로 넣는건 어떨까요?

KimTom89 commented 8 months ago

최신글을 불러오는 방식들 (함수, include, import (macro))은 독립적인 실행방식이기 때문에 상위 블럭에 접근할 수 없습니다. 그러므로 main_list.html에서 직접 태그에 style태그를 넣을 수는 없습니다.

render되는 파일에서는 직접 style태그를 사용하는 것을 지양하고 css파일로 적용하는 것을 권장해야 할거 같습니다.

index.html


{% extends "base.html" %}

<!-- 여기에서 하위 렌더링 파일의 css를 추가한다.  -->
{% block head %}
    <link rel="stylesheet" href="{{ theme_asset('css/main_list.css') }}">
    <link rel="stylesheet" href="{{ theme_asset('css/pic_list.css') }}">
    <link rel="stylesheet" href="{{ theme_asset('css/pic_block.css') }}">
    <link rel="stylesheet" href="{{ theme_asset('css/basic.css') }}">
{% endblock head %}

{% block title %}{{ request.state.title }}{% endblock title %}

{% block content %}
    <h2 class="sound_only">최신글</h2>
    <div class="latest_top_wr">
      {{ render_latest_posts(request, 'main_list', 'notice', 4, 23)|safe }}
  </div>
....
kagla commented 8 months ago

최신글을 불러오는 방식들 (함수, include, import (macro))은 독립적인 실행방식이기 때문에 상위 블럭에 접근할 수 없습니다. 그러므로 main_list.html에서 직접 태그에 style태그를 넣을 수는 없습니다.

render되는 파일에서는 직접 style태그를 사용하는 것을 지양하고 css파일로 적용하는 것을 권장해야 할거 같습니다.

index.html

{% extends "base.html" %}

<!-- 여기에서 하위 렌더링 파일의 css를 추가한다.  -->
{% block head %}
    <link rel="stylesheet" href="{{ theme_asset('css/main_list.css') }}">
    <link rel="stylesheet" href="{{ theme_asset('css/pic_list.css') }}">
    <link rel="stylesheet" href="{{ theme_asset('css/pic_block.css') }}">
    <link rel="stylesheet" href="{{ theme_asset('css/basic.css') }}">
{% endblock head %}

{% block title %}{{ request.state.title }}{% endblock title %}

{% block content %}
    <h2 class="sound_only">최신글</h2>
    <div class="latest_top_wr">
      {{ render_latest_posts(request, 'main_list', 'notice', 4, 23)|safe }}
  </div>
....

고정된 css 파일은 이런 방식도 좋은데 추가 되는 css 파일을 읽어 올 수 있는 방법이 필요해요.

kagla commented 8 months ago

해당하는 style 태그 부분들만 따로 html file로 뽑아서 taeho/latest/main_list.html이랑 base.html의 head tag 안에 각각 {% include %} 로 넣는건 어떨까요?

코드로 보여주세요. ^^

Junanjunan commented 8 months ago

@kagla

https://github.com/gnuboard/gnu6/commit/3592eaf931ccffde55b37d4cf2c859ca908c5e9c

예시코드 작성한 커밋 링크입니다

kagla commented 8 months ago

@Junanjunan 괜찮네요. ^^

다음주에 @KimTom89 팀장과 함께 논의합시다.