Django个人博客开发（七）基础模块开发

您现在的位置是：网站首页>>编程开发编程开发

发布时间：2018-04-14 11:04:11分类：编程开发阅读：1162

概述

前面将页面拆分为8个独立基础模块和2个基础模板，但内容使用的是静态内容。本节通过视图（view）操作数据，返回到各前端模板中进行渲染，从而将相应模板中的模块实现数据动态展示。

基础模块开发思路图

1、使用全局变量

1.1 介绍

因为8个基础模块和2基础模板将会在多个页面中使用，即会在多个视图（view）中将相应的动态数据传递给前端模板，为了不重复读取数据和定义变量，将通过使用全局变量的形式统一读取和定义变量，然后在需要使用变量的位置，通过locals()返回所定义的变量。其中，有部分数据从xdsite/settings.py中定义的变量获取，其它从数据库中读取。

1.2 xdsite/settings.py中定义导航二级栏目ID和站点基本信息

"""
自定义变量
"""
# 导航【技术杂谈】分类id列表
NAV_JSZT_CATEGORY = (1, 2, 3, 4, 5)
# 导航【生活随笔】分类id列表
NAV_SHSB_CATEGORY = (6, 7)
# 分页，每页显示记录条数
PER_PAGE = 2

# 网站基本信息
SITE_NAME = u'Django个人博客——江南墨卷'
SITE_HTTP = u'http://www.example.net'
SITE_DESC = u'天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。'
SITE_KEYWORDS = u'运维，开发，Linux，数据库'
SITE_BEIAN = u'粤ICP备11111111号'
PRO_EMAIL = u'admin@example.cn'

1.3视图文件blog/views.py中定义函数global_setting()

from django.shortcuts import render
from django.conf import settings
from django.db.models import Q  # filter(~Q(name=''))过滤表示不等于
from .models import Category, Tag, Article, Comment, Links

def global_setting(request):
    """
    定义全局变量函数，将函数中的变量通过locals()返回
    将global_setting函数加到 settings.py/TEMPLATES/OPTIONS 的上下文处理器中
    """
    # 获取所有可以显示的标签对象
    tags = Tag.objects.filter(is_display=1).all()
    # 获取所有友情链接对象
    links = Links.objects.all()

    # 图文推荐文章列表对象
    recommend_articles = Article.objects.filter(~Q(picture='')).filter(is_recommend=1).order_by('-hits')[:5]

    # 点击排行版文章列表对象
    hits_articles = Article.objects.order_by('-hits')[:10]

    # 定义导航分类
    # 从数据库获取指定ID的分类对象列表（置于技术杂谈导航下）
    nav_jszt_category = Category.objects.filter(id__in=settings.NAV_JSZT_CATEGORY).order_by('-index')

    # 从数据库获取指定ID的分类对象列表（置于生活随笔导航下）
    nav_shsb_category = Category.objects.filter(id__in=settings.NAV_SHSB_CATEGORY).order_by('-index')

    # settings中站点基本信息配置
    site_name = settings.SITE_NAME
    site_http = settings.SITE_HTTP
   site_keywords = settings.SITE_KEYWORDS
    site_desc = settings.SITE_DESC
    site_beian = settings.SITE_BEIAN

    pro_mail = settings.PRO_EMAIL

    return locals()

修改

xdsite/settings.py

文件中的

TEMPLATES

，将

blog/views.py

文件中的

global_setting

函数添加到模板的上下文处理器中

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],    # 指定模板位置位于根目录下的templates目录
        'APP_DIRS': True,    # 是否可以APP下的templates目录作为模板目录
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'blog.views.global_setting',   # 将global_setting中定义的全局变量加入上下文处理器中
            ],
        },
    },
]

、首页包含了

个基础模块和

个基础模板，定义首页视图，将文章对象和全局变量传递给前端模板

blog/index.html

，通过渲染检查

个基础模块和

个基础模板的动态效果

2.1 在blog/views.py中定义首页视图函数

# 首页视图
# 对当前视图的输出进行缓存，时间15分钟（推荐在conf中指定视图缓存）
def index(request):
    articles = Article.objects.all()
return render(request, 'blog/index.html', locals())

首页模板

index.html

主要继承

base.html

和嵌入其它基础模块，因此同之前静态模板时一样，不需要修改。

2.3 修改应用URL配置文件blog/urls.py中对应的首页路由

from  . import views

urlpatterns = [
    url(r'^$', views.index, name='home'),
]

、修改

个基础模块和

个基础模板，将相应数据用

global_setting

函数中定义的全局变量替换（注意列表数据的迭代调用）

3.1 标签云（tags.html）

<div class="cloud">
    <h3 class="tit">标签云</h3>
    <ul>
        {% for tag in tags %}
        <li><a href="#">{{ tag.name }}({{ tag.article_count }})</a></li>
        {% endfor %}
    </ul>
</div>

友情链接（

links.html

）

<div class="frindlinks">
    <h3 class="tit">友情链接</h3>
    <ul>
        {% for link in links %}
        <li><a title="{{ link.description }}" href="{{ link.url }}" target="_blank">{{ link.title }}</a></li>
        {% endfor %}
    </ul>
</div>

文章列表（

list.html

）

