尝试在 Django 中构建一个使用 chessboard.js 显示棋盘的网页答案

【问题标题】：Trying to build a webpage in Django that displays a chessboard using chessboard.js尝试在 Django 中构建一个使用 chessboard.js 显示棋盘的网页
【发布时间】：2017-07-28 22:55:51
【问题描述】：

我正在尝试在 Django 中建立一个国际象棋网站。现在我正在尝试使用chessboard.js Javascript 库获取一个显示棋盘的页面，其目录结构为：

棋盘

-css

-js

-图片

似乎通常，为了使用 chessboard.js 以 HTML 格式显示棋盘，您必须将 HTML 文件存储在 chessboard 文件夹中，然后链接 js 和 css 文件，如下所示：

<head>
    <link rel="stylesheet" href="css/chessboard-0.3.0.css" />
    <script src="js/jquery-1.10.2.min.js"> </script>
    <script src="js/chessboard-0.3.0.js"> </script>
</head>
<body>
    <div id="board1" style="width: 400px"></div>
    <script>
        var board1 = new ChessBoard('board1', 'start');
    </script>
</body>

如果您想将 HTML 文件存储在单独的目录中，则必须更改 chessboard-0.3.0.js 文件，以便在将 CSS 样式表和图像链接附加到 HTML 文件时，路径是正确的相对路径到 HTML 文件的位置。

通常在 Django 应用程序中，您将任何 HTML 存储在模板目录中，并将任何静态文件存储在单独的静态目录中。这就是我在这里所做的，所以我使用的是（test.html）而不是上面的 HTML：

{% load staticfiles %}

<!DOCTYPE html>
<html>
  <head>
    <title>Chess</title>
    <link rel="stylesheet" href="{% static 'css/chessboard-0.3.0.css' %}">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="{% static 'js/chessboard-0.3.0.js' %}"></script>
  </head>
  <body>
    <img src="{% static 'img/chesspieces/wikipedia/bB.png' %}"/>
    <div id="board1" style="width: 400px"></div>
    <script>
        var board1 = ChessBoard('board1', 'start');
    </script>
  </body>
</html>

请注意，静态文件是使用 Django 模板标签而不是相对路径链接的。我还更改了 chessboard-0.3.0.js 文件，以便在将图像链接附加到 HTML 时，它使用 Django 模板标签而不是源的相对路径。当我运行本地服务器并加载此 HTML 模板时，我看到的只是一个空棋盘，正方形上有一堆“找不到图像”图标，而不是碎片。我猜我需要在其他一些地方更改 .js 文件以反映目录结构的变化，但我不确定如何——我是 Javascript 新手。有没有人为此目的使用过 Django 的 chessboard.js？如果是这样，你是如何让它工作的？是否可以移动我的模板，以便我可以使用相对路径而不是 Django 标签，而根本不必更改 Javascript？这是我的应用程序目录结构：

└───game
    │   admin.py
    │   apps.py
    │   models.py
    │   tests.py
    │   urls.py
    │   views.py
    │   __init__.py
    │
    ├───migrations
    │   │   __init__.py
    │   │
    │   └───__pycache__
    │           __init__.cpython-36.pyc
    │
    ├───static
    │   ├───css
    │   │       chessboard-0.3.0.css
    │   │       chessboard-0.3.0.min.css
    │   │
    │   ├───img
    │   │   └───chesspieces
    │   │       └───wikipedia
    │   │               bB.png
    │   │               bK.png
    │   │               bN.png
    │   │               bP.png
    │   │               bQ.png
    │   │               bR.png
    │   │               wB.png
    │   │               wK.png
    │   │               wN.png
    │   │               wP.png
    │   │               wQ.png
    │   │               wR.png
    │   │
    │   └───js
    │           chessboard-0.3.0.js
    │           chessboard-0.3.0.min.js
    │
    ├───templates
    │   └───game
    │           LICENSE.txt
    │           test.html

【问题讨论】：

这个命令你做过了吗？ python manage.py collectstatic

标签： javascript html django chessboard.js

【解决方案1】：

您必须进入 chessboard.js 文件并更改图像的来源：

喜欢： Chessboardjs NPM package, not showing images

进入chessboard.js 并修改第 445 行（这可能会根据您的版本而改变）

cfg.pieceTheme = 'img/chesspieces/wikipedia/{piece}.png';

改成

cfg.pieceTheme = '/static/img/chesspieces/wikipedia/{piece}.png';

【讨论】：

【解决方案2】：

您需要检查您的 django 版本。你应该把 app 文件夹放在开头游戏：

{% static 'game/js/chessboard-0.3.0.min.js' %}

因为 django 搜索并查找具有该名称的第一个文件。当您将它放在与应用程序同名的文件夹中时，它就会变得独一无二。游戏

- static
--/game
---/js
----/yourjs.file

【讨论】：

我将 javascript 文件链接到 HTML 没有问题。问题是让 javascript 文件正确处理图像。