跳转至

友情链接

yangzhang's Site

给我也整一个！

整一个与本站类似的网站

❤首先谢谢频幕前的你对我的认同，话不多说，开整！

准备

pip install mkdocs-materialpip install mkdocs-rss-pluginpip install mkdocs-git-revision-date-localized-plugin

之后运行以下命令即可预览

mkdocs server

Tip

mkdocs server运行后不会自动中止进程，使用Ctrl+C即可强行终止进程。 进程开始后， 大部分 的网页的修改会同步跟新到网页，不需要重新启动。

部署

  1. 创建一个Github账号
  2. 按照GitHub Pages创建仓库
  3. 按照使用GitHub Actions workflow 推送仓库
  4. 按照国内访问解析网页

自定义

大部分设置可参考Customization 这里对我加入的进行说明

首页头像

可修改docs/index.md中的图片和文字

<div class="flip-container">
<div class="image-container">
    <!-- docs/assets/images/logo_noBG_circle.png -->
    <img src="https://s2.loli.net/2025/01/09/ve1piNRt6M5ycDQ.png" alt="Front Image">
    <a href="/template/" >
        <!-- docs/assets/images/self_shoot.png -->
        <img src="https://s2.loli.net/2025/01/09/wOzTR9Kyfq2jMHo.png" alt="Back Image">
    </a>
</div>
<div class="hover-block">
    点我看看!
</div>
</div>

.flip-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 10px auto;
    display: flex;
    align-items: flex-start;
    /* 对齐顶部 */
    justify-content: flex-end;
    /* 将文字放置右上角 */
}

/*more...*/

友情链接

可修改overrides/main.html中的图片和链接

{% block site_nav %}
<!-- Navigation -->
{% if nav %}
{% if page.meta and page.meta.hide %}
{% set hidden = "hidden" if "navigation" in page.meta.hide %}
{% endif %}
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" {{ hidden }}>
    <div class="md-sidebar__scrollwrap">
        <div class="md-sidebar__inner">
            {% include "partials/nav.html" %}
        </div>
    </div>
</div>

{% endif %}

<!-- Table of contents -->
{% if "toc.integrate" not in features %}
{% if page.meta and page.meta.hide %}
{% set hidden = "hidden" if "toc" in page.meta.hide %}
{% endif %}
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" {{ hidden }}>
    <div class="md-sidebar__scrollwrap">
        <div class="md-sidebar__inner">
            {% include "partials/toc.html" %}
        </div>
        <div class="card-container">
            <h3>友情链接</h3>
            <div class="card">
                <div class="img-container">
                    <a href="https://yangzhang.site/" target="_blank">
                        <img src="https://yangzhang.site/assets/images/summation.png"
                            style="width: 70%; height: 70%; object-fit: contain;">
                    </a>
                </div>
                <div class="content">
                    <a href="https://yangzhang.site/" target="_blank">
                        <h3>yangzhang's Site</h3>
                    </a>
                </div>
            </div>
        </div>

    </div>
</div>
{% endif %}
{% endblock %}

.card-container {
margin: 50px 0 0 0;
display: flex;
flex-flow: row wrap;
flex-wrap: wrap;
align-content: flex-start;
text-align: center;
}
/*...see more */

extra_css:
    - css/float_cards.css

评论