网站优化备忘录

在日常运行网站的过程中，我对Wordpress和MDx主题，以及Enlighter.js等进行了一定程度的自定义和优化，在此记录一下，便于日后重构网站，也便于使用同样技术建站的小伙伴参考。

对于页面样式的优化，主要在Wordpress中的自定义-额外CSS中设置。

对MDx主题的改动

使首页slogan更易读

对于首页slogan，我增加了文字阴影和模糊背景，给背景做了羽化处理，可以让slogan更易读。效果可以直接参考本网站首页。请注意，Safari浏览器需要使用-webkit-backdrop-filter属性才能正常显示模糊背景。

其中，背景羽化技术参考了本篇文章。请注意，在羽化的同时要留足边距，否则羽化效果会波及文字：

#theFirstPageSayContent {
	text-shadow: 2px 2px 3px #666;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	padding: 5px 15px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cbody class='wrap' xmlns='http://www.w3.org/1999/xhtml'%3E%3Cstyle%3E.wrap%7Bbox-sizing:border-box;margin:0;height:100%25;padding:10px%7D.shadow%7Bheight:100%25;background:%23000;border-radius:10px;box-shadow:0 0 5px %23000,0 0 10px %23000,0 0 15px %23000%7D%3C/style%3E%3Cdiv class='shadow'/%3E%3C/body%3E%3C/foreignObject%3E%3C/svg%3E");
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cbody class='wrap' xmlns='http://www.w3.org/1999/xhtml'%3E%3Cstyle%3E.wrap%7Bbox-sizing:border-box;margin:0;height:100%25;padding:10px%7D.shadow%7Bheight:100%25;background:%23000;border-radius:10px;box-shadow:0 0 5px %23000,0 0 10px %23000,0 0 15px %23000%7D%3C/style%3E%3Cdiv class='shadow'/%3E%3C/body%3E%3C/foreignObject%3E%3C/svg%3E");
}

取消推荐文章遮罩&兼容深色模式遮罩

Mdx默认在推荐文章的封面加了一层rgba(0, 0, 0, .15)的遮罩，对我来说显得首页有些压抑。直接去掉该遮罩后在深色模式下又会以原先的颜色显示，比较刺眼。使用以下CSS可以取消推荐文章的遮罩的同时还能使深色模式加上一层遮罩：

.mdx-sp-fill {
	background-color: rgba(0, 0, 0, 0)
}

.mdui-theme-layout-dark .mdx-sp-fill {
	background-color: rgba(0, 0, 0, .15)
}

iOS圆角问题修复

在iOS的Safari上，border-radius属性需要配合transform属性使用才能正常显示圆角。加入以下CSS：

.mdui-dialog, .mdui-menu, .mdui-card, article div.mdui-panel.mdui-panel-gapless, .mdui-table-fluid, .mdx-author-c, .mdx-hot-posts, .mdx-same-posts, .mdui-img-rounded, .links-c, .links-co > a, .outOfSearch, .mdx-first-simple .mdx-hot-posts, .searchCard, .mdx-github-cot, .mdui-typo pre, #mdx-cookie-notice, article.indexgaid, #login_error, main .mdx-postlist-simple.mdx-postlist-simple-sta {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}

“干净”文章列表样式标题阴影

目前本网站采用”干净“的文章列表样式，标题缺少阴影导致浅色背景难以看清标题，加入以下CSS给”干净“的文章列表样式的标题增加阴影：

.mdui-card-media-covered-gradient .mdui-card-primary-title {
  text-shadow: 2px 2px 5px #222;
}

抽屉文字换行

在MDx中，抽屉中的描述文字继承了.mdui-drawer类的white-space: nowrap;属性，使得抽屉菜单详细信息的

标签不能正常换行。加入以下CSS使

标签可以换行：

.side-info-oth {
	white-space: normal;
}

作者信息段落行距优化

默认的作者信息段落行距有些窄，上下行文字几乎贴在一起。加入此CSS代码使默认的作者信息段落拥有1.5倍行距：

.mdx-author-info > p {
	line-height: 1.5em;
}

`标签优化`





MDUI中标签的字体在iOS上为Courier New，使用以下字体配置可以使代码字体在大部分设备上美观显示，顺便优化了间距和圆角：




.mdui-typo code {
	font-family: 'JetBrains Mono', 'Consolas', monospace,'Open Sans Pro', 'Courier New', 'Arial';
	border-radius: 5px;
	margin: 0 5px;
}



404页面



可以在WordPress后台 外观 - 主题文件编辑器 中编辑404页面。本网站由于数次迁移，文章ID发生变化，因此之前分享的链接可能失效，必须向游客承认错误：




		404
			
				
			
			
				
			
		
    



又拍云页脚



由于又拍云联盟活动可以白嫖CDN和对象存储，当做图床使用，所以需要在页脚加入又拍云的logo。在WordPress后台 外观 - 主题文件编辑器 中编辑footer页面，查找关键字Theme:的三个结果对应着三种页脚样式。在Theme:所在div.mdx-footer-copyright标签的同级加上以下内容：




	
		
			本网站由提供CDN加速/云存储服务 
		
	




对Enlighter.js的改动



本网站所有代码块均为Enlighter.js。加入该CSS，可以使Enlighter.js拥有VSCode风格的高亮，以及类似Mac系统的按钮。请在Enlighter.js设置页面使用莫奈彩 (Monokai) 主题。



本段代码流传较广，出处已不明确，本人在原来代码的基础上进行了优化，使用浮动布局重写，修改了字体，增加了阴影，调整了间距。



本部分已经独立为一个文章，请点击：







向Docker迁移



由于本人不熟悉php环境的安装，脱离宝塔环境之后可能无法安装Wordpress。所以本人尝试了Docker的部署方法。



Wordpress在docker上需要一个额外的数据库，它既可以是容器，也可以是实体机/虚拟机上的数据库。下文以MySQL容器为例。



创建虚拟网络



首先，为了安全考虑，不在本机暴露数据库端口，需要创建一个属于Wordpress和MySQL的虚拟网络，在该网络的容器可以互相通信：



docker network create wpnetwork



docker会创建一个默认为NAT的网络，在这个网络中，容器间以容器名作为域名，相互通信。



创建MySQL容器



然后，由于Wordpress依赖一个外置的数据库，我们现在创建数据库容器，运行：



docker run --name wpdb --env=MYSQL_ROOT_PASSWORD=123456 --env=MYSQL_DATABASE=wp --env=MYSQL_USER=wordpress --env=MYSQL_PASSWORD=123456 --network=wpnetwork -d mysql:8



创建Wordpress容器



最后，运行以下代码创建Wordpress容器：



docker run --name wp --env=WORDPRESS_DB_HOST=wpdb:3306 --env=WORDPRESS_DB_USER=wordpress --env=WORDPRESS_DB_PASSWORD=123456 --env=WORDPRESS_DB_NAME=wp --env=WORDPRESS_TABLE_PREFIX=wp_ --network=wpnetwork -p 8099:80 -d wordpress:latest



一定要根据自己需求修改密码、端口等配置。请注意，同一Docker网络内的数据库可以使用容器名作为域名来访问；不在同一Docker网络，比如实体机安装的数据库，需要允许Docker容器的IP访问。



最后，打开Wordpress端口映射的地址，进行配置即可。



向容器复制/从容器取回文件



若要安装主题等插件，可能会用到向容器复制文件的命令，反之即为取回：



docker cp "D:\Windows\Downloads\mdx" wp:/var/www/html/wp-content/themes



修改php文件上传大小限制



容器中php限制文件上传大学为2M，若要向容器上传文件，需要修改容器中的/usr/local/etc/php/php.ini。如果没有该文件，则需要复制一份模板文件到本地，修改之后传回容器：



docker cp wp:/usr/local/etc/php/php.ini-production "D:\php.ini"



打开该文件，修改以下3个值，本例将最大文件传输大小设为250M。注意，以下3个值需要为递减关系：



memory_limit = 512M
post_max_size = 256M
upload_max_filesize = 250M



将修改后的文件传回容器：



docker cp "D:\php.ini" wp:/usr/local/etc/php/php.ini



重启容器：



docker restart wp