Web Building Memo 1, EMBEDDING, THEME, ETC.
BiliBili嵌入:
自适应窗口大小需要修改footer.php
<script type="text/javascript">
var elements = document.getElementsByClassName("bilibili");
for (var i = 0; i < elements.length; i++) { var element = elements[i]; element.style.height = element.scrollWidth * 0.5625 + "px"; }
</script>
Code language: HTML, XML (xml)
最后插入用自定义html:
<iframe class="bilibili" src="//player.bilibili.com/player.html?bvid=BV1yS4y187mt&autoplay=0;page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>
Code language: HTML, XML (xml)
网易云音乐嵌入:
歌曲页面找外联播放器,自定义html插入
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1918916921&auto=0&height=66"></iframe>
Code language: HTML, XML (xml)
Cue嵌入:
上传音频,加入playlist,嵌入playlist的html代码:
<div id="player">
[cue id="128"]
</div>
Code language: HTML, XML (xml)
- 上传媒体最大大小为50MB
- 音频可用“
ffmpeg -i "源" -b:a 900k -acodec mp3 -ar 44100 "目标"
”压缩(b:a
码率,acodec
格式,ar
采样率) - 图片转webp,质量90左右就行
- 音频可用“
- 自带的PDF嵌入在移动端上显示不了
主题背景控制
参考https://medium.com/@bharatkaravadra/how-to-reduce-the-header-height-size-of-the-twenty-seventeen-theme-front-page-562f1230044c和https://wordpress.com/forums/topic/theme-2017-less-height-for-featured-images/
添加额外的CSS类:
/*Computer screen */
@media screen and (min-width: 48em) {
.twentyseventeen-front-page.has-header-image .custom-header-image {
/*height: 1200px;*/
/*height: 100vh;*/
height: 62vh;
/*max-height: 100%;*/
/*overflow: hidden;*/
}
.panel-image {
height: 70vh;
/*max-height: 1200px;*/
}
.single-featured-image-header {
height: 40vw;
/*not vh because it creates black edge on longer screen*/
}
}
/* Mobile screen*/
.has-header-image.twentyseventeen-front-page .custom-header {
/*display: table;*/
/*height: 300px;*/
/*height: 75vh;*/
height: 62vh;
/*width: 100%;*/
}
/* Computer screen with logged in user and admin bar showing on front end*/
@media screen and (min-width: 48em) {
.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image {
/*height: calc(100vh - 32px);*/
height: calc(62vh - 32px);
}
}
Code language: CSS (css)
height
控制header image纵向长度. panel-image
和single-featured-image-header
分别控制panel image和featured image. Mobile screen
实际上似乎会影响所有平台。以及wp-content/themes/twentyseventeen/style.css
里:
.background-fixed .panel-image {
background-attachment: fixed;
}
Code language: CSS (css)
好像没用,理论上应该是控制panel image在移动端是固定还是滑动的。
代码块
代码块用的是Syntax-highlighting Code Block (with Server-side Rendering)。Lean4代码示例:
example {G X : Type*} [Group G] [MulAction G X] (x : X) :
orbit G x ≃ G ⧸ stabilizer G x :=
MulAction.orbitEquivQuotientStabilizer G x
example {c : ℝ} (ubf : FnHasUb f) (h : c ≥ 0) : FnHasUb fun x ↦ c * f x := by
rcases ubf with ⟨b, ubfb⟩
use c * b
unfold FnUb at ubfb;
rintro x; dsimp
exact mul_le_mul_of_nonneg_left (ubfb x) h
example : FnHasUb f → FnHasUb g → FnHasUb fun x ↦ f x + g x := by
rintro ⟨a, ubfa⟩ ⟨b, ubgb⟩ -- 缩写
-- simp only [FnHasUb]
exact ⟨a + b, fnUb_add ubfa ubgb⟩
example : FnHasUb f → FnHasUb g → FnHasUb fun x ↦ f x + g x :=
fun ⟨a, ubfa⟩ ⟨b, ubgb⟩ ↦ ⟨a + b, fnUb_add ubfa ubgb⟩
example {c : ℝ} (ubf : FnHasUb f) (h : c ≥ 0) : FnHasUb fun x ↦ c * f x := by
rcases ubf with ⟨b, ubfb⟩
use c * b
unfold FnUb at ubfb;
rintro x; dsimp
exact mul_le_mul_of_nonneg_left (ubfb x) h
example {G : Type*} [Group G] [Fintype G] (G' : Subgroup G) : card G' ∣ card G :=
⟨G'.index, mul_comm G'.index _ ▸ G'.index_mul_card.symm⟩
Code language: Coq (coq)
Wolfram Mathematica代码示例:(mma函数名比较长,不建议warp line)
textFormating[inputText_] :=
StringDelete[inputText, ("<" ~~ ___ ~~ ">") // Shortest];
nameAndSection[line_, file_] := Piecewise[{
{{Sequence @@
StringDelete[StringSplit[FileNameTake[file], "_"][[{3}]],
".csv"], (ToString /@ IntegerDigits[line[[1]], 10, 3]) //
StringJoin}, IntegerQ[line[[5]]] && line[[5]] == 1},
{{ToString@line[[5]], ""}, IntegerQ[line[[5]]] && line[[5]] > 1},
{StringSplit[line[[5]], "_"],
StringQ[line[[5]]] && StringLength[line[[5]]] > 0}}, {"Unclear",
"Unclear"}];
textExtract[file_, name_] :=
Module[{importFile, text, characterText},
importFile = Import[file];
text = Quiet@Select[importFile, #[[2]] == ToString[name] &];
characterText = Piecewise[{
{(AssociationThread[{"CSV Path", "File Name", "Section",
"Character", "CharacterID", "Text"} -> #] & /@
Cases[text,
x_ :> Join[{FileNameTake@file}, nameAndSection[x, file],
x[[2 ;; 3]], textFormating /@ x[[{4}]]]]),
Length[text] > 0}}, Nothing]];
Code language: Mathematica (mathematica)
性能控制
WP Super Cache安装好之后要改掉默认目录结构才能用;
内存占用高:https://cloud.tencent.com/developer/article/1720300,FPM配置文件:
pm = dynamic #指定进程管理方式,有3种可供选择:static、dynamic和ondemand。
pm.max_children = 16 #static模式下创建的子进程数或dynamic模式下同一时刻允许最大的php-fpm子进程数量。
pm.start_servers = 10 #动态方式下的起始php-fpm进程数量。
pm.min_spare_servers = 8 #动态方式下服务器空闲时最小php-fpm进程数量。
pm.max_spare_servers = 16 #动态方式下服务器空闲时最大php-fpm进程数量。
pm.max_requests = 2000 #php-fpm子进程能处理的最大请求数。
pm.process_idle_timeout = 10s
request_terminate_timeout = 120
Code language: PHP (php)
php-fpm重启:
$ sudo systemctl start php-fpm # 启动php-fpm
$ sudo systemctl stop php-fpm # 停止php-fpm
$ sudo systemctl reload php-fpm # 重载php-fpm
$ sudo systemctl restart php-fpm # 重启php-fpm
Code language: PHP (php)
伪静态,但是我忘了是干啥的了:https://blog.csdn.net/as339000204/article/details/80761651
location / {
try_files $uri $uri/ /index.php?$args;
}
# Add trailing slash to */wp-admin requests.
rewrite /wp-admin$ $scheme://$host$uri/ permanent;
Code language: PHP (php)
接下来关于Cloudflare中的Cache Rules:
为保证wp后台工作正常:绕过URI等于/*.php*。缓存其它全部:URI包含/(这个要排到最后,免得影响前面)。验证规则可以去CF首页的“跟踪”里。
安全控制
隐藏WP登录页面:https://cloud.tencent.com/developer/article/2166588
functions.php
文末添加:
add_action('login_enqueue_scripts', 'tb_wp_login_protection');
function tb_wp_login_protection(){
if( !isset($_GET['mima']) ){
header( 'Location: ' . home_url() );
exit;
}
}
Code language: PHP (php)
然后用/wp-login.php?mima
登录。
隐藏管理员用户名:https://cloud.tencent.com/developer/article/1773433
设置宝塔伪静态(顺便解决xmlrpc
的问题):
location ~ ^/wp-json/wp/v2/users {
deny all;
}
location ~ ^/wp-includes/wlwmanifest.xml {
deny all;
}
location ~ ^/xmlrpc.php$ {
deny all;
}
xmlrpc还有一段在宝塔网页配置文件里:
location = /xmlrpc.php {
deny all;
access_log off;
log_not_found off;
}
Wordfence可以开启管理员二次验证、xmlrpc屏蔽。Wordfence防火墙开启的时候好像遇到了问题但是忘了怎么解决的了_(:3 」∠ )_。以及要记得设安全组,改宝塔面板端口、访问路径,关闭phpmyadmin公开访问,SSH只用密钥登录。CDN可以隐藏服务器真实IP,但腾讯云CDN非得加一个裸的CNAME记录,然而我域名已经打开DNSSEC了_(:3 」∠ )_。Cloudflare会拦截环回测试和REST API,要设置WAF来解决:https://www.wordfence.com/help/advanced/compatibility/
设置WP管理员发件邮箱(在functions.php
里,WP用这个邮箱向管理员发消息):
// 配置邮件
add_action('phpmailer_init', 'mail_smtp');
function mail_smtp( $phpmailer ) {
$phpmailer->FromName = '***'; // 发件人昵称
$phpmailer->Host = '***'; // 邮箱SMTP服务器
$phpmailer->Port = 465; // SMTP端口,不需要改
$phpmailer->Username = '***@***'; // 邮箱账户
$phpmailer->Password = '***'; // 此处填写邮箱生成的授权码,不是邮箱登录密码
$phpmailer->From = '***@***'; // 邮箱账户同上
$phpmailer->SMTPAuth = true;
$phpmailer->SMTPSecure = 'ssl'; // 端口25时 留空,465时 ssl,不需要改
$phpmailer->IsSMTP();
}
Code language: PHP (php)
- WP文章页在设置-阅读里指定。
- 插件列表:
- Akismet 反垃圾评论:垃圾评论保护
- Cue
- FileBird Lite
- Remove Footer Credit
- Syntax-highlighting Code Block (with Server-side Rendering)
- Wordfence安全
- 你好多莉
- 超级缓存