Skip to content

建站相关

约 917 个字 35 行代码 2 张图片 预计阅读时间 5 分钟

由于我更多需要的是一个可以供我随时随地打开的笔记，而不是一个博客性质的网站，因此我最终选择了mkdocs作为模板部署我的网站。

认真阅读此文档，相信你能成功

jobindjohn/obsidian-publish-mkdocs: A Template to Publish Obsidian/Foam Notes on Github Pages (uses MkDocs)

最好还是把这些弄好，以便可以实现本地调试

关于git一些基本操作

1
2
切换分支命令:
git checkout main

当你修改了仓库后，请执行以下三个命令来提交修改 注意，不用切换到gh-pages分支，在main分支push就好了 

1
2
3
git add .
git commit -m "The information you note"
git push

如果你commit错了，请reset取消commit 

1
git reset HEAD~1

如果push的时候报错了可以尝试取消代理 

1
2
3
4
//取消http代理
git config --global --unset http.proxy
//取消https代理 
git config --global --unset https.proxy

一般使用了如上操作都会成功，如果还是不行，请打开设置中的网络与Internet，选择代理，手动设置代理，将端口改为7890。 改端口.png 然后在git bash中输入 

1
git config --global http.proxy http://127.0.0.1:7890

Danger

此处因个人信息删除了添加域名的教程，如果有闲情搞这个我会补充回来

本地服务器

如果你不希望每次做一些小小的调试就push到仓库中再打开网站看是否成功，你应该先把mkdocs安装好，并在你的电脑上把使用到的插件都安装上，再在mkdocs.yml所在目录运行下列命令启动本地服务器。 

1
mkdocs serve
如果上面这个运行不了，请在前面加上python -m 
1
python -m mkdocs serve

有时候，在创建本地服务器过程中，会遇到PermissionError: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。的提示，这告诉我们端口已经被占用了。 如果你开着酷狗音乐，请将它关闭后重试，因为酷狗默认端口就是8000🤣 如果没有，可以尝试: 

1
netstat -ano|findstr 8000
来找到占用端口的PID，再taskill它来关闭 
1
taskkill /pid THEPIDYOUFIND /F

添加字数统计

参照鹤翔万里大神的readme文档安装插件

如果你和我一样，是在workflow中安装的，请在workflow的ci.yml文件中加入: 

1
 run: pip install mkdocs-statistics-plugin
实现每次push完都能够正确启用这个插件

在实际使用过程中，我也遭遇了html中的icon显示不出来的情况，查阅了mkdocs-material使用文档后，我发现需要在markdown_extensions中添加: 

1
2
3
4
5
markdown_extensions:
    - md_in_html
    - pymdownx.emoji:
            emoji_index: !!python/name:material.extensions.emoji.twemoji
            emoji_generator: !!python/name:material.extensions.emoji.to_svg

添加js背景粒子效果

  • https://github.com/VincentGarreau/particles.js/

下载 app.js, particles.js 。在 https://vincentgarreau.com/particles.js/#nasa 页面可以对粒子效果进行调整，调整完后将 json 内容复制到 app.js 中。

mkdocs 支持主题块覆写，我们在根目录创建一个 custom 文件夹，新建一个名为 main.html 的文件

文件命名必须要跟主题格式对齐，一般来讲覆写 main.html 就可以了

由于我们希望在所有网页的 body 块中都插入 <div id="particles-js"></div> ，我们找一个位于 body 中、且没有用处的 Block 进行覆盖，此处我选择的是 hero 块，其在 material for mkdocs 中似乎是用作公告的用途。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% extends "base.html" %}

{% block hero %}

{{ super() }}

<style type="text/css">
  #particles-js {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}
</style>
<div id="particles-js"></div>
<script src="{{ base_url }}/js/particles.js"></script>
<script src="{{ base_url }}/js/app.js"></script>

{% endblock %}

这里还要注意，使用 {{base_url}} 来确保 js 文件的路径。

最后，在 mkdocs.yml 中的 theme 栏中加上 custom_dir: 'custom' ，大功告成。

此时我们可以按 F12 查看网页源代码，搜索 particles，能够发现我们插入的这部分内容出现在 body 块中间。

Tips

  • 视频插入格式: 

    1
    ![type:video](image/帅头硬.mp4)

  • 图片调整大小:

1
![[Example.png]]{ width=200px }
空格格式不能改变

  • 图片居中 

    1
    <center>![[TSGraph.png]]</center>

  • 居中小图片 

    1
2
3
    <div style="text-align: center;">
<img src="img.png" width="50%" style="margin: 0 auto;">
</div>

Appendix

Note

Abstract

Info

Tip

Success

Question

Warning

Failure

Danger

Bug

Example

Quote

Comments: