本文详细记录了我在搭建个人博客网站的过程，同时也汇集了一系列宝贵的资料。
# 准备工作
# 服务器 + 宝塔 Linux 面板 + WordPress
前期的准备工作自然是选择一个合适的服务器，这里我选择了阿里云 99 优惠的服务器，主要是便宜，一个月不到 9 块。
为了搭建一个既美观又实用的个人网站，我也是在网上冲浪了很久，最后把目标锁定在宝塔 Linux 面板 + WordPress 上。WordPress 是一个基于 PHP 的网站建设平台，以其丰富的插件和主题库而闻名。它易于安装和使用，即便是编程新手也能轻松上手，快速搭建出既美观又功能强大的网站。最重要的是，我在 github 上找到一款 WordPress 主题 Sakura，完美契合了我的审美需求。
关于阿里云服务器的配置、宝塔面板的安装和 WordPress 的部署，我基本完全按照这篇博客来做，过程非常简单，也没有什么奇奇怪怪的问题。
除了基本的搭建流程，我还额外完成了两项工作：一是设置图床，二是实现了服务器文件的上传与下载功能。
# 图床
考虑到服务器存储空间的有限性，将所有图片直接存放在服务器上显然不是一个明智的选择。因此需要图床用于存放博客所需的图片资源。这里选择的是 gitee，原因有二：首先，我通常使用 GitHub，而 Gitee 提供了一个更为简洁且没有社交干扰的环境；其次，Gitee 的访问速度快，无需翻墙即可使用。
当然了，每次使用 git 上传图片难免过程繁琐，效率低下。查找相关资料时，我发现 PicGo 工具可以实现一键上传功能，还可以和 Typora 绑定（由于我个人的习惯，没有绑定 Typora，因为不是所有图片都要上传到图床的）。相关的配置教程参考这篇博客，基本上照着做就行，但是由于博客发布比较早，PicGo 的版本已经更新到 2.3.1 了，对应新版本下载地址是 PicGo。
有了 PicGo，以后写博客需要引入图片时，只需要把图片一键上传到 Gitee。而 PicGo 会很贴心地把内容复制到剪贴板，而且是 markdown 格式的，让我能够无缝地将图片嵌入到我的博客文章中，真的非常方便。
# 服务器文件上传与下载
在使用服务器进行文件管理时，经常需要对文件进行修改，上传或下载。虽然使用 VSCode 结合 SSH 可以方便地读写服务器上的文件，但在文件的上传和下载方面，它可能就不那么便捷了。为了解决这个问题，我推荐使用 WinSCP 工具。WinSCP 操作方式简洁直观，只需简单的拖放动作，即可轻松完成文件的上传和下载任务，这也是阿里云官方推荐的一种方法。这里附上对应的使用教程。
使用 WinSCP 连接时的设置：
- 文件协议：选择 SFTP 或 SCP。
- 主机名：Linux 云服务器的公网 IP 地址。
- 端口号：默认为 22。
- 用户名：登录云服务器的用户名，默认为 root。
- 密码：购买 Linux 云服务器设置的密码或通过密钥方式转换后的密码。
# Sakura 配置
Sakura 主题的页面精美，二次元味道浓厚，非常适合我这种肥宅，而且关于 Sakura 配置的博客也非常多，本节就记录我博客网站用到的一些配置。
关于一些基本操作，比如下载安装等，都在这篇博客里。还有 Sakura 主题基本的使用方法，这篇博客也介绍得非常详尽，因此本文仅记录用到的一些非 Sakura 原生的配置。
后面的配置都需要先在 WordPress 控制面板中 Sakura 主题设置的 CDN 中打开 “本地调用主题 js、css 文件”，而且必要时需清理浏览器缓存，这非常重要。
# 参考资料
Wordpress Sakura? 主题使用手册 | 流年，谁给过的倾城 | Yremp
Sakura 主题美化系列（一）如何在菜单旁添加会动的小图标 – Ukenn Blog
『Sakura 主题美化 #01』在博客菜单上添加动态图标吧！ - 雾时之森 (fairysen.com)
# 顶部 logo
顶部 logo 是指顶部导航栏左侧的图标文字。
首先将下面 CSS 代码复制到 WordPress 管理面板 — 外观 — Sakura 主题设置 — 基本设置最下面的 "自定义 CSS 样式" 里。
/* logo */ | |
.logolink a { | |
color: #464646; | |
float: left; | |
font-size: 20px; | |
font-weight: 800; | |
height: 56px; | |
line-height: 56px; | |
padding-left: 35px; | |
padding-right: 15px; | |
padding-top: 11px; | |
text-decoration-line: none | |
} | |
.logolink .sakuraso { | |
background-color: rgba(255, 255, 255, .5); | |
border-radius: 5px; | |
color: #464646; | |
height: auto; | |
line-height: 25px; | |
margin-right: 0; | |
padding-bottom: 0px; | |
padding-top: 1px; | |
text-size-adjust: 100%; | |
width: auto | |
} | |
.logolink a:hover .sakuraso { | |
background-color: #3aa800; | |
color: #fff; | |
} | |
.logolink a:hover .shironeko, | |
.logolink a:hover .no, | |
.logolink a:hover rt { | |
color: #3aa800; | |
} | |
.logolink.moe-mashiro a { | |
color: #464646; | |
float: left; | |
font-size: 25px; | |
font-weight: 800; | |
height: 56px; | |
line-height: 56px; | |
padding-left: 6px; | |
padding-right: 15px; | |
padding-top: 11px; | |
text-decoration-line: none; | |
} | |
.logolink.moe-mashiro .sakuraso,.logolink.moe-mashiro .no { | |
font-size: 25px; | |
border-radius: 9px; | |
padding-bottom: 2px; | |
padding-top: 5px; | |
} | |
.logolink.moe-mashiro .no { | |
font-size: 20px; | |
display: inline-block; | |
margin-left: 5px; | |
} | |
.logolink a:hover .no { | |
-webkit-animation: spin 1.5s linear infinite; | |
animation: spin 1.5s linear infinite; | |
} | |
.logolink ruby { | |
ruby-position: under; | |
-webkit-ruby-position: after; | |
} | |
.logolink ruby rt { | |
font-size: 10px; | |
letter-spacing:2px; | |
transform: translateY(-15px); | |
opacity: 0; | |
transiton-property: opacity; | |
transition-duration: 0.5s, 0.5s; | |
} | |
.logolink a:hover ruby rt { | |
opacity: 1 | |
} | |
.moe-mashiro { | |
font-family: 'wenyihei-subfont', 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;; | |
} | |
.chinese-font { | |
font-family: 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif; | |
} |
然后修改 header.php 文件。
将原文件对应的代码修改成：
<!-- <header class="site-header no-select" role="banner"> --> | |
<header class="site-header no-select is-homepage gizle sabit" role="banner"> | |
<div class="site-top"> | |
<div class="site-branding"> | |
<?php if (akina_option('akina_logo')){ ?> | |
<div class="site-title"> | |
<a href="<?php bloginfo('url');?>"><img src="<?php echo akina_option('akina_logo'); ?>"></a> | |
</div> | |
<?php }else{ ?> | |
<span class="site-title"> | |
<!-- <span class="logolink serif"> --> | |
<span class="logolink moe-mashiro"> | |
<a href="<?php bloginfo('url');?>"> | |
<!-- <span class="site-name"><?php echo akina_option('site_name', ''); ?></span> --> | |
<ruby> | |
<span class="sakuraso">穷拾</span> | |
<span class="no">の</span> | |
<span class="shironeko">小屋</span> | |
<rp></rp> | |
<rt class="chinese-font">Jongsh's Blog</rt> | |
<rp></rp> | |
</ruby> | |
</a> | |
</span> | |
</span> | |
<?php } ?> | |
<!-- logo end --> |
# 导航栏
导航栏实际上就是菜单，只需要在 WordPress 管理面板里进行相关设置即可。这里介绍的是如何设置带图标有动画效果的导航栏。
在菜单设置部分，可以选择需要修改的菜单项中的 "导航标签"，比如首页可以修改成下面的内容：
<span class="faa-parent animated-hover"><i class="fa fa-home faa-wrench"></i> 首页</span> |
如果需要修改图标和动画效果，可以配合 Font Awesome 中文网 和 Font Awesome Animation 这两个网站使用。
比如我希望给新的页面 "日历" 也加上图标和动画，到 Font Awesome 中文网 找到心仪的图标：
然后点击进去复制代码，并且也到 Font Awesome Animation 里选择合适的动画效果，然后修改 "导航标签" 的内容如下：
<span class="faa-parent animated-hover"><i class="fa fa-clock-o faa-spin"></i> 日历</span> |
这里最开始尝试的时候一直没有成功，后来发现似乎是 Sakura 引入的样式是旧版的，所以找图标时也必须选用旧版网站的图标。
整理一下：
Font Awesome 旧版入口：https://fontawesome.com.cn/v4
Font Awesome 新版入口：https://fontawesome.com.cn/
Font Awesome 动画：https://l-lin.github.io/font-awesome-animation/
# 封面页
封面页的设置其实应该属于 Sakura 原生的配置。这里我选用的是随机图，因为更好看一些。
基本的配置操作是：
- 在 WordPress 管理面板 — Sakura 主题设置 — 第一屏勾选内置原图随机图
- 将想要使用的多张图片放到主题文件下的
/manifest/gallary/下，这就可以使用 WinSCP 很方便地上传文件了。
设置完后刷新页面，应该就可以看到首页封面使用随机图了。
# 首页封面动态波浪效果
首先在 header.php 文件中添加如下如下两行代码：
<div id="banner_wave_1"></div> | |
<div id="banner_wave_2"></div> |
修改后的部分代码如下：
<?php | |
if(!akina_option('head_focus')){ | |
$filter = akina_option('focus_img_filter'); | |
?> | |
<div class="headertop <?php echo $filter; ?>"> | |
<?php get_template_part('layouts/imgbox'); ?> | |
<div id="banner_wave_1"></div> | |
<div id="banner_wave_2"></div> | |
</div> | |
<?php } ?> |
然后将将下面的 CSS 代码复制到主题目录的 style.css 文件最后：
/* 动态波浪效果 */ | |
@-webkit-keyframes wave1/*Safari and Chrome*/ | |
{ | |
0% { left:-1500px;bottom:-5px} | |
50%{ left:0px;bottom:0px} | |
100%{ left:-1500px;bottom:-5px} | |
} | |
@-webkit-keyframes wave2 | |
{ | |
0% { left:-1450px} | |
50%{ left:0px} | |
100%{left:-1450px} | |
} | |
@keyframes wave1/*Safari and Chrome*/ | |
{ | |
0% { left:-1500px;bottom:-5px} | |
50%{ left:0px;bottom:0px} | |
100%{ left:-1500px;bottom:-5px} | |
} | |
@keyframes wave2 | |
{ | |
0% { left:-1450px} | |
50%{ left:0px} | |
100%{left:-1450px} | |
} | |
#banner_wave_1 { | |
width:auto; | |
height:65px; | |
background:url("https://cdn.jsdelivr.net/gh/yremp/resource@2.0/img/other/wave1.png") repeat-x; | |
_filter:alpha(opacity=80); | |
position:absolute; | |
bottom:0; | |
width:400%; | |
left:-236px; | |
z-index:5; | |
opacity:1; | |
transiton-property:opacity,bottom; | |
animation:wave1 90s infinite; | |
-webkit-animation:wave1 90s infinite; | |
} | |
#banner_wave_2 { | |
width:auto; | |
height:80px; | |
background:url("https://cdn.jsdelivr.net/gh/yremp/resource@2.0/img/other/wave2.png") repeat-x; | |
_filter:alpha(opacity=80); | |
position:absolute; | |
bottom:0; | |
width:400%; | |
left:0; | |
z-index:4; | |
opacity:1; | |
transiton-property:opacity,bottom; | |
animation:wave2 90s infinite; | |
-webkit-animation:wave2 90s infinite; | |
} | |
.banner_wave_hide,.banner_wave_hide_fit_skin { | |
opacity:0 !important; | |
bottom:-999px !important | |
} | |
@media(max-width:860px) { | |
#banner_wave_1,#banner_wave_2 { | |
display:inline-block; | |
} | |
@-webkit-keyframes wave1/*Safari and Chrome*/ | |
{ | |
0% { left:-750px;bottom:-2px} | |
50%{ left:0px;bottom:0px} | |
100%{ left:-750px;bottom:-2px} | |
} | |
@-webkit-keyframes wave2 | |
{ | |
0% { left:-750px} | |
50%{ left:0px} | |
100%{left:-750px} | |
} | |
@keyframes wave1/*Safari and Chrome*/ | |
{ | |
0% { left:-750px;bottom:-2px} | |
50%{ left:0px;bottom:0px} | |
100%{ left:-750px;bottom:-2px} | |
} | |
@keyframes wave2 | |
{ | |
0% { left:-750px} | |
50%{ left:0px} | |
100%{left:-750px} | |
} | |
#banner_wave_1 { | |
width:auto; | |
height:65px; | |
background:url("https://cdn.jsdelivr.net/gh/yremp/resource@2.0/img/other/wave1.png") repeat-x; | |
_filter:alpha(opacity=80); | |
position:absolute; | |
bottom:0; | |
width:400%; | |
left:750px; | |
z-index:5; | |
opacity:1; | |
transiton-property:opacity,bottom; | |
animation:wave1 90s infinite; | |
-webkit-animation:wave1 60s infinite; | |
} | |
#banner_wave_2 { | |
width:auto; | |
height:80px; | |
background:url("https://cdn.jsdelivr.net/gh/yremp/resource@2.0/img/other/wave2.png") repeat-x; | |
_filter:alpha(opacity=80); | |
position:absolute; | |
bottom:0; | |
width:400%; | |
left:0; | |
z-index:4; | |
opacity:1; | |
transiton-property:opacity,bottom; | |
animation:wave2 90s infinite; | |
-webkit-animation:wave2 60s infinite; | |
} | |
} |
清除浏览器缓冲，刷新页面就可以看到动态波浪效果了。
# 首页下拉箭头
在 Sakura 主题目录下的 layouts/imgbox.php 文件中最后加上以下代码：
?> | |
<div class="headertop-down faa-float animated" onclick="headertop_down()"><span><i class="fa fa-chevron-down" aria-hidden="true"></i></span></div> |
再往 style.css 文件中加入 CSS 代码：
/* 首页下拉箭头样式 */ | |
.headertop-bar::after { | |
content: ''; | |
width: 150%; | |
height: 4.375rem; | |
background: #fff; | |
left: -25%; | |
bottom: -2.875rem; | |
border-radius: 100%; | |
position: absolute; | |
z-index: 4; | |
} | |
.headertop-down { | |
position: absolute; | |
bottom: 50px; | |
left: 50%; | |
cursor: pointer; | |
z-index: 5; | |
} | |
@media (max-width: 860px) { | |
.headertop-down { | |
display: none | |
} | |
} | |
.headertop-down i { | |
font-size: 28px; | |
color: #fff; | |
-ms-transform: scale(1.5,1); /* IE 9 */ | |
-webkit-transform: scale(1.5,1); /* Safari */ | |
transform: scale(1.5,1); /* Standard syntax */ | |
} |
接着还需要在 js/sakura-app.js 文件最后添加下列代码：
/* 首页箭头下拉效果 */ | |
function headertop_down() { | |
var coverOffset = $('#content').offset().top; | |
$('html,body').animate({ | |
scrollTop: coverOffset | |
}, | |
600); | |
} |
刷新页面，清理缓存就完成了。
# 看板娘
首先在 footer.php 文件中加入下面的代码：
<script src="https://cdn.jsdelivr.net/gh/yremp/live2d@2.0/autoload.js"></script> |
对应原文件的部分代码修改后如下：
刷新后就可以看到博客页面有只看板娘了。
# 樱花飘落
给页面添加樱花飘落的特性非常简单，在上述看板娘代码下面再引入一行代码即可。
<!-- 看板娘 --> | |
<script src="https://cdn.jsdelivr.net/gh/yremp/live2d@2.0/autoload.js"></script> | |
<!-- 樱花特效 --> | |
<script src="https://cdn.jsdelivr.net/gh/yremp/yremp-js@1.5/sakura.js"></script> |
# 首页打字机效果
Sakura 主题可以在首页设置一句话，一般可以写句诗来提升自己博客的逼格。
这里找到了网上的教程，可以给诗增加打字效果，使得页面更加灵动。步骤如下：
首先在 Sakura 主题目录下的 layouts/imgbox.php 文件中添加如下代码：
<!-- 首页一言打字效果 --> | |
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js"></script> | |
<div class="header-quote"> | |
<i class="fa fa-quote-left"></i> | |
<span class="element">疯狂读诗中......</span> | |
<i class="fa fa-quote-right"></i> | |
<span class="element"></span> | |
</div> | |
<script> | |
var typed = new Typed('.element', { | |
strings: ["满院东风，海棠铺绣，梨花飘雪", "鹏北海，风朝阳，又携书剑路茫茫","取次花丛懒回顾，半缘修道半缘君"], | |
typeSpeed: 140, // 打字速度 | |
backSpeed: 50, // 回退速度 | |
loop: true,// 是否循环 | |
loopCount: Infinity, | |
showCursor: true// 是否开启光标 | |
}); | |
</script> |
改后的默认字体不是特别好看，所以我修改了 style.css ，具体修改内容如下：
.header-info .header-quote span { | |
margin: 0; | |
font-family: Ubuntu, sans-serif; | |
font-weight: 700 | |
} |
其实还有一些边边角角的修改，但是就不记录在这里了，前面的几篇博客基本都有。如果没有，就从博主的历史文章中找找看，一般都会有的。
# WordPress 插件
WordPress 提供了众多便捷实用的插件，极大地提升了使用体验。
Simple Local Avatars ：该插件允许用户直接在 WordPress 管理面板上设置个人头像，而无需依赖 Gravatar 服务。由于 Gravatar 在某些地区可能无法正常加载图片，这使得该插件在提升网站美观度方面显得尤为重要。
WP Githuber MD ：一个为 WordPress 网站提供全功能 Markdown 语法的插件。WordPress 写文章时是需要使用原生的编辑器的，这有点像 Word，虽然更方便一些。不过，对于用惯了 Markdown 的我来说，原生编辑器还是太难用了，而且我也不想一直打开管理面板写草稿，有一种一不小心就可能丢失的恐惧。这个插件可以提供 Markdown 编辑器服务，非常方便，不够似乎不能引入网络图片，有点难受。
# 一些小问题
# 特色图
Sakura 主题似乎需要对每篇博客都设置一张特色图，否则可能会有报错或其他奇奇怪怪的问题。
这倒也不是什么大问题吧，就是我这 40G 存储的服务器存这么多图片，不知道能不能吃得消。
# 评论区
博客发表后，点开评论区会发现一串 Warning，意思大概是 functions.php 文件中有一个变量没有初始化。
改成下面这样就没事了：
function push_smilies() | |
{ | |
global $wpsmiliestrans; | |
$return_smiles = ''; // 初始化 $return_smiles 变量 | |
foreach ($wpsmiliestrans as $k => $v) { | |
$Sname = str_replace(":", "", $k); | |
$Svalue = $v; | |
$return_smiles .= '<span title="' . $Sname . '" onclick="grin(' . "'" . $Sname . "'" . ')"><img src="https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/images/smilies/' . $Svalue . '" /></span>'; | |
} | |
return $return_smiles; | |
} |
# 上下篇
应该是这个主题的作者没有注意到的 bug，就是第一篇博客和最后一篇博客并没有下一篇和上一篇，但 inc/theme_plus.php 代码里似乎没有考虑这个问题，所以会有报错。
找到其中有关上下篇逻辑的代码，并替换成下面的内容即可：
/* | |
* 获取相邻文章缩略图 | |
* 特色图 -> 文章图 -> 首页图 | |
*/ | |
// 上一篇 | |
function get_prev_thumbnail_url() { | |
$prev_post = get_previous_post(); | |
if (!$prev_post) { | |
return get_random_bg_url(); // 首页图 | |
} | |
else if (has_post_thumbnail($prev_post->ID)) { | |
$img_src = wp_get_attachment_image_src(get_post_thumbnail_id($prev_post->ID), 'large'); | |
return $img_src[0]; // 特色图 | |
} | |
else { | |
$content = $prev_post->post_content; | |
preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER); | |
$n = count($strResult[1]); | |
if ($n > 0) { | |
return $strResult[1][0]; // 文章图 | |
} else { | |
return get_random_bg_url(); // 首页图 | |
} | |
} | |
} | |
// 下一篇 | |
function get_next_thumbnail_url() { | |
$next_post = get_next_post(); | |
if (!$next_post) { | |
return get_random_bg_url(); // 首页图 | |
} | |
else if (has_post_thumbnail($next_post->ID)) { | |
$img_src = wp_get_attachment_image_src(get_post_thumbnail_id($next_post->ID), 'large'); | |
return $img_src[0]; // 特色图 | |
} | |
else { | |
$content = $next_post->post_content; | |
preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER); | |
$n = count($strResult[1]); | |
if ($n > 0) { | |
return $strResult[1][0]; // 文章图 | |
} else { | |
return get_random_bg_url(); // 首页图 | |
} | |
} | |
} |
