MkDocs部分主题与流程图插件冲突的解决办法

最新推荐文章于 2024-06-09 09:36:18 发布

chuhanning9279

最新推荐文章于 2024-06-09 09:36:18 发布

阅读量717

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/3465063/blog/894791

版权

在MkDocs的使用-流程图、序列图中提到过MkDocs最终生成的html页面里使用了require.js，会与流程图插件使用的flowchart.js库产生冲突，除了更换主题，还有另一种解决冲突的办法，就是修改MkDocs主题中引入require.js文件的位置。

###以MkDocs 0.16.3版本的默认主题'mkdocs'为例

一、在自己的mkdocs项目目录创建theme目录

    cd  mk_prj
    mkdir theme
    cd theme

二、复制默认主题‘mkdocs’的base.html文件到前一步创建的theme目录里，默认主题路径在python安装路径下的site-packages/mkdocs/themes/mkdocs目录里

    cp /usr/lib/python2.7/site-packages/mkdocs/themes/mkdocs/base.html  .

三、找到base.html中以下两句代码并调整其位置

    <script data-main="{{ base_url }}/mkdocs/js/search.js" src="{{ base_url }}/mkdocs/js/require.js"></script>
    <script src="{{ base_url }}/js/base.js"></script>

四、 base.html文件的最终内容如下

    <!DOCTYPE html>
    <html lang="en">
        <head>
          {%- block site_meta %}
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            {% if page and page.is_homepage %}<meta name="description" content="{{ config['site_description'] }}">{% endif %}
            {% if config.site_author %}<meta name="author" content="{{ config.site_author }}">{% endif %}
            {% if page and page.canonical_url %}<link rel="canonical" href="{{ page.canonical_url }}">{% endif %}
            {% if config.site_favicon %}<link rel="shortcut icon" href="{{ base_url }}/{{ config.site_favicon }}">
            {% else %}<link rel="shortcut icon" href="{{ base_url }}/img/favicon.ico">{% endif %}
          {%- endblock %}

          {%- block htmltitle %}
            <title>{% if page and page.title and not page.is_homepage %}{{ page.title }} - {% endif %}{{ config.site_name }}</title>
          {%- endblock %}

          {%- block styles %}
            <link href="{{ base_url }}/css/bootstrap-custom.min.css" rel="stylesheet">
            <link href="{{ base_url }}/css/font-awesome-4.5.0.css" rel="stylesheet">
            <link href="{{ base_url }}/css/base.css" rel="stylesheet">
            <link rel="stylesheet" href="{{ base_url }}/css/highlight.css">
            {%- for path in extra_css %}
            <link href="{{ path }}" rel="stylesheet">
            {%- endfor %}
          {%- endblock %}

          {%- block libs %}
            <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
            <!--[if lt IE 9]>
                <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
                <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
            <![endif]-->
        
        <script src="{{ base_url }}/js/jquery-1.10.2.min.js"></script>
            <script src="{{ base_url }}/js/bootstrap-3.0.3.min.js"></script>
            <script src="{{ base_url }}/js/highlight.pack.js"></script>
          {%- endblock %}

          {%- block analytics %}
            {%- if config.google_analytics %}
            <script>
                (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

                ga('create', '{{ config.google_analytics[0] }}', '{{ config.google_analytics[1] }}');
                ga('send', 'pageview');
            </script>
            {%- endif %}
          {%- endblock %}
          
          {%- block extrahead %} {% endblock %}
        </head>

        <body{% if page and page.is_homepage %} class="homepage"{% endif %}>

            {% include "nav.html" %}

            <div class="container">
                {%- block content %}
                    <div class="col-md-3">{% include "toc.html" %}</div>
                    <div class="col-md-9" role="main">{% include "content.html" %}</div>
                {%- endblock %}
            </div>

            <footer class="col-md-12">
              {%- block footer %}
                <hr>
                {%- if config.copyright %}
                    <p>{{ config.copyright }}</p>
                {%- endif %}
                <p>Documentation built with <a href="http://www.mkdocs.org/">MkDocs</a>.</p>
              {%- endblock %}
            </footer>

          {%- block scripts %}
            <script>var base_url = '{{ base_url }}';</script>
            <script data-main="{{ base_url }}/mkdocs/js/search.js" src="{{ base_url }}/mkdocs/js/require.js"></script>
            <script src="{{ base_url }}/js/base.js"></script>
            {%- for path in extra_javascript %}
            <script src="{{ path }}"></script>
            {%- endfor %}
          {%- endblock %}

            {%- include "search-modal.html" %}

        </body>
    </html>
    {% if page and page.is_homepage %}
    <!--
    MkDocs version : {{ mkdocs_version }}
    Build Date UTC : {{ build_date_utc }}
    -->
    {% endif %}

五、修改mkdocs项目的配置文件mkdocs.yml，增加主题及主题目录的设置

site_name: My Docs
theme: 'mkdocs'
theme_dir: theme
extra_javascript:
    - https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js
    - https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js
    - https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js
    - https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.5/flowchart.min.js
    - js/umlconvert.js
markdown_extensions:
    - pymdownx.superfences

转载于:https://my.oschina.net/u/3465063/blog/894791

chuhanning9279

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
MkDocs部分主题与流程图插件冲突的解决办法

在MkDocs的使用-流程图、序列图中提到过MkDocs最终生成的html页面里使用了require.js，会与流程图插件使用的flowchart.js库产生冲突，除了更换主题，还有另一种解决冲突的办法，就是修改MkDocs主题中引入require.js文件的位置。###以MkDocs 0....
复制链接

扫一扫