本站开发维护记录
更新时间: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
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系列
网页的标签
| <!-- 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/
|-> 本站文章最近更新
一家之言,仅当抛砖引玉。如有错漏,还请指出。下方的广告链接内容与本站无关。如果喜欢本站的内容,也可 -> 点击请作者喝咖啡 ,谢谢支持服务器。