1. 本章内容所用到的文件：https://files.cnblogs.com/files/icewky/HappyDjango_Static_Files.zip

一、将前端静态文件放置到项目文件目录

直接复制粘贴即可





二、模板设置



三、将静态文件拖放到项目对应目录

  1. # 注意：要先拖放js、css、images等静态文件



  1. # 以同样的方法将其他文件拖放到对应目录
  2. js >>> static
  3. css >>> static
  4. images >>> static
  5. ----------
  6. users >>> templates
  7. doc >>> templates
  8. news >>> templates
  9. course >>> templates
  10. ----------
  11. 文件拖放完成后HappyDjango_Static_Files文件夹就没用了、可以删除了，不删除也不影响使用！

完成后如下图

四、检查HTML文件中的应用是否自动更改了

4.1 文件引用没有改变的解决方法

  1. 检查文件拖放顺序是否和本笔记一致，如果一致请设置static文件为根目录

4.2 设置static文件为根目录

设置完成后重新拖放一次文件即可【实在不行就手动改下路径吧！】

五、编写视图，测试静态文件是否能渲染成功

视图函数

  1. from django.shortcuts import render
  3. def index(request):
  4.     return render(request, 'news/index.html')

路由规则

  1. from django.urls import path
  2. from . import views
  4. # APP名字，用于解析路由地址，需在path中添加name属性
  5. app_name = 'users'
  7. # 路由设置
  8. urlpatterns = [
  9.     path('',views.index,name='index'),  # path第一个参数不填表示默认路由
  10. ]

六、模板继承

6.1 创建base模板

6.2 模板挖坑

