Django 快速搭建博客 第六节

2023-11-13

上节我们用模板弄出来第一个hello world ,这节课,我们把数据库里面真正的数据跟单篇文章的详情页显示出来

一. 模板的下载

  1. 这里的模板下载指的是,下载js和css文件, 一个网站想要变得漂亮,变得可以稍微好看点,这里我们使用是bootstrap,是facebook的一套模板?适配了手机,平板,移动端。我也是因为学这个才了解到的这套框架,不过据公司前端小哥哥说,现在已经是算过时了,有很多vue,angular,react框架,不过我们现在用一下还是可以行得通的。
    下面说下模板使用步骤:

1 . https://github.com/zmrenwu/django-blog-tutorial-templates(用的追梦大哥的,这套学习系列也是基于这个自己做一个更深刻的总结)
2. 下载完后,我们在blog/下新建一个static文件夹,在static下再新建一个blog文件夹,我们这样子写是按照功能static下的blog是以后还会有其他功能,或者是comments功能之类的,工作经验会让你懂得这是为什么的,

  1. 这时候我们把css,js文件夹都拷到static/blog下,把模板中的index.html 替换掉我们之前写的index.html,这时候我们再启动一下服务器会看到:

模板未做修改的index.html.png

  1. 这样子看起来是js和css 没有起到作用的,我们需要在index.html中head标签中进行重新修改一下
<head>
    <title>Black &amp; White</title>

    <!-- meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- css -->
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="{% static 'blog/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'blog/css/pace.css' %}">
    <link rel="stylesheet" href="{% static 'blog/css/custom.css' %}">

    <!-- js -->
    <script src="{% static 'blog/js/jquery-2.1.3.min.js' %}"></script>
    <script src="{% static 'blog/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'blog/js/pace.min.js' %}"></script>
    <script src="{% static 'blog/js/modernizr.custom.js' %}"></script>
</head>

还有这里的:

<!-- Mobile Menu -->
<div class="overlay overlay-hugeinc">
    <button type="button" class="overlay-close"><span class="ion-ios-close-empty"></span></button>
    <nav>
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="full-width.html">博客</a></li>
            <li><a href="about.html">关于</a></li>
            <li><a href="contact.html">联系</a></li>
        </ul>
    </nav>
</div>

<script src="{% static 'blog/js/script.js' %}"></script>

</body>
</html>

