尝试使用chessboard.js在Django中构建一个显示棋盘的网页
我想在Django建一个国际象棋网站。现在，我只想使用chessboard.js 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>如果希望将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模板标记而不是源的相对路径。我猜我需要在其他地方修改.js文件以反映目录结构的变化，但我不确定如何修改--我是新接触Javascript的人。有没有人在Django上使用过chessboard.js来达到这个目的？如果是这样，你是如何让它工作的？下面是我的应用程序目录结构：
└───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回答 2
Stack Overflow用户
发布于 2017-08-15 02:58:21
您必须进入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';Stack Overflow用户
发布于 2017-07-29 14:33:07
你需要检查你的django版本。你应该把app文件夹放在游戏开始的地方：
{% static 'game/js/chessboard-0.3.0.min.js' %}因为django会搜索并查找第一个同名的文件。当你把它放在与app同名的文件夹中时，它就变得唯一了。游戏
- static
--/game
---/js
----/yourjs.filehttps://stackoverflow.com/questions/45383466
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号