Django MaterializeCSS - 工作，但不确定设置 css 和 js 的正确方法？答案

【问题标题】：Django MaterializeCSS - working, but not sure the right way to set css and js?Django MaterializeCSS - 工作，但不确定设置 css 和 js 的正确方法？
【发布时间】：2020-06-19 20:03:04
【问题描述】：

我正在使用 Materializecss 设计的 Django 项目 - 例如构建一个带有浮动按钮的页面。

为什么它不起作用？

我开始使用网站上的模板：https://materializecss.com/getting-started.html 并从页面中的 CDN 部分更新：

<!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

And added at the bottom: 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

非常感谢！

完整的 HTML：

 <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
<div class="fixed-action-btn">
    <a href="#" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
    <ul>
        <li><a href="#" class="btn-floating btn-large blue">
            <i class="large material-icons">filter_drama</i></a></li>
        <li><a href="#" class="btn-floating btn-large green">
            <i class="large material-icons">insert_chart</i></a></li>
        </li>
    </ul>
</div>

      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript" src="js/materialize.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </body>
  </html>

【问题讨论】：

如果有效，您可以考虑将其拆分为问题和答案。你做的是对的。它在正确的位置。
你是对的。已更新，谢谢。 - 我很好奇为什么更新的文件不起作用。

标签： django materialize

【解决方案1】：

在阅读了一些帖子后，我使用了一个建议来添加以下内容，并且成功了：

<!--JavaScript at end of body for optimized loading-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

如果有人知道解释以下内容，那就太好了：

为什么文件的更新版本不起作用？
在生产环境中安装它的正确方法是什么？

带有“使其工作的附加部分”的完整 HTML：

 <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
<div class="fixed-action-btn">
    <a href="#" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
    <ul>
        <li><a href="#" class="btn-floating btn-large blue">
            <i class="large material-icons">filter_drama</i></a></li>
        <li><a href="#" class="btn-floating btn-large green">
            <i class="large material-icons">insert_chart</i></a></li>
        </li>
    </ul>
</div>

      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript" src="js/materialize.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

ADDED PART THAT MAKE IT WORK:

<!--JavaScript at end of body for optimized loading-->
             <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    </body>
  </html>

【讨论】：