本站开发维护记录

更新时间：2022-7-20

• 2022-7-20 更新image_url说明
• 2022-7-13 更新说明
• 2022-7-8 更新说明
• 2019-11-7 创建文档

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

代码块渲染

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

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

home底部波纹效果

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

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

图片放入目录 _media/home

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

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('_media/home/wave-top.png')"></div>
</div>
<div class="waveWrapperInner bgMiddle">
    <div class="wave waveMiddle" style="background-image: url('_media/home/wave-mid.png')"></div>
</div>
<div class="waveWrapperInner bgBottom">
    <div class="wave waveBottom" style="background-image: url('_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)

WebRTC系列

• WebRTC概念简介
• WebRTC打开摄像头
• WebRTC视频分辨率
• WebRTC截取本地视频帧
• WebRTC与css滤镜
• WebRTC与录制视频
• 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: _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;
    }
}

作者: rustfisher.com | rf.cs@foxmail.com
示例地址: AndroidTutorial Gitee, Tutorial Github | 反馈问题: -> Android issues - gitee
本文链接: https://www.an.rustfisher.com/about/site-dev-note/ |-> 本站文章最近更新
一家之言，仅当抛砖引玉。如有错漏，还请指出。下方的广告链接内容与本站无关。如果喜欢本站的内容，也可 -> 点击请作者喝咖啡 ，谢谢支持服务器。