说明一下:主要用模板代码引入,加入了{% static 'blog%}
这里的<link rel="stylesheet" href="{% static 'blog/css/pace.css' %}"> 代码在浏览器中运行被替换成了:
<link rel="stylesheet" href="/static/blog/css/pace.css">

我们再运行一遍:
正常引用js,css样式的index.html.png

  1. 我们把index.html的数据完善一下,因为现在有多个article标签,我们这里只需要一个就可以了,然后写上代码:
    templates/blog/index.html
{% for post in post_list %}
  <article class="post post-{{ post.pk }}">
    ...
  </article>
{% empty %}
  <div class="no-post">暂时还没有发布的文章!</div>
{% endfor %}

这里的post_list 是从blog/views.py index方法传的post_list,模板代码用for 循环取出每一个post文章,
我们再在article标签中把内容填一下:

{% for post in post_list %}
        <article class="post post-{{ post.pk }}">
            <header class="entry-header">
                <h1 class="entry-title">
                    <a href="{{ post.get_absolute_url }}">{{ post.title }}</a>
                </h1>
                <div class="entry-meta">
                    <span class="post-category"><a href="#">{{ post.category.name }}</a></span>
                    <span class="post-date"><a href="#"><time class="entry-date"
                                                              datetime="{{ post.created_time }}">{{ post.created_time }}</time></a></span>
                    <span class="post-author"><a href="#">{{ post.author }}</a></span>
                    <span class="comments-link"><a href="#">4 评论</a></span>
                    <span class="views-count"><a href="#">588 阅读</a></span>
                </div>
            </header>
            <div class="entry-content clearfix">
                <p>{{ post.excerpt }}</p>
                <div class="read-more cl-effect-14">
                    <a href="{{ post.get_absolute_url }}" class="more-link">继续阅读 <span class="meta-nav"></span></a>
                </div>
            </div>
        </article>
    {% empty %}
        <div class="no-post">暂时还没有发布的文章!</div>
    {% endfor %}

image.png

我们再访问一次,浏览器中显示的是: 暂时还没有发布的文章
暂时还没有发布的文章.png

好吧,我们应该从后台创建admin账号,进行文章的添加操作了。

二. admin后台用户的创建并发布文章

  1. 使用命令行:python manage.py createsuperuser

创建admin后台管理账户.png

这里我们可以暂时不填写email address,在填写密码时是看不出你填的什么的

  1. 我们创建好账户了,现在需要在后台注册我们自己创建的几个模型
    Django 快速搭建博客 第三节
    这里有说道,在blog/admin.py 下写上上面的代码:
from django.contrib import admin
from .models import Post,Category,Tag

# Register your models here.

#希望能看到文章的更多信息,而不仅仅是文章
class PostAdmin(admin.ModelAdmin):
    list_display = ['title','category','created_time','modified_time','author']

# 把新注册的PostAdmin也注册进来
admin.site.register(Post,PostAdmin)
admin.site.register(Category)
admin.site.register(Tag)

这里写了个class类是为了在后台能看清楚post(文章)的具体信息,标题,标签,时间,etc

现在我们在服务器运行,输入:http://127.0.0.1:8000/admin/

这时候:
输入账号密码界面.png

输入完之后:
admin管理站点.png

我们新建几篇文章试试:
admin新建文章.png

到这里,我们在刷新一下服务器,就会出现我们刚刚写的文章标题作者什么的

ending…

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Django 快速搭建博客 第六节 的相关文章

  • django REST框架多源领域

    假设我的 models py 中有这些 models py class Theme models Model An theme is an asset of multiple levels adventure models ForeignK
  • 放大 div 内的图像而不移动 div

    如何使图像在此 div 比例内 而不在悬停时进行实际的 div 缩放 所以我只想放大图像 这是代码 div img src some image div Use transform scale container display inlin
  • HTML 嵌入对象具有灰色背景。可以透明吗?

    我使用带有开源插件的 Firefox 来播放视频 视频被 尽可能好地 缩放以适应嵌入对象的宽度和高度中定义的可用空间 但有时右侧和 或底部会有一点灰色边框 看来这不是我的父 div 的背景颜色 因为更改它根本没有效果 这是 HTML div
  • Django 1.8 KeyError:关系上的“经理”

    我的模型设置如下 class Post models Model name models CharField max length 10 class Comment models Model post models ForeignKey P
  • 使用 GD lib 过滤器标准化 CSS 过滤器

    我想让用户拖动范围滑块并通过实时预览 CSS 滤镜 调整图像的亮度和对比度 然后使用 GD 库保存调整 但是 我似乎无法从 CSS 过滤器和 GD lib 亮度和对比度过滤器获得相同的结果 我的 CSS 过滤器范围为 50 150 其中 1
  • 使 css nth-child() 只影响可见

    有没有办法用这个CSS只影响可见元素 table grid tr alt nth child odd background ebeff4 table grid tr alt nth child even background ffffff
  • 无法在我的 Django 项目中使用 Sphinx 生成自动文档

    我正在向我的 Django 项目添加文档 github链接 https github com augustakingfoundation queryjane app 该项目是开源的 使用sphinx 但是当尝试生成python文件的auto
  • 从 Bootstrap 4 网格中删除装订线

    在 Bootstrap 4 中 我被要求自定义桌面的默认网格系统 如下所示 其中 容器 桌面断点为1280px 我尝试过的例子是 body margin top 3rem l wrap max width 1280px margin rig
  • 如何检索分配给 Django 中的组的所有权限

    我正在执行一项任务来检索分配给 Django 中的组的一组权限 我可以使用以下代码获取创建的组 但无法使用它来获取分配给它们的权限 from django contrib auth models import Group Permissio
  • Mobile Safari (iPhone) CSS 垂直居中/行高 CSS 问题

    有一个问题 我一直试图在各个项目中解决 但运气不佳 我有一些divs 内的文本以 CSS 为中心 使用display block and line height 我也尝试过padding和固定的高度 通常 这些设置要么只是标题 要么有时是按
  • 如何在css3中制作曲线风格的菜单?

    是否可以用css3制作曲线 圆弧样式的菜单 我可以使用canvas或HTML5中的其他东西来实现这一点吗 预先感谢 洛根 不幸的是 我不知道有什么优雅的解决方案 特别是当涉及到菜单项时 但弧线本身应该可以在纯 css 和几个 html 元素
  • 如何翻转 Twitter Bootstrap 的工具提示

    我正在使用 Twitter 的 Bootstrap 来实现工具提示 目前 工具提示显示在链接上方 我希望工具提示出现在链接下方 我该怎么做呢 我正在触发工具提示 它明确指出 底部 但它不想为我工作 tooltip tooltip place
  • 如何在 HTML 表格上使用分页?

    我正在尝试使用这个分页library http flaviusmatis github io simplePagination js 在我的 HTML 表格页面 特别是浅色主题 中 但不知何故 我无法理解如何在我的 HTML 页面中以这种方
  • 我可以在不同浏览器中获得一致的 CSS 颜色吗?

    我正在测试一个新网站 并且我有一个 div background color bbf6bb 这对我来说似乎无害 然而 在我的 MacBook Pro 上 Firefox 3 6 与 Safari 4 中的颜色看起来非常不同 在 Safari
  • Django 手动检查 CSRF 令牌

    我正在实现一个可与 API 密钥或 CSRF 令牌配合使用的 API 目标是使其可由 Web 应用程序 受 CSRF 保护 或第三方应用程序 受 API 密钥保护 使用 基本上 对于每个请求 全部通过 POST 我都会检查是否有 API 密
  • iOS 键盘显示后分屏宽度

    我刚刚开始研究 Cordova 应用程序对分屏多任务处理的支持 到目前为止 该应用程序在模拟器中的 iPad 上显示和调整大小都很好 但是当我单击编辑字段并显示软件键盘时 100 宽度的值开始返回整个屏幕 而不是给出的窗口 初始显示 到目前
  • 如何在不设置动画的情况下突然更改 CSS 动画中的属性

    这是我试图弄清楚的 但没有使用 51 关键帧作为实现更改的黑客方法transform origin 这里有一个小提琴演示 http jsfiddle net p7pswnpq keyframes spin 0 transform origi
  • CSS:理解和调整字体的行距/行高

    有人问了一个非常相似的问题here https stackoverflow com questions 13701110 css remove line height leading on larger text但确实回答得足够了 CSS
  • 媒体查询:如何定位桌面、平板电脑和移动设备?

    我一直在对媒体查询进行一些研究 但我仍然不太明白如何定位特定大小的设备 我希望能够针对台式机 平板电脑和移动设备 我知道会存在一些差异 但如果有一个可用于针对这些设备的通用系统 那就太好了 我发现的一些例子 Mobile only scre
  • 在桌面和移动设备上编写 2 列和 3 列的 Flexbox 代码(换行)

    我真的很难弄清楚这个 CSS flexbox 解决方案 基本上有两个问题 一个是 2 列布局 另一个是 3 列布局 2 列 我认为这可能非常简单 3 列 这可能更高级一些 容器类是 嗯 container 而孩子们只是 left right

随机推荐

  • ipv6的链路本地地址

    目录 简介 先决条件 要求 使用的组件 规则 配置 网络图 配置 验证 检验 OSPF 的配置 正在验证的链路本地地址可接通性 ping从远程网络的链路本地地址 直接ping从连接的网络的链路本地地址 相关信息 简介 本文目的将提供对在网络
  • Qt漂亮界面

    Qt漂亮界面 功能规划 一 去掉菜单栏和工具栏 二 顶部导航栏的设计 appinit h头文件 appinit cpp的文件 使用方式 三 阵列按钮的点击事件写法 四 重写缩写界面 放大界面和关闭程序事件 五 鼠标事件的处理 Qt大量同类控
  • mysql数据库内容导出,MySql数据库导出

    Navicat Premium Data Transfer Source Server 刘文鹏 Source Server Type MySQL Source Server Version 50540 Source Host 127 0 0
  • 关于X79主板至强E5 CPU安装ArchLinux的记录

    最近想在家里搭网站 打算弄两台服务器 一个是旧机器x79主板的 作为AI绘图和Chatglm部署用 一个新买的是带有N5095的小板子 装了CentOS7来当web服务器 当作前置服务器 主要为外网提供服务 装CentOS7比较简单容易 所
  • TransFusion:利用 Transformer 进行鲁棒性融合来进行 3D 目标检测

    Query 初始化 Input dependent 以往 Query 位置是随机生成或学习作为网络参数的 而与输入数据无关 因此需要额外的阶段 解码器层 来学习模型向真实对象中心移动的过程 论文提出了一种基于center heatmap 的
  • VC6.0使用教程

    使用之前我们先准备一段代码 include
  • C#将依赖的DLL文件集成到EXE内部

    使用场景 C 写的一些小程序 为了方便传播 减少传播文件数量 将依赖的DLL文件集成到EXE内部是必要的 解决方案 打开 管理NuGet程序包 在浏览中搜索 Costura Fody 点击 安装 按钮 等待下载依赖及安装完成 重新编译软件
  • 操作系统7-信号量与管程

    回顾一下 并发问题 多线程并发导致资源竞争 同步概念 1 协调多线程对共享数据的访问 2 任何时刻只能由一个线程执行临界区代码 确保同步正确的方法 底层硬件支持 高层次的编程抽象 锁 信号量是锁机制在同一层上的高层抽象编程方法 一 信号量s
  • html如何设置网页的背景图片

    div div
  • Web安全面试题之-信息搜集(1)

    1 信息收集如何处理子域名爆破的泛解析问题 根据一个不存在的子域名的解析IP 来记录获取黑名单 IP 在爆破字典时 如果解析的IP在这个黑名单中 则默认跳过 如果不存在 我们则入库处理 还有一种泛解析的爆破处理方式是根据TTL来做判断 我们
  • 【Linux基础及shell脚本】Shell脚本中变量的使用

    文章目录 1 Shell变量基础 1 1 什么是变量 1 2 如何在Shell中定义和使用变量 2 Shell环境变量 2 1 什么是环境变量 2 2 环境变量与普通变量的区别 2 3 如何查看 设置和删除环境变量 3 Shell位置参数
  • 串口通信及中断

    异步通信 发送和接收数据的双方用各自的时钟控制数据的发送和接收 为降低数据传输的错误率要求双方时钟尽可能一致 异步通信以帧为单位传送数据 由于每帧数据都具有起始位和停止位所以两帧数据之间的间隔时间不影响数据传送和接收的准确率 但是每帧数据内
  • Git 笔记 - git commit

    文章目录 01 git commit 02 git commit m 03 git commit a 04 git commit p 05 git commit C 06 git commit c 07 git commit n 08 gi
  • 关于Map、WeakMap、Set 、WeakSet

    在计算机程序中 弱引用与强引用相对 是指不能确保其引用的对象不会被垃圾回收器回收的引用 一个对象若只被弱引用所引用 则被认为是不可访问的 或弱访问的 并因此可能在任何时刻被回收 Map Map 它类似于对象 也是键值对的集合 并且能够记住键
  • 基于长短期记忆神经网络LSTM的预测模型(matlab实现)

    希望是附丽于存在的 有存在 便有希望 有希望 便是光明 鲁迅 1 普通循环神经网络 循环神经网络 Recurrent Neural Networks 简称RNN 是一种能够处理时间序列数据的神经网络模型 可以自然的拟合时间和数据之间的关系
  • go 接口作为方法参数传递 

    接口作为方法参数传递 在方法内部修改结构体 示例 type IUserService interface GenId type UserService struct id string func u UserService GenId ge
  • git:分支管理策略

    主分支Master 首先 代码库应该有一个 而且仅有一个主分支 所有提供给用户使用的正式版本 都在这个主分支上发布 Git主分支的名字 默认叫做Master 它是自动建立的 版本库初始化以后 默认就是在主分支在进行开发 主分支 也是用于部署
  • 微信订阅号和公众号的区别

    第一 定位不同 订阅号为用户提供信息和资讯 服务号主要为用户提供服务 第二 群发信息量不同 订阅号每天 24小时内 可以发送1条群发消息 最新公众平台 服务号1个月 30天 内仅可以发送4条群发消息 第三 用户收到信息提醒方式不同 群发信息
  • Golang如何配置国内镜像

    1 打开国内镜像官网 GOPROXY IO 一个全球代理 为 Go 模块而生 2 您只需通过简单设置 PowerShell Windows 配置 GOPROXY 环境变量 env GOPROXY https goproxy io direc
  • Django 快速搭建博客 第六节

    上节我们用模板弄出来第一个hello world 这节课 我们把数据库里面真正的数据跟单篇文章的详情页显示出来 一 模板的下载 这里的模板下载指的是 下载js和css文件 一个网站想要变得漂亮 变得可以稍微好看点 这里我们使用是bootst