跳转至

本站开发维护记录

更新时间：2023-1-18
  • 2023-1-18 添加评论功能
  • 2023-1-17 转移到github.io
  • 2022-7-20 更新image_url说明
  • 2022-7-13 更新说明
  • 2022-7-8 更新说明
  • 2019-11-7 创建文档

记录本站开发过程中用到的东西。例如设置代码块渲染，给首页增加波纹效果。增加header的配置。nginx的配置等等。

评论功能

添加评论功能。先在官网找到引导。

然后在自己的 main.html 里把 comments.html 加上

加入comments

需要加评论的文章，文章开头配置里写 

comments: true

代码块渲染

mkdocs支持的代码块种类要查看 pygments.org - lexers

比如配置文件，要用 aconf 而不是 conf

home底部波纹效果

效果参考的是：http://www.htmleaf.com/css3/css3donghua/201804045056.html

在home页底部添加一点波纹的动态效果。

图片放入目录 about/_media/home

overrides/home.html 添加内容到footer中

home.html
home.html添加的部分
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!-- Application footer -->

<style>
@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}
.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    margin: auto;
}
.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 120px;
    bottom: -1px;
    /* background-image: linear-gradient(to top, #86377b 20%, #27273c 80%); */
}
.bgTop {
    z-index: 15;
    opacity: 0.5;
}
.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}
.bgBottom {
    z-index: 5;
}
.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 120px;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveTop {
    background-size: 50% 100px;
}
.waveAnimation .waveTop {
animation: move-wave 3s;
-webkit-animation: move-wave 3s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.waveMiddle {
    background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}
.waveBottom {
    background-size: 50% 100px;
}
.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
}
</style>
<div class="waveWrapper waveAnimation">
<div class="waveWrapperInner bgTop">
    <div class="wave waveTop" style="background-image: url('about/_media/home/wave-top.png')"></div>
</div>
<div class="waveWrapperInner bgMiddle">
    <div class="wave waveMiddle" style="background-image: url('about/_media/home/wave-mid.png')"></div>
</div>
<div class="waveWrapperInner bgBottom">
    <div class="wave waveBottom" style="background-image: url('about/_media/home/wave-bot.png')"></div>
</div>
</div>

左边导航栏自动定位

模板里添加jquery。需要延迟执行scrollIntoView，还需要调整一下整个window的Y轴滚动

html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js" charset="utf-8"> </script>

<script>
// Scroll active item in table of contents into view
$.fn.isInViewport = function () {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    return elementBottom > viewportTop && elementTop < viewportBottom;
};
setTimeout(() => {
var activeLink = $("a.md-nav__link--active");
if (!activeLink.isInViewport()) {
    activeLink[0].scrollIntoView(true);
    if(window.scrollY > 10) {
        window.scrollBy(0, -window.scrollY);
    }
    //console.log('scroll link into view');
    }
}, 300)

emoji

github图表的html

<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></span>

gitee

<span class="twemoji"><img src="https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/simple/gitee.svg"></span>

WebRTC系列

网页的标签

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!-- Open Graph data -->
<meta property="og:title" content="Title" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description" />
<meta property="og:site_name" content="Site Name" />

<meta property="article:published_time" content="2015-11-11T19:08:47+01:00" />
<meta property="article:modified_time" content="2015-11-11T19:08:47+01:00" />
<meta property="article:section" content="Article Section" />
<meta property="article:tag" content="Article Tag" />

网页的图片标签

md文件里，头部加上 image_url: about/_media/cover/nginx-green-512-m.png

main.html 里读取这个image_url

代码

adsence广告

在overrides/main.html里加上

1
2
3
4
5
6
7
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <!-- android-wiki-ad-1 -->
  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7286632197002340" data-ad-slot="1962135890"
      data-ad-format="auto" data-full-width-responsive="true"></ins>
  <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
  </script>

nginx配置备份

conf
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
# static Android wiki site
# update 2022-1-30
# redirect to www 

server {
    listen 80;
    server_name an.rustfisher.com www.an.rustfisher.com;
    rewrite ^/(.*) https://www.an.rustfisher.com/$1 permanent;
}

server {
    listen 443 ssl;
    ssl on;
    ssl_session_timeout 5m;
    ssl_certificate /home/ubuntu/server/ssl/1_an.rustfisher.com_bundle.crt;
    ssl_certificate_key /home/ubuntu/server/ssl/2_an.rustfisher.com.key;        
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;##按照这个套件配置
    ssl_prefer_server_ciphers on;

    server_name an.rustfisher.com;
    rewrite ^/(.*) https://www.an.rustfisher.com/$1 permanent;
#    location / {
#        root /home/ubuntu/server/wiki-site/an-rf-wiki;
#        index index.html index.htm;
#    }
}

server {
    listen 443 ssl;
    ssl on;
    ssl_session_timeout 5m;
    ssl_certificate /home/ubuntu/server/ssl/1_www.an.rustfisher.com_bundle.crt;
    ssl_certificate_key /home/ubuntu/server/ssl/2_www.an.rustfisher.com.key;        
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;##按照这个套件配置
    ssl_prefer_server_ciphers on;

    server_name www.an.rustfisher.com;

    location / {
        root /home/ubuntu/server/wiki-site/an-rf-wiki;
        index index.html index.htm;
    }
}

托管

网站资源转移到github.io进行托管。

图片、js等静态资源，放入about目录中。

编译出来的静态资源存放在 anrfdev-github-io.pages.dev

本站说明

一起在知识的海洋里呛水吧。广告内容与本站无关。如果喜欢本站内容，欢迎投喂作者，谢谢支持服务器。如有疑问和建议，欢迎在下方评论~

📖AndroidTutorial 📚AndroidTutorial 🙋反馈问题 🔥最近更新 🍪投喂作者

Ads

评论