Django 快速搭建博客第六节

最新推荐文章于 2019-09-12 15:52:27 发布

VIP文章 xudailong_blog

最新推荐文章于 2019-09-12 15:52:27 发布

阅读量867

点赞数 1

分类专栏： # django 文章标签： bootstrap django 数据库 css 博客

本文链接：https://blog.csdn.net/xudailong_blog/article/details/78509508

版权

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

一. 模板的下载

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

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

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

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

这样子看起来是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' %}

最低0.47元/天解锁文章

xudailong_blog

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
Django 快速搭建博客第六节

上节我们用模板弄出来第一个hello world ，这节课，我们把数据库里面真正的数据跟单篇文章的详情页显示出来一. 模板的下载这里的模板下载指的是，下载js和css文件，一个网站想要变得漂亮，变得可以稍微好看点，这里我们使用是bootstrap，是facebook的一套模板？适配了手机，平板，移动端。我也是因为学这个才了解到的这套框架，不过据公司前端小哥哥说，现在已经是算过时了，有很多v
复制链接

扫一扫