I'm trying to build a chess website in Django. Right now I'm just trying to get a page that displays a chessboard using the chessboard.js Javascript library, whose directory structure is:
chessboard
-css
-js
-img
It seems that typically, in order to use chessboard.js to display a chessboard in HTML, you have to store the HTML file in the chessboard folder, then link the js and css files, like this:
<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>
If you wanted to store your HTML file in a separate directory, you would have to alter the chessboard-0.3.0.js file, so that when it appends CSS stylesheet and image links to the HTML file the paths are correct relative to the HTML file's location.
Typically in a Django app you store any HTML in a templates directory and any static files in a separate static directory. That's what I'm doing here, so instead of the above HTML I'm using this (test.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>
Note that the static files are linked using Django template tags rather than a relative path. I also altered the chessboard-0.3.0.js file so that when it appends an image link to the HTML, it uses Django template tags rather than a relative path for the source. When I run my local server and load this HTML template, all I see is an empty chessboard with a bunch of "image not found" icons on the squares instead of pieces. I'm guessing that I need to alter the .js file in some other places to reflect the change in directory structure, but I'm not really sure how-- I'm new to Javascript. Has anyone ever used chessboard.js with Django for this purpose? If so, how did you get it to work? Would it be possible to move my template so that I can use relative paths instead of Django tags, and not have to alter the Javascript at all? Here's my app directory structure:
└───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
You need to check your django version. You should put app folder in the beginning game:
because django searches and looks for first file with the name. When you put it in folder of the same name with app it becomes unique. game