teedoc other plugins

teedoc-plugin-markdown-parser: default markdown parsing plugin

Configure the plugin in site_config.json

    "plugins": {
        "teedoc-plugin-markdown-parser":{
            "from": "pypi",
            "config": {
                "toc_depth": 3
            }
        },
    }
  • toc_depth: The depth of the article table of contents (right column), the default is 3, which means to h3 that is ### three-level heading in markdown

teedoc-plugin-jupyter-notebook-parser: jupyter notebook parsing plugin

Configure the plugin in site_config.json

    "plugins": {
        "teedoc-plugin-jupyter-notebook-parser":{
            "from": "pypi",
            "config": {
            }
        }
    }

teedoc-plugin-search: Website search plugin

Let the website and documents support the search function, support the searched current document and the whole site search

To use, add to the plugins keyword in site_config.json:

"plugins": {
    "teedoc-plugin-search":{
        "from": "pypi",
        "config": {
            "search_hint": "Search"
        }
    }
}

The prompt content of different documents can be configured in the corresponding document config.json to facilitate multi-language support (internationalization/i18n). Of course, the plugin supports Chinese, English and Japanese by default, the translation is here, when it is not found by default, English will be used. Manually setting the following variables will overwrite the translation that comes with the plug-in

The supported configurations are as follows:

"teedoc-plugin-search":{
    "config": {
        "search_hint": "Search",
        "input_hint": "Enter keywords, separate multiple keywords with spaces",
        "loading_hint": "Loading, please wait...",
        "download_err_hint": "Failed to download the file, please refresh and try again or check the network",
        "other_docs_result_hint": "Results from other documents",
        "curr_doc_result_hint": "Current document search result"
    }
}
  • search_hint: the prompt message of the search box (button), the default is Search
  • input_hint: input hint information in the search box of the search page, default Keywords separated by space
  • loading_hint: Load the file prompt for searching, the default is Loading, wait please ...
  • download_err_hint: The download of the file required for the search fails, the user needs to refresh the browser to try again or the network environment cannot download the file, the default is Download error, please check network and refresh again
  • other_docs_result_hint: search result hint, search result in other documents, default Result from other docs
  • curr_doc_result_hint: search result hint, the search result in the currently browsed document, default Result from current doc

teedoc-plugin-baidu-tongji: Baidu Analytics

Add the code of Baidu Analytics on each page, send the visit information to Baidu, and you can see the visit statistics in the background

After registering and logging in to Baidu Statistics, add a website on the management page, and then there will be a code acquisition page with the following code

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?90c693aa2************c14a50bb49";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

Here is a string of keys 90c693aa2************c14a50bb49, copy this string of keys, and then add to the plugins keyword in site_config.json:

"plugins": {
    "teedoc-plugin-baidu-tongji":{
        "from": "pypi",
        "config": {
            "code": "Fill in the access key here"
        }
    }
}

After the website is deployed, you can see the visit information on the real-time visitor page of the Baidu statistics background

teedoc-plugin-comments-gitalk: gitalk comment plugin

gitalk is a comment tool based on the github issue question and answer system. Using gitalk, you don’t need to build your own server, you only need to register a github account , All the data will be put on the issue of a repository of github.

If you encounter a problem, here may have the answer you want

To use it, you need to add a plug-in in the site_config file

    "teedoc-plugin-gitalk": {
        "from": "pypi",
        "config": {
            "contrainer": "comments-container",
            "env": {
                "clientID": "********",
                "clientSecret": "********",
                "repo": "repo name",
                "owner": "orgnization name or user name",
                "admin": ["user names have write access"]
            }
        }
    }
  • contrainer: The container tag id that contains the comments, the default is comments-container, the document page and blog page in the teedoc-plugin-theme-default plugin contain this tag
  • env: gitalk js plugin configuration items, see here for more parameters.
    • clientID and clientSecret: You need to create a new application in github application to get ID and Secret
    • repo and owner: are the name and owner of the repository, for example, github.com/teedoc/teedoc.github.io is used here issue as a comment system, just fill in teedoc.github.io and teedoc
    • admin: is the name of the user who has write access to this repository
    • main_color: the main appearance color of comments, optional
    • second_color: the secondary appearance color of comments, optional

To open a comment on each page, the administrator needs to log in to gitalk to access the page, gitalk will automatically create an issue, and add the label Gitalk and the label url path, (the path characters are 50 characters in length limit). Of course, there are also methods for batch creation, which are not introduced here, and you can explore it yourself. Now issue can be created automatically

You can also manually create issue and specify the label Gitalk of issue (the first letter is capitalized), and then add another label page url path or custom id (the label is custom id then Need to set the page id on the page using this issue)

In addition to setting the env parameter in site_config, it can also be set in the article's metadata. Add a gitalk- prefix in front of the setting. For example, to set the title of the issue generated by gitalk, just You can set gitalk-title. Here are a few examples:

  • If you create an issue manually, you can specify the issue for a page, and specify the issue number in the metadata for the article
---
title: *****
gitalk-number: 2
---
  • Or create an issue manually first, specify the use of the specific label issue on the page, you can take a look at official example
---
title: *****
id: Demo
---

or

---
title: *****
gitalk-id: Demo
---

teedoc-plugin-assets: assets add plugin

You can freely add resources to the page through this plug-in, such as css and js resource files

For example, the path mapping of resource files has been added, and there are two files /static/css/custom.css and /static/css/custom.js, which need to be added to the head and tail of the page respectively. At the same time, I also hope to add a meta tag to the head

site_config.json:

{
    "route": {
            "assets": {
                "/static/": "static",
            },
        },
    "plugins": {
        "teedoc-plugin-assets":{
            "from": "pypi",
            "config": {
                "header_items": [
                    "/static/css/custom.css",
                    "<meta name=\"plugin-assets\" content=\"example meta item\">"
                ],
                "footer_items": [
                    "/static/css/custom.js"
                ],
                "env":{
                    "main_color": "#000000"
                }
            }
        },
    }
}

For css and js files, you can write url directly like this, or you can write a link at the beginning of http.

Here the variables in env will be replaced in the resource file, and used in the resource file by ${variable name}

custom.css:

a {
    color: ${main_color}
}

teedoc-plugin-google-translate: Google page translation plugin

The function is the same as that of the right mouse button of Chrome to translate this page

Before translation:

google translate

After translation:

google translate

"config": {
    "lang": "auto",
    "doc_types": ["page", "doc", "blog"],
    "domain": "/"
}
  • lang: The language of the page that needs to be translated. By default, it is not recommended to set it, or set it to the same locale of the document. For example, if locale is zh_CN, this can be set to zh-CN
  • doc_types: Which types of document pages should be displayed, 0 to 3 of ["page", "doc", "blog"],
  • domain: From which URL to download the source code of google translate, the default is "/", which means to download from this website, it can also be set to translate.google.com or translate.google.cn

    Mainly considering that some files cannot be downloaded without a proxy in China, it is actually necessary to request translate.googleapis.com. When making the plug-in, I found that even if it is set to translate.google.cn, there is a The js file requested a cleardot.gif file under the domain name of google.com, which caused the network request to be stuck for a long time until it timed out to load the translation, so the js file (element_main.js) was modified and Put it locally so that it can be accessed quickly. But this is also risky. Because the code and the code of the Google server are separated, in case Google updates the code one day, we also need to update it manually (although it will not change with a high probability), then welcome to update and modify. Submit PR