在 Django 中将图标添加为按钮

Question

我正在尝试在我的 Django 项目的一个页面上模仿 this 网站的风格。

我目前有以下代码

{% extends 'user_base.html' %}

{% block content %}
    <script src="../static/js/audiodisplay.js"></script>
    <script src="../static/js/recorderjs/recorder.js"></script>
    <script src="../static/js/main.js"></script>
    <style>
    html { overflow: hidden; }
    body {
            font: 14pt Arial, sans-serif;
            background: lightgrey;
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100%;
            margin: 0 0;
    }
    canvas {
            display: inline-block;
            background: #202020;
            width: 95%;
            height: 45%;
            box-shadow: 0px 0px 10px blue;
    }
    #controls {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            height: 20%;
            width: 100%;
    }
    #record { height: 15vh; }
    #record.recording {
            background: red;
            background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%);
            background: -moz-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%);
            background: radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%);
    }
    #save, #save img { height: 10vh; }
    #save { opacity: 0.25;}
    #save[download] { opacity: 1;}
    #viz {
            height: 80%;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
    }
    @media (orientation: landscape) {
            body { flex-direction: row;}
            #controls { flex-direction: column; height: 100%; width: 10%;}
            #viz { height: 100%; width: 90%;}
    }

    </style>
    <div id="viz">
            <canvas id="analyser" width="1024" height="500"></canvas>
            <canvas id="wavedisplay" width="1024" height="500"></canvas>
    </div>
    <div id="controls">
            <img id="record" src="../static/templates/imgs/mic128.png" onclick="toggleRecording(this);">
            <a id="save" href="#"><img src="../static/templates/imgs/save.svg"></a>
    </div>

{% endblock %}

就我的项目布局而言，path-to-my-project/MyProject/static/media/images/ 和 path-to-my-project/MyProject/static/static/templates/imgs/ 中都存在“记录”和“保存”图像，只是为了确保我没有输入错误的路径。

我认为这并不重要，但上面的代码存在于 path-to-my-project/MyProject/static/static/templates/

我从来没有像示例站点那样在侧面看到按钮，如下所示 -- 右侧没有按钮。

我的控制台输出是

bash-3.2$ python manage.py runserver 8080
Performing system checks...

System check identified no issues (0 silenced).
January 12, 2015 - 10:16:06
Django version 1.7.1, using settings 'MyProject.settings'
Starting development server at http://127.0.0.1:8080/
Quit the server with CONTROL-C.
[12/Jan/2015 10:16:13] "GET / HTTP/1.1" 200 3248
[12/Jan/2015 10:16:14] "GET /training/ HTTP/1.1" 200 4393
[12/Jan/2015 10:16:14] "GET /static/templates/imgs/mic128.png HTTP/1.1" 404 1679
[12/Jan/2015 10:16:14] "GET /static/templates/imgs/save.svg HTTP/1.1" 404 1673
[12/Jan/2015 10:16:16] "GET /training/js/recorderjs/recorderWorker.js HTTP/1.1" 200 4393

如何添加这些图标？我在尝试设置网站图标时遇到了类似的问题。

Answer 1

我的 settings.py

有错字

STATICFILES_DIRS = (
    os.path.join(os.path.dirname(BASE_DIR), "VowelCat", "static", "static"),
)

是我的，但应该是

STATICFILES_DIRS = (
    os.path.join(os.path.dirname(BASE_DIR), "VowelCat", "static"),
)

JavaScript 不起作用，但这只是在玩路径。

在 Django 中将图标添加为按钮

Adding icon as button in Django

html

django

icons