{% load staticfiles %}
{% for article in articles %}
<h3><a href="#">【{{ article.category.name }}】{{ article.title }}</a></h3>
<figure><img src="{% if article.picture %}{{ article.picture.url }}{% else %}{% static 'blog/images/img_2.jpg' %}{% endif %}" alt="【{{ article.category.name }}】{{ article.title }}"></figure>
<ul>
<p>{{ article.abstract }}</p>
<a title="【{{ article.category.name }}】{{ article.title }}" href="#" class="readmore">阅读全文&gt;&gt;</a>
</ul>
<p class="dateview"><span>{{ article.publish | date:'Y-m-d' }}</span><span>阅读：999次</span><span>分类：[<a href="#">{{ article.category.name }}</a>]</span></p>
{% empty %}
<p>还没有发布文章</p>
{% endfor %}

阅读排行（

hitsort.html

）

<div class="ph">
    <h3 class="tit">阅读排行</h3>
    <ul class="rank">
        {% for article in hits_articles %}
        <li><a href="#" target="_blank" title="【{{ article.category.name }}】{{ article.title }}">{{ article.title }}</a></li>
        {% endfor %}
    </ul>
</div>

图文推荐（

photorecommend.html

）

{% load staticfiles %}
  <div class="tuwen">
    <h3 class="tit">图文推荐</h3>
    <ul>
        {% for article in recommend_articles %}
        <li><a href="#"><img src="{{ article.picture.url }}"><b>{{ article.title | truncatechars:19 }}</b></a>
          <p><span class="tulanmu"><a href="#">{{ article.category.name }}</a></span><span class="tutime">{{ article.publish | date:'Y-m-d' }}</span></p>
        </li>
        {% endfor %}
    </ul>
  </div>

页头（

header.html

）

<header>
    <div class="headtop"></div>
    <div class="contenttop">
      <div class="logo f_l">{{ site_name }}</div>
      <div class="blank"></div>
      <nav>
        <div  class="navigation">
          <ul class="menu">
            <li><a href="{% url 'blog:home' %}">网站首页</a></li>
            <li><a href="#">技术杂谈</a>
              <ul>
                  {% for nav_jszt in nav_jszt_category %}
                  <li><a href="#">{{ nav_jszt.name }}</a></li>
                  {% endfor %}
              </ul>
            </li>
            <li><a href="#">生活随笔</a>
              <ul>
                  {% for nav_shsb in nav_shsb_category %}
                  <li><a href="#">{{ nav_shsb.name }}</a></li>
                  {% endfor %}
              </ul>
            </li>
            <li><a href="{% url 'blog:aboutme' %}">关于自己</a> </li>
            <li><a href="{% url 'blog:messageme' %}">给我留言</a> </li>
          </ul>
        </div>
      </nav>
      <SCRIPT type=text/javascript>
	// Navigation Menu
	$(function() {
		$(".menu ul").css({display: "none"}); // Opera Fix
		$(".menu li").hover(function(){
			$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown("normal");
		},function(){
			$(this).find('ul:first').css({visibility: "hidden"});
		});
	});
</SCRIPT>
    </div>
</header>

页脚（

footer.html

）

<footer>
    <div class="footer">
      <div class="f_l">
        <p>All Rights Reserved 版权所有：<a href="{{ site_http }}">{{ site_name }}</a> 备案号：{{ site_beian }}</p>
      </div>
      <div class="f_r textr">
        <p>Design by DanceSmile</p>
      </div>
    </div>
</footer>

基础模板（

base.html

）

{% load staticfiles %}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<meta name="keywords" content="{{ site_keywords }}" />
<meta name="description" content="{{ site_desc }}" />
<link href="{% static 'blog/css/base.css' %}" rel="stylesheet">
{% block css %}{% endblock %}
<!--[if lt IE 9]>
<script src="{% static 'blog/js/modernizr.js' %}"></script>
<![endif]-->
<script type="text/javascript" src="{% static 'blog/js/jquery.js' %}"></script>
{% block script %}{% endblock %}
</head>
<body>
<div id="wrapper">
  {% include "blog/baseblock/header.html" %}

  {% block middle_box %}{% endblock %}

  {% include "blog/baseblock/footer.html" %}
</div>
</body>
</html>

子基础模板（

subbase.html

）

{% extends "blog/baseblock/base.html" %}
{% load staticfiles %}

{% block css %}
  <link rel="stylesheet" href="{% static 'blog/css/sub.css' %}">
{% endblock %}
{% block script %}{% endblock %}

{% block middle_box %}
  <div class="container">
    <div class="con_content">
      <div class="about_box">
        <h2 class="nh1"><span>您现在的位置是：<a href="/" target="_blank">网站首页</a>>><a href="#" target="_blank">网络安全</a></span><b>网络安全</b></h2>
        {% block content_box %}{% endblock %}
      </div>
    </div>
    <div class="blank"></div>
  <!-- container代码 结束 -->
  </div>
{% endblock %}

关注我（

attention.html

）

此基础模块内容固定，可直接使用静态页面。

4、重启项目后检查首页是否为动态获取的数据

代码查看：https://github.com/xdao07/xdsite/tree/v0.0.4

代码下载：git clone --branch v0.0.4 https://github.com/xdao07/xdsite.git