Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit d7434cf

Browse files
mhilsmhils
committed
docs: template customization
1 parent b8b67ee commit d7434cf

5 files changed

Lines changed: 148 additions & 1 deletion

File tree

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,11 @@ It is recommended to use [r8-example](https://github.com/mhils/r8-example) as a
107107
and place challenges in a new separate repository. See `r8.builtin_challenges` and `r8_example`
108108
for challenge examples.
109109

110+
## Customizing the HTML template
111+
112+
r8 provides some simple means to modify the default HTML template, for example to add a custom logo.
113+
An example can be found in the [`misc/custom-template`](misc/custom-template) directory.
114+
110115
## Architecture
111116

112117
r8 consists of the following parts:

‎misc/custom-template/README.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Customizing the HTML template
2+
3+
This repository shows an example on how the r8 HTML interface can be styled.
4+
5+
In short, r8's website is rendered from [Jinja2](https://jinja.palletsprojects.com/en/3.0.x/templates/) templates.
6+
The `static_dir` setting governs which template directories are used. It is common to pass two directories: First your
7+
custom template directory and second r8's builtin template directory, from which most functionality is inherited.
8+
9+
### Usage
10+
11+
New installation:
12+
13+
```shell
14+
r8 sql init --static-dir ./misc/custom-template --static-dir ./r8/static
15+
```
16+
17+
Existing installation:
18+
19+
```shell
20+
r8 settings set static_dir /absolute/path/to/r8/misc/custom-template /absolute/path/to/r8/r8/static
21+
```

‎misc/custom-template/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{% extends "_index.html" %}
2+
3+
{% block title %}Mountain CTF{% endblock %}
4+
5+
{% block logo %}
6+
function Logo() {
7+
return <img alt="logo" src="logo.svg" width="32" height="32"/>;
8+
}
9+
{% endblock %}
10+
11+
{% block footer %}
12+
<footer class="text-center m-4">
13+
Please reach out to foo@bar if you encounter any technical issues!
14+
</footer>
15+
{% endblock %}
16+
17+
{# Style changes using builtin Bootstrap classes #}
18+
{% block navstyle %}navbar-light bg-light{% endblock %}
19+
{% block submitstyle %}bg-dark{% endblock %}
20+
21+
{% block easteregg %} // here's a free flag __flag__{123456}{% endblock %}

‎misc/custom-template/logo.svg‎

Lines changed: 100 additions & 0 deletions
Loading

‎r8/static/_index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,7 @@
325325
}
326326

327327
render() {
328-
return <section className="text-center {% block submitstyle %}bg-dark{% endblock %}">
328+
return <section className="text-center {% block submitstyle %}bg-info{% endblock %}">
329329
<form className="container p-5" onSubmit={this.onSubmit}>
330330
<div className="form-group">
331331
<input name="flag" type="text" className="form-control text-center"

0 commit comments

Comments
 (0)