mirror of
https://github.com/evennia/evennia.git
synced 2026-03-18 13:56:30 +01:00
260 lines
No EOL
18 KiB
HTML
260 lines
No EOL
18 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 latest 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="admonition important">
|
||
<p class="first admonition-title">Note</p>
|
||
<p class="last">You are reading an old version of the Evennia documentation. <a href="https://www.evennia.com/docs/latest/index.html">The latest version is here</a></p>.
|
||
</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"
|
||
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 latest</a> »</li>
|
||
<li class="nav-item nav-item-1"><a href="../../Howtos-Overview.html" >Tutorials and How-To’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>
|
||
|
||
<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/docs/latest/index.html">Documentation Top</a> </li>
|
||
<li><a href="https://www.evennia.com">Evennia Home</a> </li>
|
||
<li><a href="https://github.com/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>
|
||
</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 along with the
|
||
default Evennia install out of the box. You can view the default website by pointing your web browser
|
||
to <code class="docutils literal notranslate"><span class="pre">http://localhost:4001</span></code>. You will see a generic welcome page with some game statistics and a link
|
||
to the Evennia web client.</p>
|
||
<p>In this tutorial, we will add a new page that you can visit at <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. Django can do all sorts of cool stuff to a page by using the view function — like
|
||
adding dynamic content or making changes to a page on the fly — but, here, we will just have it spit
|
||
back raw HTML.</p>
|
||
<p>Open <code class="docutils literal notranslate"><span class="pre">mygame/web/website</span></code> folder and create a new module file 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 but, if you do, don’t forget to add an empty
|
||
<code class="docutils literal notranslate"><span class="pre">__init__.py</span></code> file in the new folfder. Adding the <code class="docutils literal notranslate"><span class="pre">__init__.py</span></code> file tells Python that modules can be
|
||
imported from the new folder. For this tutorial, here’s what the example contents of your new <code class="docutils literal notranslate"><span class="pre">story.py</span></code>
|
||
module should look like:</p>
|
||
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="c1"># in mygame/web/website/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>The above view takes advantage of a shortcut provided for use by Django: <em>render</em>. The render shortcut
|
||
gives the template information from the request. For instance, it might provide 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>Next, we need to find the location where Evennia (and Django) looks for HTML files, which are referred
|
||
to as <em>templates</em> in Django’s parlance. You can specify such locations 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.</p>
|
||
<p>Navigate to <code class="docutils literal notranslate"><span class="pre">mygame/web/templates/website/</span></code> and create a new file there called <code class="docutils literal notranslate"><span class="pre">story.html</span></code>. This
|
||
is not an HTML tutorial, so this file’s content will be 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>As shown above, Django will allow us to extend our base styles easily because we’ve used the
|
||
<em>render</em> shortcut. If you’d prefer to not take advantage of Evennia’s base styles, you might
|
||
instead do something like this:</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 the
|
||
stub following the port — here, <code class="docutils literal notranslate"><span class="pre">/story</span></code> — to find out to which page you would like displayed. How
|
||
does Django know what HTML file <code class="docutils literal notranslate"><span class="pre">/story</span></code> should link to? You inform Django about what address stub
|
||
patterns correspond to what files in the file <code class="docutils literal notranslate"><span class="pre">mygame/web/website/urls.py</span></code>. Open it in your editor now.</p>
|
||
<p>Django looks for the variable <code class="docutils literal notranslate"><span class="pre">urlpatterns</span></code> in this file. You will want to add your new <code class="docutils literal notranslate"><span class="pre">story</span></code> pattern
|
||
and corresponding path to <code class="docutils literal notranslate"><span class="pre">urlpatterns</span></code> list — which is then, in turn, 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="sd">"""</span>
|
||
<span class="sd">This reroutes from an URL to a python view-function/class.</span>
|
||
<span class="sd">The main web/urls.py includes these routes for all urls (the root of the url)</span>
|
||
<span class="sd">so it can reroute to all website pages.</span>
|
||
<span class="sd">"""</span>
|
||
<span class="kn">from</span> <span class="nn">django.urls</span> <span class="kn">import</span> <span class="n">path</span>
|
||
|
||
<span class="kn">from</span> <span class="nn">web.website</span> <span class="kn">import</span> <span class="n">story</span>
|
||
|
||
<span class="kn">from</span> <span class="nn">evennia.web.website.urls</span> <span class="kn">import</span> <span class="n">urlpatterns</span> <span class="k">as</span> <span class="n">evennia_website_urlpatterns</span>
|
||
|
||
<span class="c1"># add patterns here</span>
|
||
<span class="n">urlpatterns</span> <span class="o">=</span> <span class="p">[</span>
|
||
<span class="c1"># path("url-pattern", imported_python_view),</span>
|
||
<span class="n">path</span><span class="p">(</span><span class="sa">r</span><span class="s2">"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="s2">"Story"</span><span class="p">),</span>
|
||
<span class="p">]</span>
|
||
|
||
<span class="c1"># read by Django</span>
|
||
<span class="n">urlpatterns</span> <span class="o">=</span> <span class="n">urlpatterns</span> <span class="o">+</span> <span class="n">evennia_website_urlpatterns</span>
|
||
</pre></div>
|
||
</div>
|
||
<p>The above code imports our <code class="docutils literal notranslate"><span class="pre">story.py</span></code> Python view module from where we created it earlier — in
|
||
<code class="docutils literal notranslate"><span class="pre">mygame/web/website/</span></code> — and then add the corresponding <code class="docutils literal notranslate"><span class="pre">path</span></code> instance. The first argument to
|
||
<code class="docutils literal notranslate"><span class="pre">path</span></code> is the pattern of the URL that we want to find (<code class="docutils literal notranslate"><span class="pre">"story"</span></code>) as a regular expression, and
|
||
then the view function from <code class="docutils literal notranslate"><span class="pre">story.py</span></code> that we want to call.</p>
|
||
<p>That should be it. Reload Evennia — <code class="docutils literal notranslate"><span class="pre">evennia</span> <span class="pre">reload</span></code> — and you should now be able to navigate
|
||
your browser to the <code class="docutils literal notranslate"><span class="pre">http://localhost:4001/story</span></code> location and view your new story page as
|
||
rendered by Python!</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 latest</a> »</li>
|
||
<li class="nav-item nav-item-1"><a href="../../Howtos-Overview.html" >Tutorials and How-To’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>
|
||
|
||
|
||
<div class="admonition important">
|
||
<p class="first admonition-title">Note</p>
|
||
<p class="last">You are reading an old version of the Evennia documentation. <a href="https://www.evennia.com/docs/latest/index.html">The latest version is here</a></p>.
|
||
</div>
|
||
|
||
|
||
<div class="footer" role="contentinfo">
|
||
© Copyright 2023, The Evennia developer community.
|
||
Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> 3.2.1.
|
||
</div>
|
||
</body>
|
||
</html> |