在base.html中需要的地方挖坑【{% block 变量名 %}{% endblock %}】

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>{% block title %}{% endblock %}</title>
  6.   <link rel="stylesheet" href="../../static/css/base/reset.css">
  7.   <link rel="stylesheet" href="../../static/css/base/common.css">
  8.   <link rel="stylesheet" href="../../static/css/news/index.css">
  9.   <link rel="stylesheet" href="../../static/css/base/side.css">
  10.   <link rel="stylesheet" href="http://at.alicdn.com/t/font_684044_un7umbuwwfp.css">
  11.     {% block link %}{% endblock %}
  12. </head>
  13. <body>
  14. <!-- header start -->
  15. <header id="header">
  16.   <div class="mw1200 header-contain clearfix">
  17.     <!-- logo start -->
  18.     <h1 class="logo">
  19.       <a href="javascript:void(0);" class="logo-title">Python</a>
  20.     </h1>
  21.     <!-- logo end -->
  22.     <!-- nav start -->
  23.     <nav class="nav">
  24.       <ul class="menu">
  25.         <li><a href="index.html">首页</a></li>
  26.         <li><a href="../course/course.html">在线课堂</a></li>
  27.         <li><a href="../doc/docDownload.html">下载文档</a></li>
  28.         <li><a href="search.html">搜索</a></li>
  29.       </ul>
  30.     </nav>
  31.     <!-- nav end -->
  32.     <!-- login start -->
  33.       <div class="login-box">
  34.           <div>
  35.               <i class="PyWhich py-user"></i>
  36.               <span>
  37.                   <a href="../users/login.html" class="login">登录</a> / <a href="../users/register.html"
  38.                                                                           class="reg">注册</a>
  39.               </span>
  40.           </div>
  41.           <div class="author hide">
  42.               <i class="PyWhich py-user"></i>
  43.               <span>qwertyui</span>
  44.               <ul class="author-menu">
  45.                   <li><a href="javascript:void(0);">后台管理</a></li>
  46.                   <li><a href="javascript:void(0);">退出登录</a></li>
  47.               </ul>
  48.           </div>
  49.       </div>
  50.     <!-- login end -->
  51.   </div>
  52. </header>
  53. <!-- header end -->
  55. {% block main %}
  56. <!-- main start -->
  57. <main id="main">
  58.   <div class="w1200 clearfix">
  59.     {#左边#}
  60.       {% block main_contain %}
  61.     <!-- main-contain start  -->
  62.     <div class="main-contain">
  63.       <!-- banner start -->
  64.         <div class="banner">
  65.             <ul class="pic">
  66.                 <!--淡入淡出banner-->
  68.                 <li><a href="javascript:void(0);"><img src="../../static/images/ui.png" alt="test"></a></li>
  70.                 <li><a href="javascript:void(0);"><img src="../../static/images/youxi.png" alt="test"></a></li>
  72.                 <li><a href="javascript:void(0);"><img src="../../static/images/dianshang.png" alt="test"></a></li>
  74.                 <li><a href="javascript:void(0);"><img src="../../static/images/zimeiti.png" alt="test"></a></li>
  76.                 <li><a href="javascript:void(0);"><img src="../../static/images/python_gui.jpg" alt="test"></a></li>
  78.                 <li><a href="javascript:void(0);"><img src="../../static/images/linux.jpg" alt="test"></a></li>
  80.             </ul>
  81.             <a href="javascript:void(0);" class="btn prev">
  82.                 <i class="PyWhich py-arrow-left"></i></a>
  83.             <a href="javascript:void(0);" class="btn next">
  84.                 <i class="PyWhich py-arrow-right"></i></a>
  85.             <ul class="tab">
  86.                 <!-- 按钮数量必须和图片一致 -->
  88.                 <li></li>
  90.                 <li></li>
  92.                 <li></li>
  94.                 <li></li>
  96.                 <li></li>
  98.                 <li></li>
  100.             </ul>
  101.         </div>
  102.       <!-- banner end -->
  104.       <!-- content start -->
  105.       <div class="content">
  106.         <!-- recommend-news start -->
  107.           <ul class="recommend-news">
  108.               <li>
  109.                   <a href="https://www.shiguangkey.com/course/2432" target="_blank">
  110.                       <div class="recommend-thumbnail">
  111.                           <img src="../../static/images/python_gui.jpg" alt="title">
  112.                       </div>
  113.                       <p class="info">Python GUI 教程 25行代码写一个小闹钟</p>
  114.                   </a>
  115.               </li>
  117.               <li>
  118.                   <a href="https://www.shiguangkey.com/course/2432" target="_blank">
  119.                       <div class="recommend-thumbnail">
  120.                           <img src="../../static/images/python_advanced.jpg" alt="title">
  121.                       </div>
  122.                       <p class="info">python高性能编程方法一</p>
  123.                   </a>
  124.               </li>
  126.               <li>
  127.                   <a href="https://www.shiguangkey.com/course/2432" target="_blank">
  128.                       <div class="recommend-thumbnail">
  129.                           <img src="../../static/images/jichujiaochen.jpeg" alt="title">
  130.                       </div>
  131.                       <p class="info">python基础 split 和 join函数比较</p>
  132.                   </a>
  133.               </li>
  134.           </ul>
  135.         <!-- recommend-news end -->
  137.         <!--  news-nav start-->
  138.           <nav class="news-nav">
  139.               <ul class="clearfix">
  140.                   <li class="active"><a href="javascript:void(0)">最新资讯</a></li>
  142.                   <li><a href="javascript:void(0)" data-id="1">python框架</a>
  143.                   </li>
  145.                   <li><a href="javascript:void(0)" data-id="2">Python基础</a>
  146.                   </li>
  148.                   <li><a href="javascript:void(0)" data-id="3">Python高级</a>
  149.                   </li>
  151.                   <li><a href="javascript:void(0)" data-id="4">Python函数</a>
  152.                   </li>
  154.                   <li><a href="javascript:void(0)" data-id="5">PythonGUI</a>
  155.                   </li>
  157.                   <li><a href="javascript:void(0)" data-id="6">Linux教程</a>
  158.                   </li>
  160.               </ul>
  161.           </nav>
  162.         <!--  news-nav end -->
  164.         <!-- news-contain start -->
  165.           <div class="news-contain">
  166.               <ul class="news-list">
  168.                   <li class="news-item">
  169.                       <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
  170.                          target="_blank">
  171.                           <img src="../../static/images/linux.jpg" alt="linux查找文件或目录命令"
  172.                                title="linux查找文件或目录命令">
  173.                       </a>
  174.                       <div class="news-content">
  175.                           <h4 class="news-title"><a
  176.                                   href="#">linux查找文件或目录命令</a>
  177.                           </h4>
  178.                           <p class="news-details">linux查找文件或目录命令，前提：知道文件或者目录的具体名字，例如：sphinx.conffind 查找find / -name
  179.                               dirname 查找目录find -name...</p>
  180.                           <div class="news-other">
  181.                               <span class="news-type">Linux教程</span>
  182.                               <span class="news-time">11/11 18:24</span>
  183.                               <span class="news-author">python</span>
  184.                           </div>
  185.                       </div>
  186.                   </li>
  188.                   <li class="news-item">
  189.                       <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
  190.                          target="_blank">
  191.                           <img src="../../static/images/linux.jpg" alt="linux下svn命令的使用"
  192.                                title="linux下svn命令的使用">
  193.                       </a>
  194.                       <div class="news-content">
  195.                           <h4 class="news-title"><a
  196.                                   href="https://www.shiguangkey.com/course/2432/887">linux下svn命令的使用</a>
  197.                           </h4>
  198.                           <p class="news-details">1、将文件checkout到本地目录svn checkout path（path是服务器上的目录） 例如：svn checkout
  199.                               svn://192.168.1.1/pro/domain 简写：svn co2、往版本库中添加新的文件 svn addfile 例如：svn add te...</p>
  200.                           <div class="news-other">
  201.                               <span class="news-type">Linux教程</span>
  202.                               <span class="news-time">11/11 18:24</span>
  203.                               <span class="news-author">python</span>
  204.                           </div>
  205.                       </div>
  206.                   </li>
  208.                   <li class="news-item">
  209.                       <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
  210.                          target="_blank">
  211.                           <img src="../../static/images/linux.jpg" alt="实现linux和windows文件传输"
  212.                                title="实现linux和windows文件传输">
  213.                       </a>
  214.                       <div class="news-content">
  215.                           <h4 class="news-title"><a
  216.                                   href="https://www.shiguangkey.com/course/2432/886">实现linux和windows文件传输</a>
  217.                           </h4>
  218.                           <p class="news-details">
  219.                               其实这个题目有点大，这里介绍的只是linux和windows文件传输中的一种，但是这种方法却非常实用，那就是：ZModem协议具体是linux命令是：rz...</p>
  220.                           <div class="news-other">
  221.                               <span class="news-type">Linux教程</span>
  222.                               <span class="news-time">11/11 18:24</span>
  223.                               <span class="news-author">python</span>
  224.                           </div>
  225.                       </div>
  226.                   </li>
  228.                   <li class="news-item">
  229.                       <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
  230.                          target="_blank">
  231.                           <img src="../../static/images/linux.jpg" alt=".htaccess配置详解"
  232.                                title=".htaccess配置详解">
  233.                       </a>
  234.                       <div class="news-content">
  235.                           <h4 class="news-title"><a
  236.                                   href="https://www.shiguangkey.com/course/2432">.htaccess配置详解</a>
  237.                           </h4>
  238.                           <p class="news-details">　　.htaccess文件设置基础教程 如果你设置好了比如常用的404页面 301重定向 页面还有500页面等会设置了
  239.                               无非对你的seo技术有很大帮助那么 .htaccess文件到底怎么设置呢　　- .htaccess 文件(或者&quot;分布式...</p>
  240.                           <div class="news-other">
  241.                               <span class="news-type">Linux教程</span>
  242.                               <span class="news-time">11/11 18:24</span>
  243.                               <span class="news-author">python</span>
  244.                           </div>
  245.                       </div>
  246.                   </li>
  248.                   <li class="news-item">
  249.                       <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
  250.                          target="_blank">
  251.                           <img src="../../static/images/linux.jpg" alt="使用nohup命令让linux程序后台运行"
  252.                                title="使用nohup命令让linux程序后台运行">
  253.                       </a>
  254.                       <div class="news-content">
  255.                           <h4 class="news-title"><a
  256.                                   href="https://www.shiguangkey.com/course/2432">使用nohup命令让linux程序后台运行</a>
  257.                           </h4>
  258.                           <p class="news-details">使用nohup让程序永远后台运行Unix/Linux下一般比如想让某个程序在后台运行，很多都是使用 &amp;
  259.                               在程序结尾来让程序自动运行。比如我们要运行mysql在后台：/usr/local/mysql/bin/mysqld_safe --user=mysql &amp;但是...</p>
  260.                           <div class="news-other">
  261.                               <span class="news-type">Linux教程</span>
  262.                               <span class="news-time">11/11 18:24</span>
  263.                               <span class="news-author">python</span>
  264.                           </div>
  265.                       </div>
  266.                   </li>
  268.               </ul>
  269.           </div>
  270.         <!-- news-contain end -->
  272.         <!-- btn-more start -->
  273.         <a href="javascript:void(0);" class="btn-more">加载更多</a>
  274.         <!-- btn-more end -->
  275.       </div>
  276.       <!-- content end -->
  277.     </div>
  278.     <!-- main-contain  end -->
  279.      {% endblock %}
  280.     {#右边#}
  281.      {% block main_side %}
  282.     <!-- side start -->
  283.       <aside class="side">
  284.           <div class="side-activities">
  285.               <h3 class="activities-title">在线课堂<a href="javascript:void(0)">更多</a></h3>
  286.               <div class="activities-img">
  287.                   <a href="javascript:void(0);" target="_blank">
  288.                       <img src="../../static/images/english.jpg" alt="title">
  289.                   </a>
  290.                   <p class="activities-tips">对话国外小姐姐</p>
  291.               </div>
  292.               <ul class="activities-list">
  293.                   <li>
  294.                       <a href="javascript:void(0);" target="_blank">
  295.                           <span class="active-status active-start">报名中</span>
  296.                           <span class="active-title"><a
  297.                                   href="https://www.shiguangkey.com/course/2432"> Django 项目班</a></span>
  298.                       </a>
  299.                   </li>
  300.                   <li>
  301.                       <a href="javascript:void(0);" target="_blank">
  302.                           <span class="active-status active-end">已结束</span>
  303.                           <span class="active-title"><a
  304.                                   href="https://www.shiguangkey.com/course/2321">Python入门基础班</a></span>
  305.                       </a>
  306.                   </li>
  307.               </ul>
  308.           </div>
  309.           <div class="side-attention clearfix">
  310.               <h3 class="attention-title">关注我</h3>
  311.               <ul class="side-attention-address">
  312.                   <li>
  313.                       <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-GitHub"></i>Taka</a>
  314.                   </li>
  315.                   <li>
  316.                       <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-zhihu"
  317.                                                                        style="color:rgb(0, 108, 226);"></i>Taka</a>
  318.                   </li>
  319.                   <li>
  320.                       <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-weibo"
  321.                                                                        style="color:rgb(245,92,110);"></i>Taka</a>
  322.                   </li>
  323.               </ul>
  324.               <div class="side-attention-qr">
  325.                   <p>扫码关注</p>
  326.               </div>
  327.           </div>
  329.           <div class="side-hot-recommend">
  330.               <h3 class="hot-recommend">热门推荐</h3>
  331.               <ul class="hot-news-list">
  333.                   <li>
  334.                       <a href="javascript:void(0)" class="hot-news-contain clearfix">
  335.                           <div class="hot-news-thumbnail">
  336.                               <img src="../../static/images/python_web.jpg"
  337.                                    alt="">
  338.                           </div>
  339.                           <div class="hot-news-content">
  340.                               <p class="hot-news-title">Django调试工具django-debug-toolbar安装使用教程</p>
  341.                               <div class="hot-news-other clearfix">
  342.                                   <span class="news-type">python框架</span>
  343.                                   <!-- 自带的 -->
  344.                                   <time class="news-pub-time">11月11日</time>
  345.                                   <span class="news-author">python</span>
  346.                               </div>
  347.                           </div>
  348.                       </a>
  349.                   </li>
  351.               </ul>
  352.           </div>
  354.       </aside>
  355.     <!-- side end -->
  356.      {% endblock %}
  357.   </div>
  358. </main>
  359. <!-- main end -->
  360. {% endblock %}
  361. <!-- footer start -->
  362. <footer id="footer">
  363.     <div class="footer-box">
  364.         <div class="footer-content">
  365.             <p class="top-content">
  366. 					<span class="link">
  367. 						<a href="javascript:void(0)">关于Python</a> |
  368. 						<a href="javascript:void(0)">我就是我</a> |
  369. 						<a href="javascript:void(0)">人生苦短</a> |
  370. 						<a href="javascript:void(0)">我用Python</a>
  371. 					</span>
  372.                 <span class="about-me">关于我: <i class="PyWhich py-wechat"></i> Taka</span>
  373.             </p>
  374.             <p class="bottom-content">
  375.                 <span>地址： xxxx</span>
  376.                 <span>联系方式: <a href="tel:400-1567-315">400-1567-315</a> (24小时在线)</span>
  377.             </p>
  378.         </div>
  379.         <p class="copyright-desc">
  380.             Copyright &copy; 2008 - 2019 xxx有限公司. All Rights Reserved
  381.         </p>
  382.     </div>
  383. </footer>
  384. <!-- footer end -->
  385. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  386. <script src="../../static/js/commons.js"></script>
  387. <script src="../../static/js/index.js"></script>
  388. {% block script %} {% endblock %}
  390. </body>
  391. </html>

6.3 填坑

6.3.1 清空index.html中的内容

6.3.2 继承base模板,填写对应坑

index.html

  1. {% extends 'base/base.html' %}
  3. {% block title %}首页面{% endblock %}
  4. {% block link %}  <link rel="stylesheet" href="../../static/css/news/index.css"> {% endblock %}
  5. {% block main %}
  6.     <main id="main">
  7.   <div class="w1200 clearfix">
  8.     <!-- main-contain start  -->
  9.     <div class="main-contain">
  10.       <!-- banner start -->
  11.         <div class="banner">
  12.             <ul class="pic">
  13.                 <!--淡入淡出banner-->
  15.                 <li><a href="javascript:void(0);"><img src="../../static/images/ui.png" alt="test"></a></li>
  17.                 <li><a href="javascript:void(0);"><img src="../../static/images/youxi.png" alt="test"></a></li>
  19.                 <li><a href="javascript:void(0);"><img src="../../static/images/dianshang.png" alt="test"></a></li>
  21.                 <li><a href="javascript:void(0);"><img src="../../static/images/zimeiti.png" alt="test"></a></li>
  23.                 <li><a href="javascript:void(0);"><img src="../../static/images/python_gui.jpg" alt="test"></a></li>
  25.                 <li><a href="javascript:void(0);"><img src="../../static/images/linux.jpg" alt="test"></a></li>
  27.             </ul>
  28.             <a href="javascript:void(0);" class="btn prev">
  29.                 <i class="PyWhich py-arrow-left"></i></a>
  30.             <a href="javascript:void(0);" class="btn next">
  31.                 <i class="PyWhich py-arrow-right"></i></a>
  32.             <ul class="tab">
  33.                 <!-- 按钮数量必须和图片一致 -->
  35.                 <li></li>
  37.                 <li></li>
  39.                 <li></li>
  41.                 <li></li>
  43.                 <li></li>
  45.                 <li></li>
  47.             </ul>
  48.         </div>
  49.       <!-- banner end -->
  51.       <!-- content start -->
  52.       <div class="content">
  53.         <!-- recommend-news start -->
  54.           <ul class="recommend-news">
  55.               <li>
  56.                   <a href="https://www.shiguangkey.com/course/2432" target="_blank">
  57.                       <div class="recommend-thumbnail">
  58.                           <img src="../../static/images/python_gui.jpg" alt="title">
  59.                       </div>
  60.                       <p class="info">Python GUI 教程 25行代码写一个小闹钟</p>
  61.                   </a>
  62.               </li>
  64.               <li>
  65.                   <a href="https://www.shiguangkey.com/course/2432" target="_blank">
  66.                       <div class="recommend-thumbnail">
  67.                           <img src="../../static/images/python_advanced.jpg" alt="title">
  68.                       </div>
  69.                       <p class="info">python高性能编程方法一</p>
  70.                   </a>
  71.               </li>
  73.               <li>
  74.                   <a href="https://www.shiguangkey.com/course/2432" target="_blank">
  75.                       <div class="recommend-thumbnail">
  76.                           <img src="../../static/images/jichujiaochen.jpeg" alt="title">
  77.                       </div>
  78.                       <p class="info">python基础 split 和 join函数比较</p>
  79.                   </a>
  80.               </li>
  81.           </ul>
  82.         <!-- recommend-news end -->
  84.         <!--  news-nav start-->
  85.           <nav class="news-nav">
  86.               <ul class="clearfix">
  87.                   <li class="active"><a href="javascript:void(0)">最新资讯</a></li>
  89.                   <li><a href="javascript:void(0)" data-id="1">python框架</a>
  90.                   </li>
  92.                   <li><a href="javascript:void(0)" data-id="2">Python基础</a>
  93.                   </li>
  95.                   <li><a href="javascript:void(0)" data-id="3">Python高级</a>
  96.                   </li>
  98.                   <li><a href="javascript:void(0)" data-id="4">Python函数</a>
  99.                   </li>
  101.                   <li><a href="javascript:void(0)" data-id="5">PythonGUI</a>
  102.                   </li>
  104.                   <li><a href="javascript:void(0)" data-id="6">Linux教程</a>
  105.                   </li>
  107.               </ul>
  108.           </nav>
  109.         <!--  news-nav end -->
  111.         <!-- news-contain start -->
  112.           <div class="news-contain">
  113.               <ul class="news-list">
  115.                   <li class="news-item">
  116.                       <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
  117.                          target="_blank">
  118.                           <img src="../../static/images/linux.jpg" alt="linux查找文件或目录命令"
  119.                                title="linux查找文件或目录命令">
  120.                       </a>
  121.                       <div class="news-content">
  122.                           <h4 class="news-title"><a
  123.                                   href="#">linux查找文件或目录命令</a>
  124.                           </h4>
  125.                           <p class="news-details">linux查找文件或目录命令，前提：知道文件或者目录的具体名字，例如：sphinx.conffind 查找find / -name
  126.                               dirname 查找目录find -name...</p>
  127.                           <div class="news-other">
  128.                               <span class="news-type">Linux教程</span>
  129.                               <span class="news-time">11/11 18:24</span>
  130.                               <span class="news-author">python</span>
  131.                           </div>
  132.                       </div>
  133.                   </li>
  135.                   <li class="news-item">
  136.                       <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
  137.                          target="_blank">
  138.                           <img src="../../static/images/linux.jpg" alt="linux下svn命令的使用"
  139.                                title="linux下svn命令的使用">
  140.                       </a>
  141.                       <div class="news-content">
  142.                           <h4 class="news-title"><a
  143.                                   href="https://www.shiguangkey.com/course/2432/887">linux下svn命令的使用</a>
  144.                           </h4>
  145.                           <p class="news-details">1、将文件checkout到本地目录svn checkout path（path是服务器上的目录） 例如：svn checkout
  146.                               svn://192.168.1.1/pro/domain 简写：svn co2、往版本库中添加新的文件 svn addfile 例如：svn add te...</p>
  147.                           <div class="news-other">
  148.                               <span class="news-type">Linux教程</span>
  149.                               <span class="news-time">11/11 18:24</span>
  150.                               <span class="news-author">python</span>
  151.                           </div>
  152.                       </div>
  153.                   </li>
  155.                   <li class="news-item">
  156.                       <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
  157.                          target="_blank">
  158.                           <img src="../../static/images/linux.jpg" alt="实现linux和windows文件传输"
  159.                                title="实现linux和windows文件传输">
  160.                       </a>
  161.                       <div class="news-content">
  162.                           <h4 class="news-title"><a
  163.                                   href="https://www.shiguangkey.com/course/2432/886">实现linux和windows文件传输</a>
  164.                           </h4>
  165.                           <p class="news-details">
  166.                               其实这个题目有点大，这里介绍的只是linux和windows文件传输中的一种，但是这种方法却非常实用，那就是：ZModem协议具体是linux命令是：rz...</p>
  167.                           <div class="news-other">
  168.                               <span class="news-type">Linux教程</span>
  169.                               <span class="news-time">11/11 18:24</span>
  170.                               <span class="news-author">python</span>
  171.                           </div>
  172.                       </div>
  173.                   </li>
  175.                   <li class="news-item">
  176.                       <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
  177.                          target="_blank">
  178.                           <img src="../../static/images/linux.jpg" alt=".htaccess配置详解"
  179.                                title=".htaccess配置详解">
  180.                       </a>
  181.                       <div class="news-content">
  182.                           <h4 class="news-title"><a
  183.                                   href="https://www.shiguangkey.com/course/2432">.htaccess配置详解</a>
  184.                           </h4>
  185.                           <p class="news-details">　　.htaccess文件设置基础教程 如果你设置好了比如常用的404页面 301重定向 页面还有500页面等会设置了
  186.                               无非对你的seo技术有很大帮助那么 .htaccess文件到底怎么设置呢　　- .htaccess 文件(或者&quot;分布式...</p>
  187.                           <div class="news-other">
  188.                               <span class="news-type">Linux教程</span>
  189.                               <span class="news-time">11/11 18:24</span>
  190.                               <span class="news-author">python</span>
  191.                           </div>
  192.                       </div>
  193.                   </li>
  195.                   <li class="news-item">
  196.                       <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
  197.                          target="_blank">
  198.                           <img src="../../static/images/linux.jpg" alt="使用nohup命令让linux程序后台运行"
  199.                                title="使用nohup命令让linux程序后台运行">
  200.                       </a>
  201.                       <div class="news-content">
  202.                           <h4 class="news-title"><a
  203.                                   href="https://www.shiguangkey.com/course/2432">使用nohup命令让linux程序后台运行</a>
  204.                           </h4>
  205.                           <p class="news-details">使用nohup让程序永远后台运行Unix/Linux下一般比如想让某个程序在后台运行，很多都是使用 &amp;
  206.                               在程序结尾来让程序自动运行。比如我们要运行mysql在后台：/usr/local/mysql/bin/mysqld_safe --user=mysql &amp;但是...</p>
  207.                           <div class="news-other">
  208.                               <span class="news-type">Linux教程</span>
  209.                               <span class="news-time">11/11 18:24</span>
  210.                               <span class="news-author">python</span>
  211.                           </div>
  212.                       </div>
  213.                   </li>
  215.               </ul>
  216.           </div>
  217.         <!-- news-contain end -->
  219.         <!-- btn-more start -->
  220.         <a href="javascript:void(0);" class="btn-more">加载更多</a>
  221.         <!-- btn-more end -->
  222.       </div>
  223.       <!-- content end -->
  224.     </div>
  225.     <!-- main-contain  end -->
  227.     <!-- side start -->
  228.       <aside class="side">
  229.           <div class="side-activities">
  230.               <h3 class="activities-title">在线课堂<a href="javascript:void(0)">更多</a></h3>
  231.               <div class="activities-img">
  232.                   <a href="javascript:void(0);" target="_blank">
  233.                       <img src="../../static/images/english.jpg" alt="title">
  234.                   </a>
  235.                   <p class="activities-tips">对话国外小姐姐</p>
  236.               </div>
  237.               <ul class="activities-list">
  238.                   <li>
  239.                       <a href="javascript:void(0);" target="_blank">
  240.                           <span class="active-status active-start">报名中</span>
  241.                           <span class="active-title"><a
  242.                                   href="https://www.shiguangkey.com/course/2432"> Django 项目班</a></span>
  243.                       </a>
  244.                   </li>
  245.                   <li>
  246.                       <a href="javascript:void(0);" target="_blank">
  247.                           <span class="active-status active-end">已结束</span>
  248.                           <span class="active-title"><a
  249.                                   href="https://www.shiguangkey.com/course/2321">Python入门基础班</a></span>
  250.                       </a>
  251.                   </li>
  252.               </ul>
  253.           </div>
  254.           <div class="side-attention clearfix">
  255.               <h3 class="attention-title">关注我</h3>
  256.               <ul class="side-attention-address">
  257.                   <li>
  258.                       <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-GitHub"></i>Taka</a>
  259.                   </li>
  260.                   <li>
  261.                       <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-zhihu"
  262.                                                                        style="color:rgb(0, 108, 226);"></i>Taka</a>
  263.                   </li>
  264.                   <li>
  265.                       <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-weibo"
  266.                                                                        style="color:rgb(245,92,110);"></i>Taka</a>
  267.                   </li>
  268.               </ul>
  269.               <div class="side-attention-qr">
  270.                   <p>扫码关注</p>
  271.               </div>
  272.           </div>
  274.           <div class="side-hot-recommend">
  275.               <h3 class="hot-recommend">热门推荐</h3>
  276.               <ul class="hot-news-list">
  278.                   <li>
  279.                       <a href="javascript:void(0)" class="hot-news-contain clearfix">
  280.                           <div class="hot-news-thumbnail">
  281.                               <img src="../../static/images/python_web.jpg"
  282.                                    alt="">
  283.                           </div>
  284.                           <div class="hot-news-content">
  285.                               <p class="hot-news-title">Django调试工具django-debug-toolbar安装使用教程</p>
  286.                               <div class="hot-news-other clearfix">
  287.                                   <span class="news-type">python框架</span>
  288.                                   <!-- 自带的 -->
  289.                                   <time class="news-pub-time">11月11日</time>
  290.                                   <span class="news-author">python</span>
  291.                               </div>
  292.                           </div>
  293.                       </a>
  294.                   </li>
  296.               </ul>
  297.           </div>
  299.       </aside>
  300.     <!-- side end -->
  301.   </div>
  302. </main>
  303. {% endblock %}





以相同方法填写其它HTML文件

django项目班笔记-模板抽取的更多相关文章

  1. django项目班笔记-注册功能

    目录 一.用户模型设计 1.用户表字段分析 2.用户模式设计 二.执行迁移 三.图形验证码 四.将图形验证加入到前端文件中 验证码生成源码:https://files.cnblogs.com/file ...

  2. 潭州课堂25班：Ph201805201 django 项目 第三课 码云注册，django项目 (课堂笔记)

    d码云注册,登录, 创建项目: 生成秘钥 想看秘钥: 添加公钥 复制 ssh 连接 通过  git clone <ssh> 连接 在服务器上创建 python3 虚拟环境, 创建项目  p ...

  3. 跟老齐学Django 项目实战笔记

    创建项目 mysite 创建应用 blog mysit/settings.py配置app INSTALLED_APPS = [ 'django.contrib.admin', 'django.cont ...

  4. Django项目中的模板继承

    1. 定义一个基础的页面HTML文件base.html <!DOCTYPE html> <html lang="en"> <head> < ...

  5. 潭州课堂25班：Ph201805201 django 项目 第五课 静态页面转为模板 (课堂笔记)

    一.分析静态页面   1.静态vs动态 条目 静态页面 动态页面 网站内容 固定不变 经常变动 浏览器加载速度 更快(无需向服务器发起请求) 更慢 改变网站内容 很难(修改或者创建新的html页面) ...

  6. Django项目: 2.模板抽取

    为什么要抽模板,因为这样能够复用代码,减少代码量,需要原代码时就不需要修改,也不需要添加; 如果不同,就只需要单独修改不一样的地方就行  : 多挖坑,少代码,这就是抽模板的精髓,挖坑就是({% blo ...

  7. Nginx + uWSGI 部署Django 项目,并实现负载均衡

    一.uWSGI服务器 uWSGI是一个Web服务器,它实现了WSGI协议.uwsgi.http等协议.Nginx中HttpUwsgiModule的作用是与uWSGI服务器进行交换. 要注意 WSGI ...

  8. Django+bootstrap启动登录模板页面（Django三）

    上次用Django启动了我的第一个页面 具体步骤参考:初步启动DjangoDjango启动第一个页面但是页面非常简陋,所以我从网上找了个模板,下载网址:免费下载模板,解压后内部文件如下: 效果图:下面 ...

  9. Python第十三天 django 1.6 导入模板 定义数据模型 访问数据库 GET和POST方法 SimpleCMDB项目 urllib模块 urllib2模块 httplib模块 django和web服务器整合 wsgi模块 gunicorn模块

    Python第十三天   django 1.6   导入模板   定义数据模型   访问数据库   GET和POST方法    SimpleCMDB项目   urllib模块   urllib2模块 ...

随机推荐

  1. 计划任务常用在线工具-微服务信息整-seafile网盘-亿图操作-正则工具

    正则工具 https://regex101.com/ http://www.regexp.cn/Regex 身份证匹配 ^(\\d{}|\d{})(\\d|[xX])$ \d{}[-9Xx]|\d{} ...

  2. JAVA基础——使用配置文件

    一. 前言         日常我们做项目中,我们经常会遇到这样的情况:由于开发环境和生产环境的不同,项目部署在生产环境之前,有些参数我们并不知道如何取值.例如:数据库链接设定,我们在部署生产环境之前 ...

  3. 冒泡排序_python

    def popdata(ls): for i in range(len(ls)): for j in range(i+1,len(ls)): if ls[i]>ls[j]: # tmp=ls[i ...

  4. AJAX（阿贾克斯）的简单应用

    1.ajax 对象的属性说明(常用的) (1)open(method,url,boolean);创建请求,method :填请求类型(get post),url :请求的地址, boolean:tru ...

  5. React编写组件的局部样式

    我们都知道,在Vue的单文件组件中,style标签中编写的样式默认为全局样式,如果我们想编写局部样式, 使用一个scoped关键字就可以. 那么在React中怎么实现呢? (注: 这种方法必须使用类选 ...

  6. E. Double Elimination （DP）

    题目:传送门 题意:有 2^n 个人进行比赛,对他们编号 1~2^n,起初1和2打,3和4打,5和6打,7和8打...,然后1和2打完胜利的 和 3和4打完胜利的再打一场,1和2打完失败的和3和4打完 ...

  7. python-IDE使用

    集成开发工具 集成开发环境(IDE,Integrated Development Environment ) VIM 经典的linux下的文本编辑器,只有小白和的牛会用这个 Emacs linux文本 ...

  8. rust 使用国内镜像，快速安装方法

    前言 众所周知的,国内由于防火墙的原因,访问国外的网络比较慢. 如果直接按照rust官网的安装方式安装非常容易失败,即使不失败也非常非常慢 如果用国内的镜像则可以分分钟就搞定 官方安装方法 文档: h ...

  9. awk使用笔记

    awk特殊字符打印方法: 1.awk打印双引号:    awk '{print "\""}' 2.awk打印单引号: awk '{print "'\''&quo ...

  10. Azure App Service-添加自定义域名和SSL保护

    语雀知识库:https://www.yuque.com/seanyu/azure/appservicessl 公众号:云计算实战 案例  添加自定义域并开启SSL保护 进入App Service控制台 ...