本站开发维护记录¶

更新时间：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添加的部分
<!-- 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

<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系列¶

网页的标签¶

<!-- 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里加上

<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

# 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