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

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

javascript html django

Javascript 尝试在Django中使用chessboard.js构建一个显示棋盘的网页,javascript,html,django,chessboard.js,Javascript,Html,Django,Chessboard.js,我想在Django建立一个国际象棋网站。现在，我正在尝试使用Javascript库获取一个显示棋盘的页面，其目录结构为：棋盘 -css -js -img 通常，为了使用chessboard.js以HTML显示棋盘，您必须将HTML文件存储在chessboard文件夹中，然后链接js和css文件，如下所示： <head> <link rel="stylesheet" href="css/chessboard-0.3.0.css" /> <script

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

棋盘

-css

-js

-img

通常，为了使用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>

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

因为django搜索并查找第一个名为的文件。当你把它放在和app同名的文件夹中时，它就变得唯一了。游戏

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

比如：

进入

chessboard.js

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

改为

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

你做过这个命令吗？python manage.py我可以将javascript文件链接到HTML。问题是如何让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

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

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

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

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