Django+Scrapy 小说网站初学者(三)

本文链接：https://blog.csdn.net/weixin_56938118/article/details/135817353

本文介绍了如何在Django中创建一个基础模板base.html，包括头部信息、导航栏、CSS和JavaScript的加载，以及如何使用模板语法和静态文件管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Django

基类模板定义

base.html

搜索的导航栏是大部分页面通用的，我们首先在templates下创建base.html。

头部信息

{% load static %}属于Django的模板语法。

<!DOCTYPE html>
<html lang="en">
{% load static %}

<head>

{% block link %} {% endblock %}

css导入需要父模块

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    {% block link %}

    {% endblock %}
</head>

<body>

主要内容父模块

{% block body %} {% endblock %}

<div id="wrapper" name="wrapper">
    <div class="ywtop">
        <div class="ywtop_con"></div>
        <div class="nri">书到用时方恨少，事非经过不知难。&nbsp;&nbsp;
            <a href="{% url 'user:home_views' %}" target="_top">我的书架</a> |
            <a href="{% url 'user:register_views' %}">用户注册</a>&nbsp;
        </div>
    </div>

    <div class="navigation">
        <div class="logo nav-box">
            <a href="{% url 'index:index_views' %}">
                <img src="{% static 'image/logo.png' %}" alt="首页">
            </a>
        </div>

        <div class="search-label nav-box">
            <form class="search-form" action="{% url 'search:search_default' %}" method="get">
                <label>
                    <input class="input_" type="text" value="{{ word }}" name="word_"  placeholder="可搜书名和作者，请您少字也别输错字。">
                </label>
                <input class="submit_" type="submit" value="搜索">
            </form>
        </div>
    </div>

    <div class="nav">
        <ul>
            <li><a href="{% url 'index:index_views' %}">首页</a></li>
            <li><a href="{% url 'user:home_views' %}">我的书架</a></li>
            <li><a href="{% url 'ranking:ranking_default' 1 %}">玄幻小说</a></li>
            <li><a href="{% url 'ranking:ranking_default' 2 %}">修真小说</a></li>
            <li><a href="{% url 'ranking:ranking_default' 3 %}">都市小说</a></li>
            <li><a href="{% url 'ranking:ranking_default' 4 %}">穿越小说</a></li>
            <li><a href="{% url 'ranking:ranking_default' 5 %}">网游小说</a></li>
            <li><a href="{% url 'ranking:ranking_default' 6 %}">科幻小说</a></li>
            <li><a href="{% url 'ranking:ranking_default' 7 %}">言情小说</a></li>
            <li><a href="{% url 'ranking:ranking_default' 8 %}">同人小说</a></li>
        </ul>
    </div>
    {% block body %}

    {% endblock %}
</div>

底部文件父模块

{% block footer_link %} {% endblock %}

<div id="footer" name="footer">
    <div class="footer_link">
        {% block footer_link %}

        {% endblock %}
    </div>
    <div class="footer_cont">
        <p>本站所有小说为转载作品，所有章节均由网友上传，转载至本站只是为了宣传本书让更多读者欣赏。</p>
        <p>Copyright © 2024 水哥小说网 All Rights Reserved.</p>
        <p>水哥ICP备11223344号</p>

    </div>
</div>

js文件父模块

{% block js %} {% endblock %}

<script src="{% static 'js/novel_js.js' %}"></script>
<script src="{% static 'js/jquery-3.7.1.js' %}"></script>
{% block js %}

{% endblock %}

base.css

在static下的css文件下新建base.css文件.

base.html的css文件内容以及后续用到的公用css代码

novel_js.js

在static下的js文件下新建novel_js.js文件.

后续所有js代码均存入此文件

jquery.js

jquery-3.7.1.js文件