mirror of
https://github.com/evennia/evennia.git
synced 2026-03-29 03:57:17 +02:00
Updated HTML docs
This commit is contained in:
Evennia docbuilder action
parent
c81a30b229
commit
3165f49b4c
968 changed files with 23111 additions and 14203 deletions
|
|
@ -0,0 +1,231 @@
|
|||
|
||||
<!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>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="Web Tutorial" href="Web-Tutorial.html" />
|
||||
<link rel="prev" title="Part 5: Showing the world" href="Beginner-Tutorial-Part5-Intro.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="Web-Tutorial.html" title="Web Tutorial"
|
||||
accesskey="N">next</a> |</li>
|
||||
<li class="right" >
|
||||
<a href="Beginner-Tutorial-Part5-Intro.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-Intro.html" >Beginner Tutorial</a> »</li>
|
||||
<li class="nav-item nav-item-3"><a href="Beginner-Tutorial-Part5-Intro.html" accesskey="U">Part 5: Showing the world</a> »</li>
|
||||
<li class="nav-item nav-item-this"><a href="">Add a simple new web page</a></li>
|
||||
</ul>
|
||||
<div class="develop">develop branch</div>
|
||||
</div>
|
||||
|
||||
<div class="document">
|
||||
<div class="documentwrapper">
|
||||
<div class="bodywrapper">
|
||||
<div class="body" role="main">
|
||||
|
||||
<section class="tex2jax_ignore mathjax_ignore" id="add-a-simple-new-web-page">
|
||||
<h1>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>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>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>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 class="clearer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<p><h3><a href="../../../index.html">Table of Contents</a></h3>
|
||||
<ul>
|
||||
<li><a class="reference internal" href="#">Add a simple new web page</a><ul>
|
||||
<li><a class="reference internal" href="#create-the-view">Create the view</a></li>
|
||||
<li><a class="reference internal" href="#the-html-page">The HTML page</a></li>
|
||||
<li><a class="reference internal" href="#the-url">The URL</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4>Previous topic</h4>
|
||||
<p class="topless"><a href="Beginner-Tutorial-Part5-Intro.html"
|
||||
title="previous chapter">Part 5: Showing the world</a></p>
|
||||
<h4>Next topic</h4>
|
||||
<p class="topless"><a href="Web-Tutorial.html"
|
||||
title="next chapter">Web Tutorial</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>
|
||||
<li><a href="../../../../0.9.5/index.html">0.9.5 (v0.9.5 branch)</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearer"></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="Web-Tutorial.html" title="Web Tutorial"
|
||||
>next</a> |</li>
|
||||
<li class="right" >
|
||||
<a href="Beginner-Tutorial-Part5-Intro.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-Intro.html" >Beginner Tutorial</a> »</li>
|
||||
<li class="nav-item nav-item-3"><a href="Beginner-Tutorial-Part5-Intro.html" >Part 5: Showing the world</a> »</li>
|
||||
<li class="nav-item nav-item-this"><a href="">Add a simple new web page</a></li>
|
||||
</ul>
|
||||
<div class="develop">develop branch</div>
|
||||
</div>
|
||||
<div class="footer" role="contentinfo">
|
||||
© Copyright 2020, The Evennia developer community.
|
||||
Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> 3.2.1.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,195 @@
|
|||
|
||||
<!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>Part 5: Showing the world — 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="Add a simple new web page" href="Add-a-simple-new-web-page.html" />
|
||||
<link rel="prev" title="Part 4: Using what we created" href="../Part4/Beginner-Tutorial-Part4-Intro.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="Add-a-simple-new-web-page.html" title="Add a simple new web page"
|
||||
accesskey="N">next</a> |</li>
|
||||
<li class="right" >
|
||||
<a href="../Part4/Beginner-Tutorial-Part4-Intro.html" title="Part 4: Using what we created"
|
||||
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-Intro.html" accesskey="U">Beginner Tutorial</a> »</li>
|
||||
<li class="nav-item nav-item-this"><a href="">Part 5: Showing the world</a></li>
|
||||
</ul>
|
||||
<div class="develop">develop branch</div>
|
||||
</div>
|
||||
|
||||
<div class="document">
|
||||
<div class="documentwrapper">
|
||||
<div class="bodywrapper">
|
||||
<div class="body" role="main">
|
||||
|
||||
<section class="tex2jax_ignore mathjax_ignore" id="part-5-showing-the-world">
|
||||
<h1>Part 5: Showing the world<a class="headerlink" href="#part-5-showing-the-world" title="Permalink to this headline">¶</a></h1>
|
||||
<aside class="sidebar">
|
||||
<p class="sidebar-title">Beginner Tutorial Parts</p>
|
||||
<dl class="simple">
|
||||
<dt><a class="reference external" href="../Beginner-Tutorial-Intro.html">Introduction</a></dt><dd><p>Getting set up.</p>
|
||||
</dd>
|
||||
<dt>Part 1: <a class="reference external" href="../Part1/Beginner-Tutorial-Part1-Intro.html">What we have</a></dt><dd><p>A tour of Evennia and how to use the tools, including an introduction to Python.</p>
|
||||
</dd>
|
||||
<dt>Part 2: <a class="reference external" href="../Part2/Beginner-Tutorial-Part2-Intro.html">What we want</a></dt><dd><p>Planning our tutorial game and what to think about when planning your own in the future.</p>
|
||||
</dd>
|
||||
<dt>Part 3: <a class="reference external" href="../Part3/Beginner-Tutorial-Part3-Intro.html">How we get there</a></dt><dd><p>Getting down to the meat of extending Evennia to make our game</p>
|
||||
</dd>
|
||||
<dt>Part 4: <a class="reference external" href="../Part4/Beginner-Tutorial-Part4-Intro.html">Using what we created</a></dt><dd><p>Building a tech-demo and world content to go with our code</p>
|
||||
</dd>
|
||||
<dt><strong>Part 5: Showing the world</strong></dt><dd><p>Taking our new game online and let players try it out</p>
|
||||
</dd>
|
||||
</dl>
|
||||
</aside>
|
||||
<p>You have a working game! In part five we will look at the web-components of Evennia and how to modify them
|
||||
to fit your game. We will also look at hosting your game and if you feel up to it we’ll also go through how
|
||||
to bring your game online so you can invite your first players.</p>
|
||||
<section id="lessons">
|
||||
<h2>Lessons<a class="headerlink" href="#lessons" title="Permalink to this headline">¶</a></h2>
|
||||
<p><em>TODO</em></p>
|
||||
<div class="toctree-wrapper compound">
|
||||
<ul>
|
||||
<li class="toctree-l1"><a class="reference internal" href="Add-a-simple-new-web-page.html">Add a simple new web page</a></li>
|
||||
<li class="toctree-l1"><a class="reference internal" href="Web-Tutorial.html">Web Tutorial</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section id="table-of-contents">
|
||||
<h2>Table of Contents<a class="headerlink" href="#table-of-contents" title="Permalink to this headline">¶</a></h2>
|
||||
<p><em>TODO</em></p>
|
||||
<div class="toctree-wrapper compound">
|
||||
<ul>
|
||||
<li class="toctree-l1"><a class="reference internal" href="Add-a-simple-new-web-page.html">Add a simple new web page</a><ul>
|
||||
<li class="toctree-l2"><a class="reference internal" href="Add-a-simple-new-web-page.html#create-the-view">Create the view</a></li>
|
||||
<li class="toctree-l2"><a class="reference internal" href="Add-a-simple-new-web-page.html#the-html-page">The HTML page</a></li>
|
||||
<li class="toctree-l2"><a class="reference internal" href="Add-a-simple-new-web-page.html#the-url">The URL</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toctree-l1"><a class="reference internal" href="Web-Tutorial.html">Web Tutorial</a><ul>
|
||||
<li class="toctree-l2"><a class="reference internal" href="Web-Tutorial.html#a-basic-overview">A Basic Overview</a></li>
|
||||
<li class="toctree-l2"><a class="reference internal" href="Web-Tutorial.html#changing-the-logo-on-the-front-page">Changing the logo on the front page</a></li>
|
||||
<li class="toctree-l2"><a class="reference internal" href="Web-Tutorial.html#changing-the-front-pages-text">Changing the Front Page’s Text</a></li>
|
||||
<li class="toctree-l2"><a class="reference internal" href="Web-Tutorial.html#further-reading">Further reading</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="clearer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<p><h3><a href="../../../index.html">Table of Contents</a></h3>
|
||||
<ul>
|
||||
<li><a class="reference internal" href="#">Part 5: Showing the world</a><ul>
|
||||
<li><a class="reference internal" href="#lessons">Lessons</a></li>
|
||||
<li><a class="reference internal" href="#table-of-contents">Table of Contents</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4>Previous topic</h4>
|
||||
<p class="topless"><a href="../Part4/Beginner-Tutorial-Part4-Intro.html"
|
||||
title="previous chapter">Part 4: Using what we created</a></p>
|
||||
<h4>Next topic</h4>
|
||||
<p class="topless"><a href="Add-a-simple-new-web-page.html"
|
||||
title="next chapter">Add a simple new web page</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/Beginner-Tutorial-Part5-Intro.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="Beginner-Tutorial-Part5-Intro.html">1.0-dev (develop branch)</a></li>
|
||||
<li><a href="../../../../0.9.5/index.html">0.9.5 (v0.9.5 branch)</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearer"></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="Add-a-simple-new-web-page.html" title="Add a simple new web page"
|
||||
>next</a> |</li>
|
||||
<li class="right" >
|
||||
<a href="../Part4/Beginner-Tutorial-Part4-Intro.html" title="Part 4: Using what we created"
|
||||
>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-Intro.html" >Beginner Tutorial</a> »</li>
|
||||
<li class="nav-item nav-item-this"><a href="">Part 5: Showing the world</a></li>
|
||||
</ul>
|
||||
<div class="develop">develop branch</div>
|
||||
</div>
|
||||
<div class="footer" role="contentinfo">
|
||||
© Copyright 2020, The Evennia developer community.
|
||||
Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> 3.2.1.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
253
docs/1.0-dev/Howtos/Beginner-Tutorial/Part5/Web-Tutorial.html
Normal file
253
docs/1.0-dev/Howtos/Beginner-Tutorial/Part5/Web-Tutorial.html
Normal file
|
|
@ -0,0 +1,253 @@
|
|||
|
||||
<!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>Web Tutorial — 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="Coding FAQ" href="../../Coding-FAQ.html" />
|
||||
<link rel="prev" title="Add a simple new web page" href="Add-a-simple-new-web-page.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="../../Coding-FAQ.html" title="Coding FAQ"
|
||||
accesskey="N">next</a> |</li>
|
||||
<li class="right" >
|
||||
<a href="Add-a-simple-new-web-page.html" title="Add a simple new web page"
|
||||
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-Intro.html" >Beginner Tutorial</a> »</li>
|
||||
<li class="nav-item nav-item-3"><a href="Beginner-Tutorial-Part5-Intro.html" accesskey="U">Part 5: Showing the world</a> »</li>
|
||||
<li class="nav-item nav-item-this"><a href="">Web Tutorial</a></li>
|
||||
</ul>
|
||||
<div class="develop">develop branch</div>
|
||||
</div>
|
||||
|
||||
<div class="document">
|
||||
<div class="documentwrapper">
|
||||
<div class="bodywrapper">
|
||||
<div class="body" role="main">
|
||||
|
||||
<section class="tex2jax_ignore mathjax_ignore" id="web-tutorial">
|
||||
<h1>Web Tutorial<a class="headerlink" href="#web-tutorial" title="Permalink to this headline">¶</a></h1>
|
||||
<p>Evennia uses the <a class="reference external" href="https://www.djangoproject.com/">Django</a> web framework as the basis of both its
|
||||
database configuration and the website it provides. While a full understanding of Django requires
|
||||
reading the Django documentation, we have provided this tutorial to get you running with the basics
|
||||
and how they pertain to Evennia. This text details getting everything set up. The
|
||||
<a class="reference internal" href="../../Web-Character-View-Tutorial.html"><span class="doc std std-doc">Web-based Character view Tutorial</span></a> gives a more explicit example of making a
|
||||
custom web page connected to your game, and you may want to read that after finishing this guide.</p>
|
||||
<section id="a-basic-overview">
|
||||
<h2>A Basic Overview<a class="headerlink" href="#a-basic-overview" title="Permalink to this headline">¶</a></h2>
|
||||
<p>Django is a web framework. It gives you a set of development tools for building a website quickly
|
||||
and easily.</p>
|
||||
<p>Django projects are split up into <em>apps</em> and these apps all contribute to one project. For instance,
|
||||
you might have an app for conducting polls, or an app for showing news posts or, like us, one for
|
||||
creating a web client.</p>
|
||||
<p>Each of these applications has a <code class="docutils literal notranslate"><span class="pre">urls.py</span></code> file, which specifies what
|
||||
<a class="reference external" href="https://en.wikipedia.org/wiki/Uniform_resource_locator">URL</a>s are used by the app, a <code class="docutils literal notranslate"><span class="pre">views.py</span></code> file
|
||||
for the code that the URLs activate, a <code class="docutils literal notranslate"><span class="pre">templates</span></code> directory for displaying the results of that code
|
||||
in <a class="reference external" href="https://en.wikipedia.org/wiki/Html">HTML</a> for the user, and a <code class="docutils literal notranslate"><span class="pre">static</span></code> folder that holds assets
|
||||
like <a class="reference external" href="https://en.wikipedia.org/wiki/CSS">CSS</a>, <a class="reference external" href="https://en.wikipedia.org/wiki/Javascript">Javascript</a>,
|
||||
and Image files (You may note your mygame/web folder does not have a <code class="docutils literal notranslate"><span class="pre">static</span></code> or <code class="docutils literal notranslate"><span class="pre">template</span></code> folder.
|
||||
This is intended and explained further below). Django applications may also have a <code class="docutils literal notranslate"><span class="pre">models.py</span></code> file
|
||||
for storing information in the database. We will not change any models here, take a look at the
|
||||
<a class="reference internal" href="../../../Concepts/New-Models.html"><span class="doc std std-doc">New Models</span></a> page (as well as the <a class="reference external" href="https://docs.djangoproject.com/en/1.7/topics/db/models/">Django docs</a> on models) if you are interested.</p>
|
||||
<p>There is also a root <code class="docutils literal notranslate"><span class="pre">urls.py</span></code> that determines the URL structure for the entire project. A starter
|
||||
<code class="docutils literal notranslate"><span class="pre">urls.py</span></code> is included in the default game template, and automatically imports all of Evennia’s
|
||||
default URLs for you. This is located in <code class="docutils literal notranslate"><span class="pre">web/urls.py</span></code>.</p>
|
||||
</section>
|
||||
<section id="changing-the-logo-on-the-front-page">
|
||||
<h2>Changing the logo on the front page<a class="headerlink" href="#changing-the-logo-on-the-front-page" title="Permalink to this headline">¶</a></h2>
|
||||
<p>Evennia’s default logo is a fun little googly-eyed snake wrapped around a gear globe. As cute as it
|
||||
is, it probably doesn’t represent your game. So one of the first things you may wish to do is
|
||||
replace it with a logo of your own.</p>
|
||||
<p>Django web apps all have <em>static assets</em>: CSS files, Javascript files, and Image files. In order to
|
||||
make sure the final project has all the static files it needs, the system collects the files from
|
||||
every app’s <code class="docutils literal notranslate"><span class="pre">static</span></code> folder and places it in the <code class="docutils literal notranslate"><span class="pre">STATIC_ROOT</span></code> defined in <code class="docutils literal notranslate"><span class="pre">settings.py</span></code>. By default,
|
||||
the Evennia <code class="docutils literal notranslate"><span class="pre">STATIC_ROOT</span></code> is in <code class="docutils literal notranslate"><span class="pre">web/static</span></code>.</p>
|
||||
<p>Because Django pulls files from all of those separate places and puts them in one folder, it’s
|
||||
possible for one file to overwrite another. We will use this to plug in our own files without having
|
||||
to change anything in the Evennia itself.</p>
|
||||
<p>By default, Evennia is configured to pull files you put in the <code class="docutils literal notranslate"><span class="pre">web/static_overrides</span></code> <em>after</em> all
|
||||
other static files. That means that files in <code class="docutils literal notranslate"><span class="pre">static_overrides</span></code> folder will overwrite any previously
|
||||
loaded files <em>having the same path under its static folder</em>. This last part is important to repeat:
|
||||
To overload the static resource from a standard <code class="docutils literal notranslate"><span class="pre">static</span></code> folder you need to replicate the path of
|
||||
folders and file names from that <code class="docutils literal notranslate"><span class="pre">static</span></code> folder in exactly the same way inside <code class="docutils literal notranslate"><span class="pre">static_overrides</span></code>.</p>
|
||||
<p>Let’s see how this works for our logo. The default web application is in the Evennia library itself,
|
||||
in <code class="docutils literal notranslate"><span class="pre">evennia/web/</span></code>. We can see that there is a <code class="docutils literal notranslate"><span class="pre">static</span></code> folder here. If we browse down, we’ll
|
||||
eventually find the full path to the Evennia logo file:
|
||||
<code class="docutils literal notranslate"><span class="pre">evennia/web/static/evennia_general/images/evennia_logo.png</span></code>.</p>
|
||||
<p>Inside our <code class="docutils literal notranslate"><span class="pre">static_overrides</span></code> we must replicate the part of the path inside the <code class="docutils literal notranslate"><span class="pre">static</span></code> folder, in
|
||||
other words, we must replicate <code class="docutils literal notranslate"><span class="pre">evennia_general/images/evennia_logo.png</span></code>.</p>
|
||||
<p>So, to change the logo, we need to create the folder path <code class="docutils literal notranslate"><span class="pre">evennia_general/images/</span></code> in
|
||||
<code class="docutils literal notranslate"><span class="pre">static_overrides</span></code>. We then rename our own logo file to <code class="docutils literal notranslate"><span class="pre">evennia_logo.png</span></code> and copy it there. The
|
||||
final path for this file would thus be:
|
||||
<code class="docutils literal notranslate"><span class="pre">web/static_overrides/evennia_general/images/evennia_logo.png</span></code> in your local game folder.</p>
|
||||
<p>To get this file pulled in, just change to your own game directory and reload the server:</p>
|
||||
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">evennia</span> <span class="n">reload</span>
|
||||
</pre></div>
|
||||
</div>
|
||||
<p>This will reload the configuration and bring in the new static file(s). If you didn’t want to reload
|
||||
the server you could instead use</p>
|
||||
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">evennia</span> <span class="n">collectstatic</span>
|
||||
</pre></div>
|
||||
</div>
|
||||
<p>to only update the static files without any other changes.</p>
|
||||
<blockquote>
|
||||
<div><p><strong>Note</strong>: Evennia will collect static files automatically during startup. So if <code class="docutils literal notranslate"><span class="pre">evennia</span> <span class="pre">collectstatic</span></code> reports finding 0 files to collect, make sure you didn’t start the engine at some
|
||||
point - if so the collector has already done its work! To make sure, connect to the website and
|
||||
check so the logo has actually changed to your own version.</p>
|
||||
</div></blockquote>
|
||||
<blockquote>
|
||||
<div><p><strong>Note</strong>: Sometimes the static asset collector can get confused. If no matter what you do, your
|
||||
overridden files aren’t getting copied over the defaults, try removing the target file (or
|
||||
everything) in the <code class="docutils literal notranslate"><span class="pre">web/static</span></code> directory, and re-running <code class="docutils literal notranslate"><span class="pre">collectstatic</span></code> to gather everything from
|
||||
scratch.</p>
|
||||
</div></blockquote>
|
||||
</section>
|
||||
<section id="changing-the-front-pages-text">
|
||||
<h2>Changing the Front Page’s Text<a class="headerlink" href="#changing-the-front-pages-text" title="Permalink to this headline">¶</a></h2>
|
||||
<p>The default front page for Evennia contains information about the Evennia project. You’ll probably
|
||||
want to replace this information with information about your own project. Changing the page template
|
||||
is done in a similar way to changing static resources.</p>
|
||||
<p>Like static files, Django looks through a series of template folders to find the file it wants. The
|
||||
difference is that Django does not copy all of the template files into one place, it just searches
|
||||
through the template folders until it finds a template that matches what it’s looking for. This
|
||||
means that when you edit a template, the changes are instant. You don’t have to reload the server or
|
||||
run any extra commands to see these changes - reloading the web page in your browser is enough.</p>
|
||||
<p>To replace the index page’s text, we’ll need to find the template for it. We’ll go into more detail
|
||||
about how to determine which template is used for rendering a page in the
|
||||
<a class="reference internal" href="../../Web-Character-View-Tutorial.html"><span class="doc std std-doc">Web-based Character view Tutorial</span></a>. For now, you should know that the template we want to change
|
||||
is stored in <code class="docutils literal notranslate"><span class="pre">evennia/web/website/templates/website/index.html</span></code>.</p>
|
||||
<p>To replace this template file, you will put your changed template inside the
|
||||
<code class="docutils literal notranslate"><span class="pre">web/template_overrides/website</span></code> directory in your game folder. In the same way as with static
|
||||
resources you must replicate the path inside the default <code class="docutils literal notranslate"><span class="pre">template</span></code> directory exactly. So we must
|
||||
copy our replacement template named <code class="docutils literal notranslate"><span class="pre">index.html</span></code> there (or create the <code class="docutils literal notranslate"><span class="pre">website</span></code> directory in
|
||||
web/template_overrides<code class="docutils literal notranslate"><span class="pre">if</span> <span class="pre">it</span> <span class="pre">does</span> <span class="pre">not</span> <span class="pre">exist,</span> <span class="pre">first).</span> <span class="pre">The</span> <span class="pre">final</span> <span class="pre">path</span> <span class="pre">to</span> <span class="pre">the</span> <span class="pre">file</span> <span class="pre">should</span> <span class="pre">thus</span> <span class="pre">be:</span></code>web/template_overrides/website/index.html` within your game directory.</p>
|
||||
<p>Note that it is usually easier to just copy the original template over and edit it in place. The
|
||||
original file already has all the markup and tags, ready for editing.</p>
|
||||
</section>
|
||||
<section id="further-reading">
|
||||
<h2>Further reading<a class="headerlink" href="#further-reading" title="Permalink to this headline">¶</a></h2>
|
||||
<p>For further hints on working with the web presence, you could now continue to the
|
||||
<a class="reference internal" href="../../Web-Character-View-Tutorial.html"><span class="doc std std-doc">Web-based Character view Tutorial</span></a> where you learn to make a web page that
|
||||
displays in-game character stats. You can also look at <a class="reference external" href="https://docs.djangoproject.com/en/1.7/intro/tutorial01/">Django’s own
|
||||
tutorial</a> to get more insight in how Django
|
||||
works and what possibilities exist.</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="clearer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<p><h3><a href="../../../index.html">Table of Contents</a></h3>
|
||||
<ul>
|
||||
<li><a class="reference internal" href="#">Web Tutorial</a><ul>
|
||||
<li><a class="reference internal" href="#a-basic-overview">A Basic Overview</a></li>
|
||||
<li><a class="reference internal" href="#changing-the-logo-on-the-front-page">Changing the logo on the front page</a></li>
|
||||
<li><a class="reference internal" href="#changing-the-front-pages-text">Changing the Front Page’s Text</a></li>
|
||||
<li><a class="reference internal" href="#further-reading">Further reading</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4>Previous topic</h4>
|
||||
<p class="topless"><a href="Add-a-simple-new-web-page.html"
|
||||
title="previous chapter">Add a simple new web page</a></p>
|
||||
<h4>Next topic</h4>
|
||||
<p class="topless"><a href="../../Coding-FAQ.html"
|
||||
title="next chapter">Coding FAQ</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/Web-Tutorial.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="Web-Tutorial.html">1.0-dev (develop branch)</a></li>
|
||||
<li><a href="../../../../0.9.5/index.html">0.9.5 (v0.9.5 branch)</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearer"></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="../../Coding-FAQ.html" title="Coding FAQ"
|
||||
>next</a> |</li>
|
||||
<li class="right" >
|
||||
<a href="Add-a-simple-new-web-page.html" title="Add a simple new web page"
|
||||
>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-Intro.html" >Beginner Tutorial</a> »</li>
|
||||
<li class="nav-item nav-item-3"><a href="Beginner-Tutorial-Part5-Intro.html" >Part 5: Showing the world</a> »</li>
|
||||
<li class="nav-item nav-item-this"><a href="">Web Tutorial</a></li>
|
||||
</ul>
|
||||
<div class="develop">develop branch</div>
|
||||
</div>
|
||||
<div class="footer" role="contentinfo">
|
||||
© Copyright 2020, The Evennia developer community.
|
||||
Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> 3.2.1.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue