美文网首页
搭建个人博客

搭建个人博客

作者: MikeShine | 来源:发表于2019-10-27 17:32 被阅读0次

    写在前面

    在 django 中文官方网站中,有一个搭建个人博客的例子。今天照着这个完成一下,本来觉得这个东西可能非常复杂,但是好像在强大的 django 支持之下,这样的工作变得还挺简单的。
    主要是之前没有关注过 tmplates 相关的东西,只是一直在写接口。这次主要学习 templates 相关的知识。


    1. Model中学到的

    这里学到了一些之前没有注意到的东西。

    1.1 class Meta

    这个 class Meta 是通过 内嵌类 的方法来给你的 model 定义元数据。
    这里的 元数据 就是 不是任何一个字段的数据,比如排序选项,admin选项等。具体所有可能用到的 Meta 选项都是预先定义好的。 [这个老哥的博客里面每一种都解释了一下。]
    (https://www.cnblogs.com/yuruhao/p/7097636.html)
    在个人博客应用这个官方文档中使用的 verbose_name 就是给模型类起一个更可读的名字。

    class Article(models.Model):
        title = models.CharField()
    
        class Meta:
            # ...
    
    1.2 注册表单

    这个之前也接触过,如果想要在 admin 中完成添加数据这些,需要在 appName/admin.py 中进行注册
    通过在 admin.py 中注册相关的表单管理类,就可以实现在后台对表单数据进行动态添加的功能。

    # appName/admin.py
    
    @admin.register(Article)
    class ArticleAdmin(admin.ModelAdmin):
        list_display = ('id', 'category', 'title', 'tui', 'user', 'views', 'create_time')  # 想要显示的字段
        list_per_page = 30
        ordering = ('-create_time',)
        list_display_links = ('id', 'title')  # 设置哪些字段可以点击进入编辑界面
    

    2. Templates 中学到的

    这里的模板真的是一个让我焕然一新的东西。
    这里教程降到了一些常见的模板使用方法。

    2.1 django static 文件的引入方式

    首先在 django 的 project 根目录下创建 static 文件夹,并且在设置 settings.py中完成相关STATICFILES_DIRS 设置,最后进行前端引入即可

    # 写在顶部
    {% load staticfiles %}
    # 引入 js  css 文件
    { % static 'xxx.css' % }
    { % static 'xxx.js' % }
    
    2.2 模板包含、继承、{%block%}

    同样,根目录下创建 templates文件夹,然后根据appName作为子文件夹路径,来区分不同app的模板文件。之后在 settings.py 中进行相关设置。
    这里,调用模板的在django框架下也非常简单,直接 render() 就完事了。

    return render(request, 'app/index.html', context)
    
    模板包含

    所谓模板包含就是通过 {% include 'xxxx.html' %}来完成对一些相同部分的模板内容的重复利用。
    看下面的例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>MyBlog</title>
    </head>
    <body>
    <div>头部</div>
    
    <div>中部</div>
    
    <div>尾部</div>
    
    </div>
    </body>
    </html>
    

    在上面的代码中,通常情况下,对于我们要开发的网站来说,头部和尾部一般都是一样的,只有中部是不同的,所以对于这些相同的部分我们都采用模板包含的方法来实现。

    {% include 'head.html' %}
    <div>中部</div>
    {% include 'footer.html' %}
    

    如上面的代码,我们把相关的部分存成模板文件,在新的模板文件中直接使用 模板包含的方法来重复利用即可。

    模板继承

    同上,对于包含有相同部分的模板的问题,除了上面说的模板包含,也可以采用模板继承的方法。
    看下面的例子:

    templates/base.html
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>MyBlog</title>
    </head>
    <body>
    <div>头部</div>
    
    {% block content %}
    
    {% endblock %}
    
    <div>尾部</div>
    
    </div>
    </body>
    </html>
    

    在这个模板中,我们将相同的部分都用代码写出来了,将不同的部分采用 {%block [xxx]%}
    {%endblock%}替换

    在具体实现一个页面的时候,需要继承这个 base.html 模板

    templates/index.html
    
    {% extends "base.html" %} 
    {% block content %}
    <div>中部</div>
    {% endblock %}
    

    可以看到这两个模板中都有 {%block xxx%} 和 {% endblock %} 标记对,这个标记对是告诉模板引擎,这个位置是要预留给别人放东西的,这个部分的模板可以被重载。
    事实上,每一个 {% block %}都是说明这一块的内容可能被子模板所覆盖。

    不过在后来做 echart 模板的时候,用这种 {% load staticfiles%}的方法好像有点问题,之后再看。

    2.3 分页的问题

    这里对于前端模板的分页问题,django 中提供了 Paginator 包来给予支持,非常强大。
    具体的实现可以到时候查看别人的代码。

    2.4 前端 templates 中对于变量的引用

    这里在前端页面中,对于变量的引用,一般直接用 {{ 变量名 }},
    但是当引用资源文件或者 url这类变量时,就需要用 {% %} 来做相关的导入。
    这里我们看两个例子,感受一下:

    • 对于URL的写法
    href="{% url 'index' %}list-{{ show.category.id }}.html">{{ show.category.name }}
    

    看这个例子,这是在写一个标签指向的 url,这里 href 是动态加载的。具体来看 {% url 'index' %} 是引用,来说明这个是引用 url 资源中,别名叫做 'index'的路径,具体就对应到 url.py 文件中的

    urlpatterns = [
    path('', views.index, name='index'),  # 首页
    ]
    

    这个也就是这里 url 的别名的用法。

    • 对于资源文件路径的写法
    <img src="{% url 'index' %}media/{{  ban.img }}"
    

    看这个例子,这个是一个图片标签中,指定图片路径的代码。可以看到,这里是要给出一个绝对路径的。所以和上面的例子一样,这里首先用{% url 'index' %} 引用url.py 中的 url 路径,通过django 解析,即为 localhost:port/ 这样的。后面加上 media/{{ban.img}} ,即有了轮播图ban的图片的绝对路径。


    3. Views 中学到的

    3.1 重复加载问题

    这里对于每个views方法中都要加载的变量,可以用一个单独的函数来加载出来,然后将这个函数放到settings.py / templates 中,就可以将其当做全局变量来使用了。


    变量重复加载问题

    4. Form 相关

    之前没有接触过表单相关的,这里看一个小的教程,来看一下表单相关。
    一般都是用表单来做一个登录的东西。
    这里有一个教程

    相关文章

      网友评论

          本文标题:搭建个人博客

          本文链接:https://www.haomeiwen.com/subject/uxcmvctx.html