mirror of
https://github.com/evennia/evennia.git
synced 2026-03-19 06:16:31 +01:00
233 lines
No EOL
15 KiB
HTML
233 lines
No EOL
15 KiB
HTML
|
||
<!DOCTYPE html>
|
||
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
|
||
|
||
<title>1. Add a simple new web page — Evennia 1.0-dev documentation</title>
|
||
<link rel="stylesheet" href="../../../_static/nature.css" type="text/css" />
|
||
<link rel="stylesheet" href="../../../_static/pygments.css" type="text/css" />
|
||
<script id="documentation_options" data-url_root="../../../" src="../../../_static/documentation_options.js"></script>
|
||
<script src="../../../_static/jquery.js"></script>
|
||
<script src="../../../_static/underscore.js"></script>
|
||
<script src="../../../_static/doctools.js"></script>
|
||
<script src="../../../_static/language_data.js"></script>
|
||
<link rel="shortcut icon" href="../../../_static/favicon.ico"/>
|
||
<link rel="index" title="Index" href="../../../genindex.html" />
|
||
<link rel="search" title="Search" href="../../../search.html" />
|
||
<link rel="next" title="Adding a Command Prompt" href="../../Howto-Command-Prompt.html" />
|
||
<link rel="prev" title="Part 5: Showing the world" href="Beginner-Tutorial-Part5-Overview.html" />
|
||
</head><body>
|
||
<div class="related" role="navigation" aria-label="related navigation">
|
||
<h3>Navigation</h3>
|
||
<ul>
|
||
<li class="right" style="margin-right: 10px">
|
||
<a href="../../../genindex.html" title="General Index"
|
||
accesskey="I">index</a></li>
|
||
<li class="right" >
|
||
<a href="../../../py-modindex.html" title="Python Module Index"
|
||
>modules</a> |</li>
|
||
<li class="right" >
|
||
<a href="../../Howto-Command-Prompt.html" title="Adding a Command Prompt"
|
||
accesskey="N">next</a> |</li>
|
||
<li class="right" >
|
||
<a href="Beginner-Tutorial-Part5-Overview.html" title="Part 5: Showing the world"
|
||
accesskey="P">previous</a> |</li>
|
||
<li class="nav-item nav-item-0"><a href="../../../index.html">Evennia 1.0-dev</a> »</li>
|
||
<li class="nav-item nav-item-1"><a href="../../Howtos-Overview.html" >Tutorials and Howto’s</a> »</li>
|
||
<li class="nav-item nav-item-2"><a href="../Beginner-Tutorial-Overview.html" >Beginner Tutorial</a> »</li>
|
||
<li class="nav-item nav-item-3"><a href="Beginner-Tutorial-Part5-Overview.html" accesskey="U">Part 5: Showing the world</a> »</li>
|
||
<li class="nav-item nav-item-this"><a href=""><span class="section-number">1. </span>Add a simple new web page</a></li>
|
||
</ul>
|
||
<div class="develop">develop branch</div>
|
||
</div>
|
||
|
||
<div class="document">
|
||
|
||
<div class="documentwrapper">
|
||
<div class="sphinxsidebar" role="navigation" aria-label="main navigation">
|
||
<div class="sphinxsidebarwrapper">
|
||
<p class="logo"><a href="../../../index.html">
|
||
<img class="logo" src="../../../_static/evennia_logo.png" alt="Logo"/>
|
||
</a></p>
|
||
<div id="searchbox" style="display: none" role="search">
|
||
<h3 id="searchlabel">Quick search</h3>
|
||
<div class="searchformwrapper">
|
||
<form class="search" action="../../../search.html" method="get">
|
||
<input type="text" name="q" aria-labelledby="searchlabel" />
|
||
<input type="submit" value="Go" />
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<script>$('#searchbox').show(0);</script>
|
||
<h3><a href="../../../index.html">Table of Contents</a></h3>
|
||
<ul>
|
||
<li><a class="reference internal" href="#">1. Add a simple new web page</a><ul>
|
||
<li><a class="reference internal" href="#create-the-view">1.1. Create the view</a></li>
|
||
<li><a class="reference internal" href="#the-html-page">1.2. The HTML page</a></li>
|
||
<li><a class="reference internal" href="#the-url">1.3. The URL</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
<h4>Previous topic</h4>
|
||
<p class="topless"><a href="Beginner-Tutorial-Part5-Overview.html"
|
||
title="previous chapter">Part 5: Showing the world</a></p>
|
||
<h4>Next topic</h4>
|
||
<p class="topless"><a href="../../Howto-Command-Prompt.html"
|
||
title="next chapter">Adding a Command Prompt</a></p>
|
||
<div role="note" aria-label="source link">
|
||
<!--h3>This Page</h3-->
|
||
<ul class="this-page-menu">
|
||
<li><a href="../../../_sources/Howtos/Beginner-Tutorial/Part5/Add-a-simple-new-web-page.md.txt"
|
||
rel="nofollow">Show Page Source</a></li>
|
||
</ul>
|
||
</div><h3>Links</h3>
|
||
<ul>
|
||
<li><a href="https://www.evennia.com">Home page</a> </li>
|
||
<li><a href="https://github.com/evennia/evennia">Evennia Github</a> </li>
|
||
<li><a href="http://games.evennia.com">Game Index</a> </li>
|
||
<li>
|
||
<a href="https://discord.gg/AJJpcRUhtF">Discord</a> -
|
||
<a href="https://github.com/evennia/evennia/discussions">Discussions</a> -
|
||
<a href="https://evennia.blogspot.com/">Blog</a>
|
||
</li>
|
||
</ul>
|
||
<h3>Versions</h3>
|
||
<ul>
|
||
<li><a href="Add-a-simple-new-web-page.html">1.0-dev (develop branch)</a></li>
|
||
<ul>
|
||
<li><a href="../0.9.5/index.html">0.9.5 (v0.9.5 branch)</a></li>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="bodywrapper">
|
||
<div class="body" role="main">
|
||
|
||
<section class="tex2jax_ignore mathjax_ignore" id="add-a-simple-new-web-page">
|
||
<h1><span class="section-number">1. </span>Add a simple new web page<a class="headerlink" href="#add-a-simple-new-web-page" title="Permalink to this headline">¶</a></h1>
|
||
<p>Evennia leverages <a class="reference external" href="https://docs.djangoproject.com">Django</a> which is a web development framework.
|
||
Huge professional websites are made in Django and there is extensive documentation (and books) on it
|
||
. You are encouraged to at least look at the Django basic tutorials. Here we will just give a brief
|
||
introduction for how things hang together, to get you started.</p>
|
||
<p>We assume you have installed and set up Evennia to run. A webserver and website comes out of the
|
||
box. You can get to that by entering <code class="docutils literal notranslate"><span class="pre">http://localhost:4001</span></code> in your web browser - you should see a
|
||
welcome page with some game statistics and a link to the web client. Let us add a new page that you
|
||
can get to by going to <code class="docutils literal notranslate"><span class="pre">http://localhost:4001/story</span></code>.</p>
|
||
<section id="create-the-view">
|
||
<h2><span class="section-number">1.1. </span>Create the view<a class="headerlink" href="#create-the-view" title="Permalink to this headline">¶</a></h2>
|
||
<p>A django “view” is a normal Python function that django calls to render the HTML page you will see
|
||
in the web browser. Here we will just have it spit back the raw html, but Django can do all sorts of
|
||
cool stuff with the page in the view, like adding dynamic content or change it on the fly. Open
|
||
<code class="docutils literal notranslate"><span class="pre">mygame/web</span></code> folder and add a new module there named <code class="docutils literal notranslate"><span class="pre">story.py</span></code> (you could also put it in its own
|
||
folder if you wanted to be neat. Don’t forget to add an empty <code class="docutils literal notranslate"><span class="pre">__init__.py</span></code> file if you do, to tell
|
||
Python you can import from the new folder). Here’s how it looks:</p>
|
||
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="c1"># in mygame/web/story.py</span>
|
||
|
||
<span class="kn">from</span> <span class="nn">django.shortcuts</span> <span class="kn">import</span> <span class="n">render</span>
|
||
|
||
<span class="k">def</span> <span class="nf">storypage</span><span class="p">(</span><span class="n">request</span><span class="p">):</span>
|
||
<span class="k">return</span> <span class="n">render</span><span class="p">(</span><span class="n">request</span><span class="p">,</span> <span class="s2">"story.html"</span><span class="p">)</span>
|
||
</pre></div>
|
||
</div>
|
||
<p>This view takes advantage of a shortcut provided to use by Django, <em>render</em>. This shortcut gives the
|
||
template some information from the request, for instance, the game name, and then renders it.</p>
|
||
</section>
|
||
<section id="the-html-page">
|
||
<h2><span class="section-number">1.2. </span>The HTML page<a class="headerlink" href="#the-html-page" title="Permalink to this headline">¶</a></h2>
|
||
<p>We need to find a place where Evennia (and Django) looks for html files (called <em>templates</em> in
|
||
Django parlance). You can specify such places in your settings (see the <code class="docutils literal notranslate"><span class="pre">TEMPLATES</span></code> variable in
|
||
<code class="docutils literal notranslate"><span class="pre">default_settings.py</span></code> for more info), but here we’ll use an existing one. Go to
|
||
<code class="docutils literal notranslate"><span class="pre">mygame/template/overrides/website/</span></code> and create a page <code class="docutils literal notranslate"><span class="pre">story.html</span></code> there.</p>
|
||
<p>This is not a HTML tutorial, so we’ll go simple:</p>
|
||
<div class="highlight-html notranslate"><div class="highlight"><pre><span></span>{% extends "base.html" %}
|
||
{% block content %}
|
||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h1</span><span class="p">></span>A story about a tree<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>
|
||
This is a story about a tree, a classic tale ...
|
||
<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
{% endblock %}
|
||
</pre></div>
|
||
</div>
|
||
<p>Since we’ve used the <em>render</em> shortcut, Django will allow us to extend our base styles easily.</p>
|
||
<p>If you’d rather not take advantage of Evennia’s base styles, you can do something like this instead:</p>
|
||
<div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">html</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h1</span><span class="p">></span>A story about a tree<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>
|
||
This is a story about a tree, a classic tale ...
|
||
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
||
</pre></div>
|
||
</div>
|
||
</section>
|
||
<section id="the-url">
|
||
<h2><span class="section-number">1.3. </span>The URL<a class="headerlink" href="#the-url" title="Permalink to this headline">¶</a></h2>
|
||
<p>When you enter the address <code class="docutils literal notranslate"><span class="pre">http://localhost:4001/story</span></code> in your web browser, Django will parse that
|
||
field to figure out which page you want to go to. You tell it which patterns are relevant in the
|
||
file
|
||
<a class="reference external" href="https://github.com/evennia/evennia/blob/master/evennia/game_template/web/urls.py">mygame/web/urls.py</a>.
|
||
Open it now.</p>
|
||
<p>Django looks for the variable <code class="docutils literal notranslate"><span class="pre">urlpatterns</span></code> in this file. You want to add your new pattern to the
|
||
<code class="docutils literal notranslate"><span class="pre">custom_patterns</span></code> list we have prepared - that is then merged with the default <code class="docutils literal notranslate"><span class="pre">urlpatterns</span></code>. Here’s
|
||
how it could look:</p>
|
||
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="kn">from</span> <span class="nn">web</span> <span class="kn">import</span> <span class="n">story</span>
|
||
|
||
<span class="c1"># ...</span>
|
||
|
||
<span class="n">custom_patterns</span> <span class="o">=</span> <span class="p">[</span>
|
||
<span class="n">url</span><span class="p">(</span><span class="sa">r</span><span class="s1">'story'</span><span class="p">,</span> <span class="n">story</span><span class="o">.</span><span class="n">storypage</span><span class="p">,</span> <span class="n">name</span><span class="o">=</span><span class="s1">'Story'</span><span class="p">),</span>
|
||
<span class="p">]</span>
|
||
</pre></div>
|
||
</div>
|
||
<p>That is, we import our story view module from where we created it earlier and then create an <code class="docutils literal notranslate"><span class="pre">url</span></code>
|
||
instance. The first argument to <code class="docutils literal notranslate"><span class="pre">url</span></code> is the pattern of the url we want to find (<code class="docutils literal notranslate"><span class="pre">"story"</span></code>) (this is
|
||
a regular expression if you are familiar with those) and then our view function we want to direct
|
||
to.</p>
|
||
<p>That should be it. Reload Evennia and you should be able to browse to your new story page!</p>
|
||
</section>
|
||
</section>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="related" role="navigation" aria-label="related navigation">
|
||
<h3>Navigation</h3>
|
||
<ul>
|
||
<li class="right" style="margin-right: 10px">
|
||
<a href="../../../genindex.html" title="General Index"
|
||
>index</a></li>
|
||
<li class="right" >
|
||
<a href="../../../py-modindex.html" title="Python Module Index"
|
||
>modules</a> |</li>
|
||
<li class="right" >
|
||
<a href="../../Howto-Command-Prompt.html" title="Adding a Command Prompt"
|
||
>next</a> |</li>
|
||
<li class="right" >
|
||
<a href="Beginner-Tutorial-Part5-Overview.html" title="Part 5: Showing the world"
|
||
>previous</a> |</li>
|
||
<li class="nav-item nav-item-0"><a href="../../../index.html">Evennia 1.0-dev</a> »</li>
|
||
<li class="nav-item nav-item-1"><a href="../../Howtos-Overview.html" >Tutorials and Howto’s</a> »</li>
|
||
<li class="nav-item nav-item-2"><a href="../Beginner-Tutorial-Overview.html" >Beginner Tutorial</a> »</li>
|
||
<li class="nav-item nav-item-3"><a href="Beginner-Tutorial-Part5-Overview.html" >Part 5: Showing the world</a> »</li>
|
||
<li class="nav-item nav-item-this"><a href=""><span class="section-number">1. </span>Add a simple new web page</a></li>
|
||
</ul>
|
||
<div class="develop">develop branch</div>
|
||
</div>
|
||
<div class="footer" role="contentinfo">
|
||
© Copyright 2022, The Evennia developer community.
|
||
Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> 3.2.1.
|
||
</div>
|
||
</body>
|
||
</html> |