Skip to content

Install on MkDocs Material

Steps

1. Update mkdocs.yml

Add the CDN script and point to a custom overrides directory:

yaml
theme:
  name: material
  custom_dir: overrides
extra_javascript:
  - https://cdn.jsdelivr.net/npm/@axiomhq/do11y@latest/dist/do11y.min.js

2. Create the overrides template

Create overrides/main.html to inject the configuration meta tags:

html
{% extends "base.html" %}
{% block extrahead %}
  <meta name="axiom-do11y-domain" content="AXIOM_DOMAIN">
  <meta name="axiom-do11y-token" content="API_TOKEN">
  <meta name="axiom-do11y-dataset" content="DATASET_NAME">
  <meta name="axiom-do11y-framework" content="mkdocs-material">
{% endblock %}

Replace AXIOM_DOMAIN, API_TOKEN, and DATASET_NAME with your Axiom credentials.

See the MkDocs Material docs for more on theme overrides.

Advanced configuration

To use options beyond the basic credentials, add an inline script in overrides/main.html before the CDN script loads. Because extra_javascript entries load after the page, place the inline config in the extrahead block as well:

html
{% extends "base.html" %}
{% block extrahead %}
  <meta name="axiom-do11y-domain" content="AXIOM_DOMAIN">
  <meta name="axiom-do11y-token" content="API_TOKEN">
  <meta name="axiom-do11y-dataset" content="DATASET_NAME">
  <meta name="axiom-do11y-framework" content="mkdocs-material">
  <script>
    window.Do11yConfig = { scrollThresholds: [25, 50, 75, 100] };
  </script>
{% endblock %}

See the configuration reference for all available options.

Next steps

Released under the MIT License.