App-利用Bootstrap4 搭建樣式 · python-網頁到放棄

>[success] # 遇到的小問題 ~~~ 1. os.path.join(os.path.dirname(BASE_DIR), THEME, "static"),目錄拼接調整 2. 在頁面動態引入static 文件{% load static %} 3. <link rel="stylesheet" href="{% static '/css/base.css' %}"> 其中static 等同整個目錄 ~~~ ~~~ THEME = 'themes\default' STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(os.path.dirname(BASE_DIR), THEME, "static"), ] print(os.path.join(os.path.dirname(BASE_DIR), THEME, "static")) ~~~ >[danger] ##### base.css ~~~ body { background-color: #dbe2e9; } /* 頂部欄 */ .fixed-top { position: fixed; right: 0; left: 0; border-width: 0 0 1px; } header { height: 50px; background-color: #3d4450; border-color: #080808; line-height: 50px; } header nav a { color: #fff; padding: 0 1.5rem; } header nav a:hover { color: #fff; text-decoration:none; background-color: #000; } header a.logo { font-size: 1.5rem; padding-left: 0; } header a.logo:hover { background-color: #3d4450; } header .search { margin-top: 5px; } /* 主體部分 */ .main .left-side .inner { background-color: #fff; padding: 30px 10px; } .main .right-side .inner{ background-color: #fff; } nav.category a { margin-top: 20px; margin-right: 20px; } .post-element-nav { padding-top: 0; padding-bottom: 0; color: #428bca; } .post-element-title { font-size: 25px; } .post-element-title a { color: #333; text-decoration:none; border-bottom: 1px solid #ccc; } .post-element-desc { padding: 1rem; } .main { margin-top: 100px; } .main ul { padding-left: 0px; } .post-element article { margin-top: 10px; } .power { margin-top: 30px; } .sidebar li { list-style: none; } .sidebar a { color: #444; } .sidebar-title { height: 30px; background-color: #3d4450; border-color: #080808; line-height: 30px; color: #fff; padding: 0 9px; } .sidebar-content { padding: 0 9px; } ~~~ >[danger] ##### base.html ~~~ {% load static %} <!doctype html> <html lang="en"> <head> <title>醬路油過 blog - by 醬路油過</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> <link rel="stylesheet" href="{% static '/css/base.css' %}"> </head> <body> <header class="fixed-top"> <div class="container"> <div class="row"> <div class="col-9"> <nav class="nav"> <a class="logo" href="/">醬路油過</a> <a class="index" href="/">首頁</a> {% for cate in nav_cates %} <a class="link" href="{% url 'category' cate.id %}">{{ cate.name }}</a> {% endfor %} </nav> </div> <div class="col-3"> <div class="input-group search"> <input type="text" class="form-control" placeholder="Search for..." aria-label="Search for..."> <span class="input-group-btn"> <button class="btn btn-secondary" type="button">Go!</button> </span> </div> </div> </div> </div> </header> <div class="container main"> <div class="row"> <div class="col-9 left-side"> <div class="inner"> {% block content %} {% endblock %} </div> </div> <div class="col-3 right-side"> {% for side in side_bars %} <div class="sidebar sidebar-style"> <div class="sidebar-title">{{ side.title }}</div> <div class="sidebar-content"> {% if side.display_type == 1 %} {% autoescape off %} {{ side.content }} {% endautoescape %} {% elif side.display_type == 2 %} <ul> {% for post in recently_posts %} <li><a href="{% url 'detail' post.id %}">{{ post.title }}</a></li> {% endfor %} </ul> {% elif side.display_type == 4 %} <ul> {% for comment in recently_comments %} <li>{{ comment.content }}</li> {% endfor %} </ul> {% endif %} </div> </div> {% endfor %} </div> </div> </div> <footer class="footer"> <div class="container"> <hr/> <nav class="nav category"> {% for cate in cates %} <a href="{% url 'category' cate.id %}">{{ cate.name }}</a> {% endfor %} </nav> </div> <div class="container power"> <span class="text-muted">Power by 醬路油過@醬路油過</span> </div> </footer> ~~~ >[danger] ##### detail.html ~~~ {% extends "blog/base.html" %} {% block content %} <nav aria-label="breadcrumb" role="navigation"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="/">首頁</a></li> <li class="breadcrumb-item"><a href="{% url 'category' post.category.id %}">{{ post.category.name }}</a></li> <li class="breadcrumb-item active" aria-current="page">正文</li> </ol> </nav> <div class="post-element"> <h3 class="post-element-title"> {{ post.title }} </h3> <div> <nav class="nav"> 分類:<a class="nav-link post-element-nav" href="{% url 'category' post.category_id %}">{{ post.category.name }}</a> 標簽: <a class="nav-link post-element-nav" href="#"> {% for tag in post.tags.all %} {{ tag.name }}{% endfor %} </a> 作者:<a class="nav-link post-element-nav" href="#">{{ post.owner.username }}</a> 創建時間:<a class="nav-link post-element-nav" href="#">{{ post.created_time }}</a> </nav> </div> <article class="content"> {{ post.content }} </article> </div> {% endblock %} ~~~ >[danger] ##### list.html ~~~ {% extends "blog/base.html" %} {% block content %} {% if posts %} {% for post in posts %} <div class="post-element"> <h3 class="post-element-title"> <a href="{% url 'detail' post.id %}">{{ post.title }} </a> </h3> <div> <nav class="nav"> 分類:<a class="nav-link post-element-nav" href="{% url 'category' post.category_id %}">{{ post.category.name }}</a> 標簽: <a class="nav-link post-element-nav" href="#"> {% for tag in post.tags.all %} {{ tag.name }}{% endfor %} </a> 作者:<a class="nav-link post-element-nav" href="#">{{ post.owner.username }}</a> 創建時間:<a class="nav-link post-element-nav" href="#">{{ post.created_time }}</a> </nav> </div> <div class="post-element-desc"> <p>{{ post.desc }}</p> </div> </div> {% endfor %} {% if page_obj.has_previous %}<a href="?page={{ page_obj.previous_page_number }}">上一頁</a>{% endif %} Page {{ page_obj.number }} of {{ paginator.num_pages }}. {% if page_obj.has_next %}<a href="?page={{ page_obj.next_page_number }}">下一頁</a>{% endif %} {% else %} Empty!! {% endif %} {% endblock %} ~~~ * result.html ~~~ <!doctype html> <html> <head> <title>評論結果頁 - typeidea</title> <style> body {TEXT-ALIGN: center;} .result { text-align: center; width: 40%; margin: auto; } .errorlist {color: red;} ul li { list-style-type: None; } </style> </head> <body> <div class="result"> {% if succeed %} 評論成功！ <a href="{{ target }}">返回</a> {% else %} <ul class="errorlist"> {% for field, message in form.errors.items %} <li>{{ message }}</li> {% endfor %} </ul> <a href="javascript:window.history.back();">返回</a> {% endif %} </div> </body> </html> ~~~