《Python Web开发从入门到实践》— Bug & Buffer 记录

如题，Bug & Buffer。

Static Files

问题描述： 网页无法找到static文件夹中的图片

解决方案：

settings.py 中：

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = os.path.join(BASE_DIR, "static"), #添加此句，别忘了逗号

详细描述：

此问题大概是第四章才遇到，之前其实也“遇到过”，在head里有

<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>

但是我怎么换这些文件，首页样式就是不变，无奈换成了链接：

1
2
3

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

今天在第四章需要引用图片，一直报404，给我郁闷坏了，查了很多才了解到，settings.py中的static file有两个范围，STATIC_URL定义的是当前app中的static资源路径，而STATICFILES_DIRS定义的则是整个项目的static资源路径。

参考链接： django 静态资源配置详解、管理静态文件 | Django 文档 | Django

Script标签放置位置

问题描述： script中的js代码无法生效

解决方案： 将目标script标签放置在需要操作的html标签的后面（相对位置）

原：
<script type="text/javascript">
   $('#{{active_menu}}').addClass(" active");
</script>
<li class="nav-top" id="science">
   <a href="{% url 'scienceApp:science' %}">科研基地</a>
</li>

后：
<li class="nav-top" id="science">
   <a href="{% url 'scienceApp:science' %}">科研基地</a>
</li>
<script type="text/javascript">
   $('#{{active_menu}}').addClass(" active");
 </script>

参考链接： Script标签位置

<script> 加载顺序、使用方式的说明:

type="text/javascript" 可加可不加，即使没有指定该属性，默认值也是它。
<script> 有两种使用方式： 页面中嵌入javascript代码 和 引入外部javascript文件
<script> 元素内部的代码会被从上到下依次解释。（在<script> 元素内部所有的代码解释完之前，页面其余内容都不会被浏览器加载和显示）
<script> 元素在解析外部文件（包括下载）时，页面的处理也会暂停（同于解析内部代码）
<script> 元素在引入外部文件（使用src）时，就不能再嵌入内部代码（<script>和</script>之间添加代码），否则嵌入的代码会被忽略

<script> 的解析顺序的说明：

浏览器会按照 <script> 元素在页面中出现的先后顺序，对它们依次进行解析<script> 存放位置的说明:

传统做法，<script> 元素都应该放在页面的 <head> 元素中。（这种做法的目的是把所有的外部文件引用都放在一起，例如 CSS文件和Javascript文件）
但是，放在 <head> 元素中，就意味着必须等到全部的javascript代码都被下载、解析和执行完成以后，才能开始呈现页面内容。（因为浏览器在遇到 <body> 标签时才开始呈现内容）
因此，放在 <head> 元素中，容易出现较长时间的空白页面（因为呈现被阻塞，如果javascript代码需要很多的话）
所以，最终 <script> 元素一般都放在 <body> 标签中页面内容的后面（也就是 </body> 标签的前面）