J'essaye de construire un site Web d'échecs dans Django. En ce moment, je suis juste essayer d'obtenir une page qui affiche un jeu d'échecs en utilisant la bibliothèque Javascript chessboard.js, dont la structure est répertoire:Essayer de construire une page Web dans Django qui affiche un échiquier en utilisant chessboard.js
chessboard
-css-js
-img
Il semble que typiquement, pour utiliser chessboard.js pour afficher un échiquier en HTML, vous devez stocker le fichier HTML dans le dossier échiquier, puis lier les fichiers js et css, comme ceci:
<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>
Si vous voulez stocker votre fichier HTML dans un répertoire distinct, vous devez modifier le fichier-0.3.0.js chessboard, de sorte que quand il ajoute des liens CSS et image stylesheet pour déposer le code HTML du les chemins sont corrects par rapport à l'emplacement du fichier HTML.
Généralement, dans une application Django, vous stockez du code HTML dans un répertoire de modèles et des fichiers statiques dans un répertoire statique distinct. Voilà ce que je fais ici, donc au lieu du code HTML ci-dessus que je utilise ce (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>
Notez que les fichiers statiques sont liés en utilisant les balises de modèle Django plutôt qu'un chemin relatif. J'ai également modifié le fichier chessboard-0.3.0.js de sorte que, lorsqu'il ajoute un lien d'image au code HTML, il utilise des balises de modèle Django plutôt qu'un chemin relatif pour la source. Lorsque je lance mon serveur local et charge ce modèle HTML, tout ce que je vois est un échiquier vide avec un tas d'icônes "image non trouvée" sur les carrés au lieu de morceaux. Je devine que j'ai besoin de modifier le fichier. Js dans d'autres endroits pour refléter le changement dans la structure du répertoire, mais je ne suis pas vraiment sûr de savoir comment - Je suis nouveau à Javascript. Quelqu'un at-il déjà utilisé chessboard.js avec Django à cet effet? Si oui, comment l'avez-vous fait fonctionner? Serait-il possible de déplacer mon template pour pouvoir utiliser des chemins relatifs à la place des balises Django, et ne pas avoir à modifier le Javascript? Voici la structure de mon répertoire d'applications:
└───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
Avez-vous fait cette commande? python manage.py collectstatic –