mirror of
https://github.com/webrecorder/pywb.git
synced 2025-03-24 06:59:52 +01:00
docs: tweak ui docs
This commit is contained in:
Ilya Kreymer
parent
a4bf182961
commit
de46c2b4fe
@ -17,7 +17,7 @@ A subset of features provides the basic functionality of a "Wayback Machine".
|
|||||||
manual/usage
|
manual/usage
|
||||||
manual/configuring
|
manual/configuring
|
||||||
manual/access-control
|
manual/access-control
|
||||||
manual/ui-overview
|
manual/ui-customization
|
||||||
manual/localization
|
manual/localization
|
||||||
manual/architecture
|
manual/architecture
|
||||||
manual/apis
|
manual/apis
|
||||||
|
|||||||
@ -1,114 +1,9 @@
|
|||||||
.. _ui-customizations:
|
UI Customization
|
||||||
|
================
|
||||||
|
|
||||||
UI Overview and Customization
|
.. toctree::
|
||||||
=============================
|
|
||||||
|
|
||||||
pywb includes a number of options for styling the UI, including completely replacing the UI with a custom version.
|
|
||||||
|
|
||||||
|
|
||||||
Customizing UI Templates
|
|
||||||
------------------------
|
|
||||||
|
|
||||||
pywb renders HTML using the Jinja2 templating engine, loading default templates from the ``pywb/templates`` directory.
|
|
||||||
|
|
||||||
If running from a custom directory, templates can be placed in the ``templates`` directory and will override the defaults.
|
|
||||||
|
|
||||||
See :ref:`template-guide` for more details on customizing the templates.
|
|
||||||
|
|
||||||
|
|
||||||
New Vue-based UI (Alpha)
|
|
||||||
------------------------
|
|
||||||
|
|
||||||
With pywb 2.7.0, pywb includes a brand new UI which includes a visual calendar mode and a histogram-based banner.
|
|
||||||
|
|
||||||
See :ref:`new-vue-ui` for more information on how to enable this UI.
|
|
||||||
|
|
||||||
|
|
||||||
Changing the Default Styles
|
|
||||||
---------------------------
|
|
||||||
|
|
||||||
When using the default UI, pywb styles can be configured in ``pywb/static/default_banner.css``
|
|
||||||
|
|
||||||
The stylesheet contained under ``#_wb_frame_top_banner`` affect the rendering of the default banner in framed mode.
|
|
||||||
|
|
||||||
|
|
||||||
Configuring a Logo
|
|
||||||
------------------
|
|
||||||
|
|
||||||
An optional logo can be configured at the top-left of the default banner.
|
|
||||||
|
|
||||||
To enable the logo set the ``ui.logo`` property in ``config.yaml`` to point to the URL of the logo.
|
|
||||||
|
|
||||||
The URL can be any image URL, including a URL served from static directory.
|
|
||||||
|
|
||||||
For example, to add the default pywb logo to the banner, use the following to the config:
|
|
||||||
|
|
||||||
.. code:: yaml
|
|
||||||
|
|
||||||
ui:
|
|
||||||
logo: /static/pywb-logo-sm.png
|
|
||||||
|
|
||||||
|
|
||||||
Static Files
|
|
||||||
------------
|
|
||||||
|
|
||||||
pywb will automatically support static files placed under the following directories:
|
|
||||||
|
|
||||||
* Files under the root ``static`` directory: ``static/my-file.js`` can be accessed via ``http://localhost:8080/static/my-file.js``
|
|
||||||
|
|
||||||
|
|
||||||
* Files under the per-collection directory: ``./collections/my-coll/static/my-file.js`` can be accessed via ``http://localhost:8080/pywb/static/_/my-coll/my-file.js``
|
|
||||||
|
|
||||||
|
|
||||||
It is possible to change these settings via ``config.yaml``:
|
|
||||||
|
|
||||||
* ``static_prefix`` - sets the URL path used in pywb to serve static content (default ``static``)
|
|
||||||
|
|
||||||
* ``static_dir`` - sets the directory name used to read static files (default ``static``)
|
|
||||||
|
|
||||||
While pywb can serve static files, it is recommended to use an existing web server to serve static files, especially if already using it in production.
|
|
||||||
|
|
||||||
For example, this can be done via nginx with:
|
|
||||||
|
|
||||||
|
|
||||||
.. code:: text
|
|
||||||
|
|
||||||
location /wayback/static {
|
|
||||||
alias /pywb/pywb/static;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
Loading Custom Metadata
|
|
||||||
-----------------------
|
|
||||||
|
|
||||||
pywb includes a default mechanism for loading externally defined metadata, loaded from a per-collection ``metadata.yaml`` YAML file at runtime.
|
|
||||||
|
|
||||||
See :ref:`custom-metadata` for more details.
|
|
||||||
|
|
||||||
Additionally, the banner template has access to the contents of the ``config.yaml`` via the ``{{ config }}`` template variable,
|
|
||||||
allowing for passing in arbitrary config information.
|
|
||||||
|
|
||||||
For more dynamic loading of data, the banner and all of the templates can load additional data via JS ``fetch()`` calls.
|
|
||||||
|
|
||||||
|
|
||||||
Embedding pywb in frames
|
|
||||||
------------------------
|
|
||||||
|
|
||||||
It should be possible to embed pywb replay itself as an iframe as needed.
|
|
||||||
|
|
||||||
For customizing the top-level page and banner, see :ref:`custom-top-frame`.
|
|
||||||
|
|
||||||
However, there may be other reasons to embed pywb in an iframe.
|
|
||||||
|
|
||||||
This can be doen simply by including something like:
|
|
||||||
|
|
||||||
.. code:: html
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<body>
|
|
||||||
<div>Embedding pywb replay</div>
|
|
||||||
<iframe style="width: 100%; height: 100%" src="http://localhost:8080/pywb/20130729195151/http://test@example.com/"></iframe>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
|
ui-guide
|
||||||
|
new-vue-ui
|
||||||
|
template-guide
|
||||||
|
|
||||||
|
|||||||
@ -1,17 +0,0 @@
|
|||||||
UI Overview
|
|
||||||
===========
|
|
||||||
|
|
||||||
The UI overview provides various aspects of customizing the pywb UI.
|
|
||||||
|
|
||||||
The template reference lists the available templates and their variables.
|
|
||||||
|
|
||||||
The new Vue UI covers the new UI being developed as of pywb 2.7.0
|
|
||||||
|
|
||||||
pywb includes an extensive template system.
|
|
||||||
|
|
||||||
.. toctree::
|
|
||||||
|
|
||||||
ui-customization
|
|
||||||
new-vue-ui
|
|
||||||
template-guide
|
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user