The Sphinx themes for Qiskit and Qiskit Ecosystem documentation.
In qiskit-sphinx-theme 1.13, we added the new qiskit
theme, which migrates from Pytorch to Furo for several improvements. qiskit-sphinx-theme 1.14 added the qiskit-ecosystem
theme. The old Pytorch theme will be removed in qiskit-sphinx-theme 2.0, which we expect to release in July or August 2023.
See the section Migrate from old Pytorch theme to new theme for migration instructions.
This repository hosts three things:
- Qiskit Sphinx themes (located in the
src/
folder) - Example Docs (located in the
example_docs/
folder) - Qiskit Docs Guide (located in the
docs_guide/
folder)
The Qiskit Sphinx Themes are the themes used by Qiskit Documentation (https://qiskit.org/documentation/) and Qiskit Ecosystem projects.
The Example Docs is a minimal Sphinx project that is used for testing the Qiskit Sphinx Theme. Every pull request will trigger a GitHub workflow that builds the Example Docs to make sure the changes do not introduce unintended changes.
The Qiskit Docs Guide hosts instructions, guidelines and recommendations of good documentation practices. Its intent is to help Qiskit maintainers improve the documentation of their projects. The guide is hosted online here: https://qisk.it/docs-guide.
This package is available on PyPI using:
pip install qiskit-sphinx-theme
Then, set up the theme by updating conf.py
:
- Set
html_theme = "qiskit-ecosystem"
(only Qiskit Terra should useqiskit
) - Add
"qiskit_sphinx_theme"
toextensions
You also likely want to set html_title
in conf.py
. This results in the left sidebar having a more useful and concise name, along with the page title in the browser. Most projects will want to use this in their conf.py
:
# Sphinx expects you to set these already.
project = "My Project"
release = "4.12"
# This sets the title to e.g. `My Project 4.12`.
html_title = f"{project} {release}"
First, coordinate with the Translations team at https://github.com/qiskit-community/qiskit-translations to express your interest and to coordinate setting up the infrastructure.
Once the Translations team is ready, then update your conf.py
:
- Ensure that
qiskit_sphinx_theme
is in theextensions
setting. - Set the option
translations_list
to a list of pairs of the locale code and the language name, e.g.[..., ("de_DE", "German")]
. - Set the option
docs_url_prefix
to your project's URL prefix, likeecosystem/finance
.
For example:
extensions = [
...,
"qiskit_sphinx_theme",
]
translations_list = [
('en', 'English'),
('bn_BN', 'Bengali'),
('fr_FR', 'French'),
('de_DE', 'German'),
]
docs_url_prefix = "ecosystem/finance"
This feature allows you to link to previous versions of the docs in the left sidebar.
First, start additionally deploying your docs to <project-prefix>/stable/<version>/
, e.g. /ecosystem/finance/stable/0.5/index.html
. See https://github.com/Qiskit/qiskit-experiments/blob/227867937a08075092cd11756214bee3fb1d4d3d/tools/deploy_documentation.sh#L38-L39 for an example.
Then, update your conf.py
:
- Ensure that
qiskit_sphinx_theme
is in theextensions
setting. - Add to the option
html_context
an entry forversion_list
with a list of the prior versions, e.g.["0.4", "0.5"]
.- Each of these versions must be deployed with the above
stable/<version>
URL scheme. - You can manually set this, or some projects write a Sphinx extension to dynamically compute the value.
- You should only put prior versions in this list, not the current release.
- Each of these versions must be deployed with the above
- Set the option
docs_url_prefix
to your project's URL prefix, likeecosystem/finance
.
For example:
extensions = [
...,
"qiskit_sphinx_theme",
]
html_context = {
"version_list": ["0.4", "0.5"],
}
docs_url_prefix = "ecosystem/finance"
The qiskit_sphinx_theme
extension defines the below custom directives for you to use in RST, if you'd like. See example_docs/docs/sphinx_guide/custom_directives.rst
for examples of how to use them.
qiskit-card
qiskit-call-to-action-item
andqiskit-call-to-action-grid
Qiskit.org uses Segment Analytics to collect information on traffic to sites under the qiskit.org domain. This is not enabled by default but if you would like to enable it you can add a analytics_enabled
variable to the html_context
object in your conf.py
. Setting this to True
will enable analytics for your site once it is deployed to qiskit.org/
.
html_context = {
'analytics_enabled': True
}
By enabling analytics we will be able to collect information on number of visits to each documentation page. It will also trigger the addition of a Was this page helpful?
component at the bottom of each documentation page, so users will be able to provide yes/no feedback for each page.
If you do not enable analytics, no data will be collected and the Was this page helpful?
component will not show.
⚠️ Note: This feature is currently only available for the Qiskit theme, it is not yet available in the Ecosystem theme
The qiskit
theme includes the ability to add a custom announcement banner to every page. You can configure this in your conf.py
by adding your
custom announcement text to the theme_announcement
variable in the html_context
object, for example:
html_context = {
"theme_announcement": "🎉 Custom announcement text!",
}
The above code will enable the following banner:
![Screenshot 2023-08-07 at 5 13 10 PM](https://private-user-images.githubusercontent.com/23662430/258927642-cbb86903-17fd-4752-a955-5e8c5eda3383.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU3Mjg1MzIsIm5iZiI6MTcyNTcyODIzMiwicGF0aCI6Ii8yMzY2MjQzMC8yNTg5Mjc2NDItY2JiODY5MDMtMTdmZC00NzUyLWE5NTUtNWU4YzVlZGEzMzgzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA3VDE2NTcxMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTEwYTc4YjhmY2NjYzM2MmIxYmVkZTBiNmZlMzAzNzI4MTUyYWQ3MWI2Yjk5MzY0NDYzYzVhMTJkZmQyNDc3MDYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.bmUv24qvoEHFn7HqNuLWjUZde-LPkaR3BwH_Vvmnc98)
You can also optionally add a "Learn more" url by additionally setting the announcement_url
in the html_context
, like so:
html_context = {
"theme_announcement": "🎉 Custom announcement text!",
"announcement_url": "https://example.com"
}
The above code will render the following banner:
![Screenshot 2023-08-07 at 5 12 02 PM](https://private-user-images.githubusercontent.com/23662430/258927429-79ccb19d-3392-4ea9-993e-b006dc7481dc.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU3Mjg1MzIsIm5iZiI6MTcyNTcyODIzMiwicGF0aCI6Ii8yMzY2MjQzMC8yNTg5Mjc0MjktNzljY2IxOWQtMzM5Mi00ZWE5LTk5M2UtYjAwNmRjNzQ4MWRjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA3VDE2NTcxMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNmYTdlZmM4MjVkMzUxN2FmZTA2MjhlMTZjMjA0MTVkNmFjMjhiZTNhNzkxYTkwMTBmNzNmMzYzY2QwNTkxNWMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Dgx-dsXHck4UnHAi7_TTImtwKcOf_Zl2HUMwIy7lIbM)
The default text for the link is "Learn more" but you can provide custom link text by setting the announcement_url_text
in the html_context
:
html_context = {
"theme_announcement": "🎉 Custom announcement text!",
"announcement_url": "https://example.com",
"announcement_url_text": "Check it out",
}
The qiskit-ecosystem
theme includes the Qiskit Ecosystem logo by default.
You can use a custom logo by adding a logo file (SVG or PNG) as a sibling to your conf.py
, e.g. docs/logo.svg
. Then, set html_logo
in conf.py
to the name of the file, e.g. html_logo = "logo.png"
.
When using a custom logo, you may want to disable the project's name in the sidebar by setting sidebar_hide_name
in html_theme_options
:
html_theme_options = {
"sidebar_hide_name": True,
}
You can disable logos by setting disable_ecosystem_logo
in html_theme_options
:
html_theme_options = {
"disable_ecosystem_logo": True,
}
By default, the qiskit-ecosystem
theme uses purple as an accent color. Most projects should continue to use this, but certain highly IBM-affiliated projects like Qiskit IBM Runtime can change the accent color to blue by setting up conf.py
like this:
# Only intended for specific IBM projects.
html_theme_options = {
"light_css_variables": {
"color-brand-primary": "var(--qiskit-color-blue)",
}
}
In qiskit-sphinx-theme 1.13, we migrated to a new Sphinx theme called qiskit
, which is based on Furo from the pip, Black, and attrs documentation. See #232 for the motivation. qiskit-sphinx-theme 1.14 added the qiskit-ecosystem
theme for Ecosystem projects.
qiskit-sphinx-theme 1.13+ continues to support the legacy Pytorch theme, but support will be removed in version 2.0.
To migrate, in conf.py
:
- Ensure that
"qiskit_sphinx_theme"
is in theextensions
list. - Set
html_theme = "qiskit-ecosystem"
rather than"qiskit_sphinx_theme"
. (qiskit
should only be used by Qiskit Terra.) - Remove all
html_theme_options
. - Remove
expandable_sidebar
fromhtml_context
, if set. If it was set, follow the below section How to migrate expandable_sidebar.
Render the docs and check that everything looks how expected. If not, please open a GitHub issue or reach out on Slack for help.
With the old theme, to have expandable folders, you had to have a dedicated .. toctree ::
directive with a :caption:
option, like this:
.. toctree::
:caption: My Folder
:hidden:
Page 1 <page1>
Page 2 <page2>
Instead, the new theme will render the :caption:
as a top-level section header in the left sidebar, with top-level entries for each page. See the screenshot in the PR description of #384 for an example of how the old theme renders :caption:
and compare to the new theme.
Additionally, the new theme renders pages with their own subpages as expandable folders, unlike the old theme. For example, <apidocs/index>
will include all subpages that are listed in the .. toctree ::
of the page apidocs/index.rst
.
So, when migrating, you have to decide which behavior you want:
- Use the new theme's style. No changes necessary.
- Use the new theme's style, but get rid of the top level section header. To implement:
- Consolidate the
.. toctree ::
directive with earlier ones so that they are all in the sametoctree
.
- Consolidate the
- Keep the
:caption:
as an expandable folder, rather than a top-level section header. To implement:- Create a new directory and RST file like
my_folder/index.rst
. - Move the
.. toctree::
directive to that page. - Get rid of the
:caption:
option. - Link to the new file
my_folder/index.rst
in the parentindex.rst
by adding it to a.. toctree ::
in the parent.
- Create a new directory and RST file like
To keep UX/UI similar across different Qiskit packages, we encourage the following structure for you sidebar, which can be set in the toctree of your index.rst
:
.. toctree::
:hidden:
Documentation Home <index>
Getting Started <getting_started>
Tutorials <tutorials/index>
How-to Guides <how_to/index>
API Reference <apidocs/index>
Explanations <explanations/index>
Release Notes <release_notes>
GitHub <https://github.com/your-repo>
Each item in the toctree corresponds to a single .rst
file, and can use internal links or external. External links will have a "new tab" icon rendered next to them.