跳转至

Zensical自定义

环境搭建

升级uv

# uv self update
#

info: Checking for updates...
success: Upgraded uv from v0.9.18 to v0.9.22! https://github.com/astral-sh/uv/releases/tag/0.9.22

升级zensical

  1. 检查当前版本

    uv pip list
    输出
    Package            Version
------------------ -------
click              8.3.1
colorama           0.4.6
cyclic             1.0.0
deepmerge          2.0
markdown           3.10
mdx-include        1.4.2
pygments           2.19.2
pymdown-extensions 10.19.1
pyyaml             6.0.3
rcslice            1.1.0
stepslist          0.7.5
zensical           0.0.13

  2. 管理依赖项，即升级到zensical最新版本

    uv add "zensical>0.0.13" --upgrade-package zensical
    输出
    Resolved 13 packages in 1.27s
Prepared 1 package in 499ms
Uninstalled 1 package in 4.90s
Installed 1 package in 5.31s
- zensical==0.0.13
+ zensical==0.0.15

激活虚拟环境

.\.venv\Scripts\activate

zensical初始化

zensical new .

构建网站

zensical build --clean && zensical serve -o

自定义

添加stepslist插件

  1. 添加插件包

    uv add stepslist

  2. 编辑zensical.toml,添加以下内容到最后

    # Plugins
# add 2026.01.09 21:08
[project.markdown_extensions.stepslist]

# admonition
[project.markdown_extensions.admonition]
[project.markdown_extensions.pymdownx.details]
[project.markdown_extensions.pymdownx.superfences]

# code blocks
[project.markdown_extensions.pymdownx.highlight]
anchor_linenums = true
line_spans = "__span"
pygments_lang_class = true
[project.markdown_extensions.pymdownx.inlinehilite]
[project.markdown_extensions.pymdownx.snippets]

  3. 编辑CSS文件

    extra_css = ["/assets/styles/custom_stepslist.css"]

    /* Define brand */
:root,
[data-md-color-scheme="default"] {
    --md-default-bg-color: rgb(250, 250, 250);
    --md-primary-fg-color: rgb(255, 255, 255);
    --md-bg-color: rgb(233, 236, 251);
    --md-primary-fg-color--light: #5FFFD7;
    --md-primary-fg-color--dark: #E549FF;
    --md-primary-bg-color: rgba(0, 0, 0, .75);
    --md-primary-bg-color--light: rgba(0, 0, 0, .54);
    --md-accent-fg-color: #E549FF;
    --pg-light-border: rgb(229, 231, 235);
    --hb-hero-color: rgb(45, 45, 45);
}

:root,
[data-md-color-scheme="slate"] {
    --md-default-bg-color: rgb(26, 26, 27);
    --md-primary-fg-color: rgb(15, 15, 15);
    --md-primary-fg-color--light: #5FFFD7;
    --md-primary-fg-color--dark: #FCDB17;
    --md-primary-bg-color: rgba(0, 0, 0, .75);
    --md-primary-bg-color--light: rgba(0, 0, 0, .54);
    --md-accent-fg-color: #FCDB17;
    --pg-light-border: rgb(47, 47, 47);
    --hb-hero-color: #5FFFD7;
    /* --md-footer-bg-color--dark: var(--md-default-bg-color); */
}

/* Better contrast link colors */
[data-md-color-scheme="default"]>* {
    --md-typeset-a-color: #00B1BB;
}

[data-md-color-scheme="slate"]>* {
    --md-typeset-a-color: #5FFFD7;
}


/* || ------ CUSTOM STEPS LIST ------ */
.md-steps ol {
    margin: 0 !important;
    --bullet-size: calc(1.6 * 1rem);
    --bullet-margin: 0.375rem;
    list-style: none;
    counter-reset: counter(steps-counter) var(--sl-steps-start, 0);
    padding-inline-start: 0;
}

.md-steps>ol>li {
    margin: 0 !important;
    counter-increment: steps-counter;
    position: relative;
    padding-inline-start: calc(var(--bullet-size) + 1rem);
    padding-bottom: 1px;
    min-height: calc(var(--bullet-size) + var(--bullet-margin))
}

.md-steps>ol>li::before {
    content: counter(steps-counter);
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: var(--bullet-size);
    height: var(--bullet-size);
    line-height: var(--bullet-size);
    font-size: var(--md-300);
    font-weight: 600;
    text-align: center;
    color: var(--md-primary-fg-color--dark);
    background-color: var(--md-bg-color);
    border-radius: 99rem;
    box-shadow: inset 0 0 0 1px var(--md-primary-fg-color--dark);
}

[data-md-color-scheme="slate"] .md-steps>ol>li::before {
    background-color: rgb(31, 34, 50);
    box-shadow: inset 0 0 0 1px var(--md-primary-fg-color--dark);
}

.md-steps>ol>li:after {
    --guide-width: 1px;
    content: "";
    position: absolute;
    top: calc(var(--bullet-size) + (var(--bullet-margin)));
    bottom: var(--bullet-margin);
    inset-inline-start: calc((var(--bullet-size) - var(--guide-width)) / 2);
    width: var(--guide-width);
    background-color: var(--md-primary-fg-color--dark);
}

[data-md-color-scheme="slate"] .md-steps>ol>li:after {
    background-color: var(--md-primary-fg-color--dark);
}

去掉底栏、减少高度

custom_dir = "overrides"

<!-- Footer -->
<footer class="md-footer">

    <!-- Link to previous and/or next page -->
    {% if "navigation.footer" in features %}
    {% if page.previous_page or page.next_page %}
    {% if page.meta and page.meta.hide %}
    {% set hidden = "hidden" if "footer" in page.meta.hide %}
    {% endif %}
    <nav class="md-footer__inner md-grid" aria-label="{{ lang.t('footer') }}" {{ hidden }}>

        <!-- Link to previous page -->
        {% if page.previous_page %}
        {% set direction = lang.t("footer.previous") %}
        <a href="{{ page.previous_page.url | url }}" aria-label="{{ direction }}: {{ page.previous_page.title | e }}">
            <div class="md-footer__direction">
                ◀ {{ page.previous_page.title }}
            </div>
        </a>
        {% endif %}

        <!-- Link to next page -->
        {% if page.next_page %}
        {% set direction = lang.t("footer.next") %}
        <a href="{{ page.next_page.url | url }}" aria-label="{{ direction }}: {{ page.next_page.title | e }}">
            <div class="md-footer__direction">
                {{ page.next_page.title }} ▶
            </div>
        </a>
        {% endif %}
    </nav>
    {% endif %}
    {% endif %}

编辑zensical.toml符合自己的要求