Day15 - 建立模板

在完成前两天的前置作业後，之後将继续进行django的网站实作，接下来预计花大约2-3天的时间，完成将小说加入追踪清单的功能。

因为时间关系，今天主要先完成程序雏形作为纪录，细部功能先暂时留空待之後再补，且今天的程序尚未完成测试，故实际执行上可能会出问题。

今天将接续昨天的进度，完成HTML template，进行范围如下：

  • 新增templates资料夹，完成base_generic.html、index.html、track_book.html三支程序
  • 於urls.py加入页面连结
  • 启动网站，验证功能

Template

  1. 於应用程序资料夹下新增templates资料夹。

  2. 新增 base_generic.html档案，作为网页的基本模板。

<!DOCTYPE html>
<html lang="en">

<head>
  {% block title %}<title>Local Library</title>{% endblock %}
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <!-- Add additional CSS in static file -->
  {% load static %}
  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-2">
        {% block sidebar %}
        <ul class="sidebar-nav">
          <li><a href="{% url 'index' %}">Home</a></li>
          <li><a href="{% url 'newtrack' %}">New Track</a></li>

        </ul>
        {% endblock %}
      </div>
      <div class="col-sm-10 ">
        {% block content %}{% endblock %}
      </div>
    </div>
  </div>
</body>

</html>

程序基本上直接使用教学网站的范例，仅调整侧边栏的页面连结；index.html也没有太多调整，後面就不再列出。

  • {% block xxxx %}：基本模板可设定预设值，其他延伸模板可以替换其中内容。
  1. 新增track_book.html，为建立在基本模板之上的延伸模板。
{% extends "base_generic.html" %}
{% block content %}

  <h1>小说进度追踪</h1>

  {% if title_save %}
  <p>{{title_save}}已加入追踪。</p>  
  {% endif %}

  <form action="" method="post">
    {% csrf_token %}
    <table>
    {{ form }}
    </table>
    <input type="submit" value="Submit" />
  </form>

{% endblock %}

  • {% extends "base_generic.html" %}：声明使用的基本模板

  • {% if title_save %} {% endif %}：根据views.py中TrackBook()回传的title_save来显示内容。

    • 若表单POST新增资料成功，会回传书名：显示「书名已加入追踪。」
    • 若回传None，表示为初始表单，不显示额外资讯

  • {% csrf_token %}：产生隐藏的token，防止Cross-Site Request Forgery。

URL

於urls.py新增以下内容：

urlpatterns = [
  path('', views.index, name='index'),
  path('newtrack', views.TrackBook, name='newtrack'),
]

启动网站，验证功能

使用指令重新启动网站，透过浏览器开启。

python manage.py runserver

https://ithelp.ithome.com.tw/upload/images/20210927/20141886CGaKM2fjH3.png

输入网址并送出後，显示已加入追踪。
https://ithelp.ithome.com.tw/upload/images/20210927/20141886NRLCEHra61.png

补充

以上为今天实作内容，其实在实际启动时有修正一些程序码的错误，之後如果有时间会再记录下来。

後面待完成内容：

  1. 网址检核

  2. 爬虫功能整合至网站


<<:  JS 12 - 继承方法

>>:  成为工具人应有的工具包-12 MZCacheView

这几阵子我遇到的坑 For Active Storage

最近因为专案的关系还有老板的坚持，让我重新好好的认识 Active Storage 这个 Rails...

[Day 5] 就决定是你了！艺文资讯整合平台

我最後选择了什麽主题 我後来用了第三种－Open API的方式 因为这样就不用自己想资料内容了~ 这...

AE-LED流动效果3-Day21

接续昨天的练习~ 1.一开始所有图形会在同一个位置，不是我们想要的效果，所以把将时间轴往左移，让所有...

【Day5】从频域到 wave 的转换，浅谈虚数可以拿来 Train Model 吗?

在频域里面遭遇虚数 经过前面 4 篇的介绍我们已经知道如何萃取出声音的特徵了，我们用来训练的资料，都...

Day15：Channel 的第一堂课

在前面的文章中，我们介绍了 coroutine 的基本原理，如何使用 launch 、 async ...