mirror of
https://github.com/Wcowin/Mkdocs-Wcowin.git
synced 2025-07-20 08:56:35 +00:00
合并来自W1ndys/main的拉取请求#9
使用软编码配置友链界面（类似Hexo博客的butterfly主题的配置方法）
This commit is contained in:
GitHub
commit
5b41d359a5
@ -1 +1 @@
|
||||
{"cache_date": "2024-04-06", "page_authors": {}}
|
||||
{"cache_date": "2024-04-11", "page_authors": {}}
|
||||
1
Mkdocs-serve.bat
Normal file
1
Mkdocs-serve.bat
Normal file
@ -0,0 +1 @@
|
||||
mkdocs serve
|
||||
21
docs/_data/link.yaml
Normal file
21
docs/_data/link.yaml
Normal file
@ -0,0 +1,21 @@
|
||||
# 友链列表
|
||||
friends:
|
||||
- name: Wcowin's Web
|
||||
link: https://wcowin.work/
|
||||
avatar: https://s2.loli.net/2024/02/01/gaE47y5fKM6kosV.png
|
||||
description: 循此苦旅，以达星辰
|
||||
- name: W1ndysの小屋
|
||||
link: https://blog.w1ndys.top/
|
||||
avatar: https://blog.w1ndys.top/img/about/avatar.png
|
||||
description: 欲戴皇冠，必承其重
|
||||
|
||||
# 失联列表
|
||||
gone:
|
||||
- name: 失联的友链1
|
||||
link: https://wcowin.com/
|
||||
avatar: /img/wcowin.png
|
||||
description: 失联的友链1
|
||||
- name: 失联的友链2
|
||||
link: https://wcowin.com/
|
||||
avatar: /img/wcowin.png
|
||||
description: 失联的友链2
|
||||
@ -2,388 +2,33 @@
|
||||
title: 友链
|
||||
comments: true
|
||||
hide:
|
||||
# - navigation # 显示右
|
||||
# - toc #显示左
|
||||
# - navigation # 显示右
|
||||
# - toc #显示左
|
||||
- footer
|
||||
- feedback
|
||||
---
|
||||
|
||||
<div class="markdown-content">
|
||||
<h2>欢迎加入友链(不分先后)</h2>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="links-content">
|
||||
<div class="link-navigation">
|
||||
<div class="card">
|
||||
<img class="ava" src="https://s2.loli.net/2024/02/01/gaE47y5fKM6kosV.png" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://wcowin.work/ " target="_blank">Wcowin's Web</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
“循此苦旅，以达星辰”
|
||||
</div>
|
||||
</div>
|
||||
<div class="links-content">
|
||||
<div class="link-navigation">
|
||||
{% for friend in link.friends %}
|
||||
<div class="card">
|
||||
<img class="ava" src="{{ friend.avatar }}" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="{{ friend.link }}" target="_blank">{{ friend.name }}</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
{{ friend.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://s2.loli.net/2024/02/07/S8GYheTZmCU96HK.png" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://wcowin.work/WH-WKW/" target="_blank">小王和王老师的小站</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
无一是你，无一不是你
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://xpmrobot.tech/images/portrait.jpg" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://xpmrobot.tech/" target="_blank">Xpm's Robot Lab</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
星星之火可以燎原
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://www.crant.cn/upload/Avatar.png" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://www.crant.cn/" target="_blank">Crant</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
用心记录，美好生活
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src=" https://finisky.github.io/images/avatar.png" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://finisky.github.io/" target="_blank">Finisky Garden</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
互联网技术那些事儿
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://mungeryang.github.io/images/avatar.png?v=1696728951294" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://mungeryang.github.io/" target="_blank">Munger yang's Blog</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
Mungeryang写字的地方
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://img.ixintu.com/upload/jpg/20210524/3a8cbb0f2da716313a3b18984a9ffe73_78863_800_772.jpg!con" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://wcowin.work/myhexo/" target="_blank">Myhexo</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
Wcowin的个人Hexo网站
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://gravatar.cdn.iszy.xyz/avatar/5012e410377c7a93d14f7bf31aeeb7fd?d=mm" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://www.iszy.cc/" target="_blank">随遇而安</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
生活吐槽＆学习记录
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://s2.loli.net/2024/02/01/NcLn4XdMWQKV37f.jpg" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://qiuyuair.com" target="_blank">Qiuyuair的自留地</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
Airyu’s Site
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://www.gkcoll.xyz/favicon.ico" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://www.gkcoll.xyz/" target="_blank">极客藏源</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
探索互联网新大陆 in N ways.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://s2.loli.net/2024/02/01/2Ju6y1fmpWDUBaz.jpg" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://www.cnblogs.com/miluluyo/" target="_blank">麋鹿鲁哟</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
大道至简，知易行难
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://image.h4ck.org.cn/wp-content/uploads/2023/11/gh_84aaef91c283_430-1.jpg" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://h4ck.org.cn/" target="_blank">obaby@mars</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
爱好广泛的火星小妖精
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://www.yaguwu.com/1.png" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://www.yaguwu.com/" target="_blank">雅故小筑</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
寻一处小筑，不遇车马喧器
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://www.styg.org.cn/zb_users/upload/2024/01/202401261706277157705448.png" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://www.styg.org.cn/" target="_blank">温岭慈善义工石塘服务队</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
慈善义工在行动
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://www.luckyzh.cn/avatar.jpg" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://www.luckyzh.cn/" target="_blank">旧梦</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
冰冻三尺非一日之寒
|
||||
滴水穿石非一日之功
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://qkongtao.cn/file/images/favicon.png" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://qkongtao.cn/" target="_blank">左眼会陪右眼哭の博客</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
干嘛这么想不开，要在脸上贴个输字！
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://www.zair.top/img/logo.png" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://www.zair.top/" target="_blank">以太工坊</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
分享我的学习笔记、经验与有趣的小玩意.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://ymh0000123.github.io/picture/picture/6.png" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://xiaofeishu-boke.netlify.app/" target="_blank">没用的小废鼠的Blog</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
做学问可不是赶潮流、没有冷门热门之说。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://ejsoon.win/wp-content/uploads/2022/08/alogobg.png" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://ejsoon.win" target="_blank">天蒼人頡</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
發掘好玩事物
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://npm.onmicrosoft.cn/hrn-img@1.0.0/img/avatar.jpg" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://blog.lvhrn.cn" target="_blank">JayHrn</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
發掘好玩事物
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://www.langhai.net/assets/images/langhai-logo.png" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://www.langhai.net/" target="_blank">浪海导航</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
浪海导航 ~ 收录各种类型的博客
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://blog.moraxyc.com/avatar.png" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://moraxyc.com" target="_blank">Moraxyc’s Rhapsody</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
永远热爱！
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://pic.vimin.cc/logo.png" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://vimin.cc/" target="_blank">XIAOMING'S BLOG</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
记录生活点滴，谱写精彩生活！
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://fastly.jsdelivr.net/gh/wkk-dev/cdn@master/png/kang-qq.jpg" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://blog.wkk-dev.top" target="_blank">WKK & Blog</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
天生我材必有用，千金散尽还复来。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://bu.dusays.com/2022/12/28/63ac2812183aa.png
|
||||
" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://blog.zhheo.com/" target="_blank">张洪Heo</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
分享设计与科技生活
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://blog.lichenghao.cn/avatar.svg" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://blog.lichenghao.cn" target="_blank">故事的程序猿</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
好好学习，天天向上↑
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://ovo.btwoa.com/btwoa.jpg" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://blog.btwoa.com" target="_blank">btwoa</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
世界为你简单
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://blog.linsnow.cn/img/avatar.png" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://blog.linsnow.cn" target="_blank">L1nSn0w's Blog</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
无限进步.🎈
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://blog.whispery.cn/img/tou.png" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://blog.whispery.cn/" target="_blank">Whisper</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<img class="ava" src="https://note.isshikih.top/_assets/iro/IroPatch_Brown.png" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://note.isshikih.top/" target="_blank">IsshikiHugh's Notebook</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
我们登上高塔，看到的却只有黑夜。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://bu.dusays.com/2023/12/23/65867c3357bb6.jpg" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://kegongteng.cn/" target="_blank">Kegongteng</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
Blogger / Technophile / Student
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://s2.loli.net/2024/03/31/Ht3QBqhgLYNAuwj.png" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://lennychen.top/" target="_blank">Lenny's Web</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
天地不仁，以万物为刍狗
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="ava" src="https://i.postimg.cc/MGCXBFxn/logo.png" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="https://tkqtang.github.io" target="_blank">tkqtang’s Web</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
所谓自由，不是随心所欲，而是自我主宰
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#608DBD,direction:145,strength:15)" width="100%" color=#608DBD SIZE=1>
|
||||
@ -392,19 +37,21 @@ hide:
|
||||
<h2>失联人员</h2>
|
||||
</div>
|
||||
<div class="links-content">
|
||||
<div class="link-navigation">
|
||||
<div class="link-navigation">
|
||||
|
||||
<div class="card">
|
||||
<img class="ava" src="http://liis.cc/hy.png" />
|
||||
{% for gone in link.gone %}
|
||||
<div class="card">
|
||||
<img class="ava" src="{{gone.avatar}}" />
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<a href="http://liis.cc" target="_blank">郝宇博客</a>
|
||||
<a href="{{gone.link}}" target="_blank">{{gone.name}}</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
记录我的成长和青春
|
||||
{{gone.description}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -416,7 +63,7 @@ hide:
|
||||
</div>
|
||||
<div class="info">{description}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div> -->
|
||||
|
||||
<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#608DBD,direction:145,strength:15)" width="100%" color=#608DBD SIZE=1>
|
||||
|
||||
@ -424,20 +71,18 @@ hide:
|
||||
<h3>交换友链，请添加本站友链后下方留言申请，期望您的站点:</h3>
|
||||
</div>
|
||||
|
||||
|
||||
* 独立博客(不要求独立域名)，https，访问流畅
|
||||
* 原创内容为主，原创内容3篇以上
|
||||
* 处于活跃状态，有一定的更新频率
|
||||
* 建站一个月以上
|
||||
* 未添加友链或申请未通过，评论留言会被隐藏。
|
||||
- 独立博客(不要求独立域名)，https，访问流畅
|
||||
- 原创内容为主，原创内容 3 篇以上
|
||||
- 处于活跃状态，有一定的更新频率
|
||||
- 建站一个月以上
|
||||
- 未添加友链或申请未通过，评论留言会被隐藏。
|
||||
|
||||
本站已经加入[十年之约](https://www.foreverblog.cn/)：
|
||||
<a href="https://www.foreverblog.cn/" target="_blank" > <img src="https://img.foreverblog.cn/logo_en_default.png" alt="" style="width:auto;height:16px;"> </a>请放心添加本站友链
|
||||
|
||||
友链格式示例:
|
||||
|
||||
>名称: Wcowin's Web
|
||||
>链接: https://wcowin.work/
|
||||
>头像: https://s2.loli.net/2024/02/01/gaE47y5fKM6kosV.png
|
||||
>简介: 循此苦旅，以达星辰
|
||||
|
||||
> 名称: Wcowin's Web
|
||||
> 链接: https://wcowin.work/
|
||||
> 头像: https://s2.loli.net/2024/02/01/gaE47y5fKM6kosV.png
|
||||
> 简介: 循此苦旅，以达星辰
|
||||
|
||||
@ -4,6 +4,8 @@ tags:
|
||||
- Mkdocs
|
||||
---
|
||||
|
||||
> 下面全部内容把】改成}，把【改成{
|
||||
|
||||
!!! info
|
||||
官方网站：[MkDocs](https://www.mkdocs.org/){target=“_blank”}
|
||||
|
||||
@ -118,7 +120,7 @@ jobs:
|
||||
- run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV
|
||||
- uses: actions/cache@v3
|
||||
with:
|
||||
key: mkdocs-material-${{ env.cache_id }}
|
||||
key: mkdocs-material-$【【 env.cache_id 】】 # 此处把【【】】改成`{``{``}``}`（只有英文大括号）
|
||||
path: .cache
|
||||
restore-keys: |
|
||||
mkdocs-material-
|
||||
|
||||
@ -10,6 +10,9 @@ tags:
|
||||
- Mkdocs
|
||||
comments: false #评论，默认不开启
|
||||
---
|
||||
|
||||
> 下面全部内容把】改成}，把【改成{
|
||||
|
||||
|
||||
|
||||
docs/overrides下新建main.html ，针对main.html文件
|
||||
@ -33,33 +36,33 @@ $ tree -a
|
||||
```
|
||||
|
||||
```html
|
||||
{#-
|
||||
【#-
|
||||
This file was automatically generated - do not edit
|
||||
-#}
|
||||
{% extends "base.html" %}
|
||||
{% block extrahead %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/custom.00c04c01.min.css' | url }}">
|
||||
{% endblock %}
|
||||
{% block announce %}
|
||||
-#】
|
||||
【% extends "base.html" %】
|
||||
【% block extrahead %】
|
||||
<link rel="stylesheet" href="【【 'assets/stylesheets/custom.00c04c01.min.css' | url 】】">
|
||||
【% endblock %】
|
||||
【% block announce %】
|
||||
Follow <strong>@Wcowin</strong> on
|
||||
<a rel="me" href="https://space.bilibili.com/1407028951?spm_id_from=333.1007.0.0">
|
||||
<span class="twemoji bilibili">
|
||||
{% include ".icons/fontawesome/brands/bilibili.svg" %}
|
||||
【% include ".icons/fontawesome/brands/bilibili.svg" %】
|
||||
</span>
|
||||
<strong>Bilibili</strong>
|
||||
</a>
|
||||
and
|
||||
<a href="https://twitter.com/Wcowin_">
|
||||
<span class="twemoji twitter">
|
||||
{% include ".icons/fontawesome/brands/twitter.svg" %}
|
||||
【% include ".icons/fontawesome/brands/twitter.svg" %】
|
||||
</span>
|
||||
<strong>Twitter</strong>
|
||||
</a>
|
||||
{% endblock %}
|
||||
{% block scripts %}
|
||||
{{ super() }}
|
||||
<script src="{{ 'assets/javascripts/custom.9458f965.min.js' | url }}"></script>
|
||||
{% endblock %}
|
||||
【% endblock %】
|
||||
【% block scripts %】
|
||||
【【 super() 】】
|
||||
<script src="【【 'assets/javascripts/custom.9458f965.min.js' | url 】】"></script>
|
||||
【% endblock %】
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -4,33 +4,39 @@ comments: true
|
||||
tags:
|
||||
- Mkdocs
|
||||
---
|
||||
官方文档：[Adding a comment system](https://squidfunk.github.io/mkdocs-material/setup/adding-a-comment-system/)
|
||||
|
||||
> 下面全部内容把】改成}，把【改成{
|
||||
|
||||
官方文档：[Adding a comment system](https://squidfunk.github.io/mkdocs-material/setup/adding-a-comment-system/)
|
||||
|
||||
这里我同样推荐[giscus](https://giscus.app/zh-CN)
|
||||
|
||||
|
||||
利用 GitHub Discussions 实现的评论系统，让访客借助 GitHub 在你的网站上留下评论和反应吧！本项目深受 utterances 的启发。
|
||||
|
||||
* 开源。🌏
|
||||
* 无跟踪，无广告，永久免费。📡 🚫
|
||||
* 无需数据库。所有数据均储存在 GitHub Discussions 中。:octocat:
|
||||
* 支持自定义主题！🌗
|
||||
* 支持多种语言。🌐
|
||||
* 高可配置性。🔧
|
||||
* 自动从 GitHub 拉取新评论与编辑。🔃
|
||||
* 可自建服务！🤳
|
||||
- 开源。🌏
|
||||
- 无跟踪，无广告，永久免费。📡 🚫
|
||||
- 无需数据库。所有数据均储存在 GitHub Discussions 中。:octocat:
|
||||
- 支持自定义主题！🌗
|
||||
- 支持多种语言。🌐
|
||||
- 高可配置性。🔧
|
||||
- 自动从 GitHub 拉取新评论与编辑。🔃
|
||||
- 可自建服务！🤳
|
||||
|
||||
言归正传
|
||||
|
||||
## 第一步
|
||||
mkdocs.yml中添加
|
||||
|
||||
mkdocs.yml 中添加
|
||||
|
||||
```
|
||||
theme:
|
||||
name: material
|
||||
custom_dir: docs/overrides #主要是这一行
|
||||
```
|
||||
参考下图新建overrides文件，在此文件下参考下图新建覆盖html文件
|
||||
树状结构如下:
|
||||
|
||||
参考下图新建 overrides 文件，在此文件下参考下图新建覆盖 html 文件
|
||||
树状结构如下:
|
||||
|
||||
```
|
||||
$ tree -a
|
||||
.
|
||||
@ -47,17 +53,18 @@ $ tree -a
|
||||
│ └──comments.html
|
||||
│
|
||||
└── mkdocs.yml
|
||||
```
|
||||
```
|
||||
|
||||
|
||||
|
||||
在comments.html中
|
||||
在 comments.html 中
|
||||
|
||||
```html hl_lines="4-18"
|
||||
{% if page.meta.comments %}
|
||||
<h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
|
||||
<!-- Insert generated snippet here -->
|
||||
<script src="https://giscus.app/client.js"
|
||||
【% if page.meta.comments %】
|
||||
<h2 id="__comments">【【 lang.t("meta.comments") 】】</h2>
|
||||
<!-- Insert generated snippet here -->
|
||||
<script
|
||||
src="https://giscus.app/client.js"
|
||||
data-repo="你的仓库名称（如Wcowin/hexo-site-comments）"
|
||||
data-repo-id=" "
|
||||
data-category=" "
|
||||
@ -70,74 +77,78 @@ $ tree -a
|
||||
data-theme="preferred_color_scheme"
|
||||
data-lang="zh-CN"
|
||||
crossorigin="anonymous"
|
||||
async>
|
||||
async
|
||||
></script>
|
||||
<!-- Synchronize Giscus theme with palette -->
|
||||
<script>
|
||||
var giscus = document.querySelector("script[src*=giscus]")
|
||||
|
||||
// Set palette on initial load
|
||||
var palette = __md_get("__palette")
|
||||
if (palette && typeof palette.color === "object") 【
|
||||
var theme = palette.color.scheme === "slate"
|
||||
? "transparent_dark"
|
||||
: "light"
|
||||
|
||||
// Instruct Giscus to set theme
|
||||
giscus.setAttribute("data-theme", theme)
|
||||
】
|
||||
|
||||
// Register event handlers after documented loaded
|
||||
document.addEventListener("DOMContentLoaded", function() 【
|
||||
var ref = document.querySelector("[data-md-component=palette]")
|
||||
ref.addEventListener("change", function() 【
|
||||
var palette = __md_get("__palette")
|
||||
if (palette && typeof palette.color === "object") 【
|
||||
var theme = palette.color.scheme === "slate"
|
||||
? "transparent_dark"
|
||||
: "light"
|
||||
|
||||
// Instruct Giscus to change theme
|
||||
var frame = document.querySelector(".giscus-frame")
|
||||
frame.contentWindow.postMessage(
|
||||
【 giscus: 【 setConfig: 【 theme 】 】 】,
|
||||
"https://giscus.app"
|
||||
)
|
||||
】
|
||||
】)
|
||||
】)
|
||||
</script>
|
||||
<!-- Synchronize Giscus theme with palette -->
|
||||
<script>
|
||||
var giscus = document.querySelector("script[src*=giscus]")
|
||||
|
||||
// Set palette on initial load
|
||||
var palette = __md_get("__palette")
|
||||
if (palette && typeof palette.color === "object") {
|
||||
var theme = palette.color.scheme === "slate"
|
||||
? "transparent_dark"
|
||||
: "light"
|
||||
|
||||
// Instruct Giscus to set theme
|
||||
giscus.setAttribute("data-theme", theme)
|
||||
}
|
||||
|
||||
// Register event handlers after documented loaded
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var ref = document.querySelector("[data-md-component=palette]")
|
||||
ref.addEventListener("change", function() {
|
||||
var palette = __md_get("__palette")
|
||||
if (palette && typeof palette.color === "object") {
|
||||
var theme = palette.color.scheme === "slate"
|
||||
? "transparent_dark"
|
||||
: "light"
|
||||
|
||||
// Instruct Giscus to change theme
|
||||
var frame = document.querySelector(".giscus-frame")
|
||||
frame.contentWindow.postMessage(
|
||||
{ giscus: { setConfig: { theme } } },
|
||||
"https://giscus.app"
|
||||
)
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
{% endif %}
|
||||
【% endif %】
|
||||
```
|
||||
## 第二步
|
||||
打开<https://giscus.app/zh-CN> 走完这个页面的流程就会得到(这会在你的Github创建新的仓库，建议自己先去新建个 Discussions)
|
||||
|
||||
|
||||
|
||||
## 第二步
|
||||
|
||||
打开<https://giscus.app/zh-CN> 走完这个页面的流程就会得到(这会在你的 Github 创建新的仓库，建议自己先去新建个 Discussions)
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<script src="https://giscus.app/client.js"
|
||||
data-repo="[在此输入仓库]"
|
||||
data-repo-id="[在此输入仓库 ID]"
|
||||
data-category="[在此输入分类名]"
|
||||
data-category-id="[在此输入分类 ID]"
|
||||
data-mapping="pathname"
|
||||
data-strict="0"
|
||||
data-reactions-enabled="1"
|
||||
data-emit-metadata="0"
|
||||
data-input-position="bottom"
|
||||
data-theme="preferred_color_scheme"
|
||||
data-lang="zh-CN"
|
||||
crossorigin="anonymous"
|
||||
async>
|
||||
</script>
|
||||
<script
|
||||
src="https://giscus.app/client.js"
|
||||
data-repo="[在此输入仓库]"
|
||||
data-repo-id="[在此输入仓库 ID]"
|
||||
data-category="[在此输入分类名]"
|
||||
data-category-id="[在此输入分类 ID]"
|
||||
data-mapping="pathname"
|
||||
data-strict="0"
|
||||
data-reactions-enabled="1"
|
||||
data-emit-metadata="0"
|
||||
data-input-position="bottom"
|
||||
data-theme="preferred_color_scheme"
|
||||
data-lang="zh-CN"
|
||||
crossorigin="anonymous"
|
||||
async
|
||||
></script>
|
||||
```
|
||||
|
||||
复制将此代码，替换最上面👆🏻comments.html中高亮的代码
|
||||
复制将此代码，替换最上面 👆🏻comments.html 中高亮的代码
|
||||
|
||||
终端里`mkdocs server`一下
|
||||
|
||||
## 最后
|
||||
|
||||
在你想插入评论的地方的元数据：`comments: true `
|
||||
|
||||
```
|
||||
@ -147,13 +158,14 @@ hide:
|
||||
# - navigation # 显示右
|
||||
# - toc #显示左
|
||||
# - footer
|
||||
# - feedback
|
||||
# - feedback
|
||||
comments: true #默认不开启评论
|
||||
---
|
||||
```
|
||||
## 效果
|
||||
|
||||
完美!快速相应
|
||||
## 效果
|
||||
|
||||
完美!快速相应
|
||||
|
||||
<figure markdown >
|
||||
|
||||
@ -167,27 +179,42 @@ comments: true #默认不开启评论
|
||||
去看它的官方配置文档很简单就配置好了
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous" />
|
||||
<script defer="" src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
|
||||
<script defer="" src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"></script>
|
||||
|
||||
</head>
|
||||
<head>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
|
||||
integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<script
|
||||
defer=""
|
||||
src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"
|
||||
integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script
|
||||
defer=""
|
||||
src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js"
|
||||
integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="tcomment"></div>
|
||||
<script src="https://cdn.staticfile.org/twikoo/1.6.21/twikoo.all.min.js"></script>
|
||||
<div id="tcomment"></div>
|
||||
<script src="https://cdn.staticfile.org/twikoo/1.6.21/twikoo.all.min.js"></script>
|
||||
<script>
|
||||
twikoo.init({
|
||||
envId: 'https://superb-salamander-e730b6.netlify.app/.netlify/functions/twikoo', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
|
||||
el: '#tcomment', // 容器元素
|
||||
//region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
|
||||
// path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
|
||||
//lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
|
||||
onCommentLoaded: function () {
|
||||
console.log('评论加载完成');
|
||||
}
|
||||
})
|
||||
</script>
|
||||
twikoo.init(【
|
||||
envId: 'https://superb-salamander-e730b6.netlify.app/.netlify/functions/twikoo', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
|
||||
el: '#tcomment', // 容器元素
|
||||
//region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
|
||||
// path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
|
||||
//lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
|
||||
onCommentLoaded: function () 【
|
||||
console.log('评论加载完成');
|
||||
】
|
||||
】)
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
<head>
|
||||
@ -200,16 +227,16 @@ twikoo.init({
|
||||
<div id="tcomment"></div>
|
||||
<script src="https://cdn.staticfile.org/twikoo/1.6.21/twikoo.all.min.js"></script>
|
||||
<script>
|
||||
twikoo.init({
|
||||
twikoo.init(【
|
||||
envId: 'https://superb-salamander-e730b6.netlify.app/.netlify/functions/twikoo', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
|
||||
el: '#tcomment', // 容器元素
|
||||
//region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
|
||||
// path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
|
||||
//lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
|
||||
onCommentLoaded: function () {
|
||||
onCommentLoaded: function () 【
|
||||
console.log('评论加载完成');
|
||||
}
|
||||
})
|
||||
</script>
|
||||
】
|
||||
】)
|
||||
</script>
|
||||
|
||||
我感觉twikoo也好看！
|
||||
我感觉 twikoo 也好看！
|
||||
|
||||
@ -186,6 +186,11 @@ plugins:
|
||||
- tags:
|
||||
tags_file: tag.md #分类标签
|
||||
|
||||
# 外部引用插件，一个 MkDocs 插件，它将 mkdocs.yml 额外变量注入到 markdown 模板中
|
||||
# https://github.com/rosscdh/mkdocs-markdownextradata-plugin
|
||||
- markdownextradata:
|
||||
data: ./docs/_data/ # 额外数据文件
|
||||
|
||||
|
||||
|
||||
markdown_extensions: #详见https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/ 和 https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/
|
||||
|
||||
1
requirements.txt
Normal file
1
requirements.txt
Normal file
@ -0,0 +1 @@
|
||||
mkdocs-markdownextradata-plugin
|
||||
Loading…
x
Reference in New Issue
Block a user