gitbook生成html页面去除导航栏广告及修改页面Title

gitbook生成html页面去除导航栏广告及修改页面Title

在使用gitbook生成html后会发现左侧导航栏底部有“Published With GitBook”样式的广告，点击将跳转至gitbook官网。并且页面上的Title发现后面跟随的也是.GitBook。虽然我们想用，但是我们不想帮他打广告怎么办？那就去掉它。

1. 修改页面Title

修改页面Title很简单，只需在项目文件夹(SUMMARY.md文件所在位置)内新建book.json文件，在文件内添加"title": "自定义Title"即可。此文件中的"plugins":["expandable-chapters"] 是设置导航栏跳转及折叠时写入的配置。配置导航栏跳转及折叠可点击跳转查看操作步骤。

设置完成后执行gitbook build进行构建，执行gitbook serve进行本地运行。

此时发现左上角的页面Title不再是GitBook，而是我们自定义的Title内容。

2. 去除导航栏Published With GitBook 广告

在项目文件夹(SUMMARY.md文件所在位置)创建_layouts->website->summary.html 在summary.html文件并写入以下代码。

{% macro articles(_articles) %}
    {% for article in _articles %}
        <li class="chapter {% if article.path == file.path and not article.anchor %}active{% endif %}" data-level="{{ article.level }}" {% if article.path %}data-path="{{ article.path|resolveFile }}"{% endif %}>
            {% if article.path and getPageByPath(article.path) %}
                <a href="{{ article.path|resolveFile }}{{ article.anchor }}">
            {% elif article.url %}
                <a target="_blank" href="{{ article.url }}">
            {% else %}
                <span>
            {% endif %}
                    {% if article.level != "0" and config.pluginsConfig['theme-default'].showLevel %}
                        <b>{{ article.level }}.</b>
                    {% endif %}
                    {{ article.title }}
            {% if article.path  or article.url %}
                </a>
            {% else %}
                </span>
            {% endif %}

            {% if article.articles.length > 0 %}
            <ul class="articles">
                {{ articles(article.articles, file, config) }}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
{% endmacro %}

<ul class="summary">
    {% set _divider = false %}
    {% if config.links.sidebar  %}
    {% for linkTitle, link in config.links.sidebar  %}
        {% set _divider = true %}
        <li>
            <a href="{{ link }}" target="_blank" class="custom-link">{{ linkTitle }}</a>
        </li>
    {% endfor %}
    {% endif %}

    {% if _divider %}
    <li class="divider"></li>
    {% endif %}

    {% for part in summary.parts %}
        {% if part.title %}
        <li class="header">{{ part.title }}</li>
        {% elif not loop.first %}
        <li class="divider"></li>
        {% endif %}
        {{ articles(part.articles, file, config) }}
    {% endfor %}

    <li class="divider"></li>

    <!--<li>-->
        <!--<a href="https://www.gitbook.com" target="blank" class="gitbook-link">-->
            <!--{{ "GITBOOK_LINK"|t }}-->
        <!--</a>-->
    <!--</li>-->
</ul>

之后执行gitbook build进行构建，执行gitbook serve进行本地运行。此时发现导航栏底部的广告不见了。若想将广告替换为自家网站的介绍可将上述代码中注释部分放开，并修改为自家网址。