Question

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

棋盘

-CSS

-js

-img

通常，为了使用chessboard.js以HTML格式显示棋盘，您必须将HTML文件存储在棋盘文件夹中，然后链接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存储在模板目录中，并将任何静态文件存储在单独的静态目录中。这就是我在这里做的事情，所以我没有使用上面的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模板时，我看到的只是一个空的棋盘，其中有一堆＆＃34;未找到图像＆＃34;正方形上的图标而不是碎片。我猜我需要在其他地方更改.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

Answer 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';

Answer 2

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

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

因为django搜索并查找名称第一个文件。当你把它放在与app相同名称的文件夹中时它变得独一无二。游戏

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

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

2 个答案: