搭建情人节表白网站(超详细过程，包教包会)

# 一、前言

声明：此文章以经过原作者允许进行的二次创作，原作者的博文如下，感谢作者Veen Zhao，带来漂亮的主题

https://blog.zwying.com/archives/59.html

网站的搭建其实在七夕的时候就已经弄好了，只是当时不会搭建，然后就放了好几个月，偶然发现情人节快到了，遂重新搭建了这个网站，不过说实话除了网站还真想不出有啥能够体现程序员的特长，你说各种代码，c，c++，java即时给你做出不错的GUI界面，人家还不一定会打开，网站最容易了，有手(机)就行，下面是它的效果展示视频，觉得好的记得三连哦

[video(video-M743NdEb-1644774889919)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=851563922)(image-https://img-blog.csdnimg.cn/img_convert/360c544485e1d5266c41b2b9cb0d1af2.png)(title-程序员专属情人节表白网站)]

# 二、准备工作

首先你需要准备一个云服务器和搭建一个空白的网站，这部分不是重点，如果有小白不会搭建的话可以参考我的这两篇文章进行搭建

手把手教你从零开始腾讯云服务器部署 (opens new window)

服务器的简单应用 (opens new window)

# 三、安装 Typecho

# 1.下载源码

typecho官方网址 (opens new window)

下载正式版的就可以了

在这里插入图片描述

# 2.部署到网站上

将压缩包解压，然后把以下文件复制到网站的一级目录下(其他目录也是可以的，不知道是作者还是typecho在这方面有一个写死的规则，默认网站以一级目录搭建，这部分在后面的过程中会涉及到，如果精通php和js的同学可以自行改造) 在这里插入图片描述

这里以宝塔搭建网站为例，搭建完毕，网站目录下应该有下列文件，记得把宝塔自带的index.html删除，不然会出现访问优先级的问题，第一个文件是验证SSL证书的文件，可以忽略

在这里插入图片描述

# 3.开始安装 Typecho

域名直接访问即可开始安装

在这里插入图片描述

接下来就是各种参数的填写了，这些参数的填写很简单，创建一个数据库，然后填写相关信息，邮箱记得填写常用的用于找回密码，这里有一个参数需要注意，即数据库地址，这里一般就是本地访问的地址，如果不是同一台服务器需要填写内网或者外网地址，与数据库所在位置有关，其他的参数都很容易

在这里插入图片描述

安装成功了，即将进入主题

在这里插入图片描述

# 四、更换主题

进入控制台，一般是启动域名加/admin就可以访问了，接下来就是更换成这套漂亮的主题Brave了,下载zip即可

Brave的github地址 (opens new window)

将这些文件复制压缩成Brave为名的zip然后，解压到usr/themes文件夹里面即可，确保Brave的下一级文件目录是这些文件

在这里插入图片描述

控制台这边启用刚刚复制进来的主题即可

在这里插入图片描述

# 五、主题设置

# 1.创建界面

这里需要创建三个界面，首页，祝福版，LoveList，其中祝福版的地址和LoveList的地址等下要用，用于界面的跳转，然后创建界面要选择相应的模板，作者安排了三个默认的显示模板，每次创建都要记得选哦

首页

这里为了方便记忆直接采用数字的html，也可以更改
祝福板

Love List

这个界面需要填充恋爱清单，所以这个需要在界面里面写一些代码，代码如下，仅供参考，可以自行修改和补充

[loveList]
[item status="0" img=""]一起看日出🌅[/item]
[item status="0" img=""]一起看日落🌄[/item]
[item status="0" img=""]一起看绚烂的烟花🌟[/item]
[item status="0" img=""]一起吃路边摊🍖[/item]
[item status="0" img=""]一起唱首歌并录下来🎤[/item]
[item status="0" img=""]一起穿情侣装逛街👫[/item]
[item status="0" img=""]一起去游乐园（迪士尼）嗨一天🎈[/item]
[item status="0" img=""]陪对方过生日🎂[/item]
[item status="0" img=""]一起去海南的天涯海角🌴[/item]
[item status="0" img=""]一起去你的小学、初中、高中、大学👫[/item]
[item status="0" img=""]一起去我的小学、初中、高中、大学👫[/item]
[item status="0" img=""]一起放孔明灯🏮[/item]
[item status="0" img=""]去遍中国的每一个省份🚉[/item]
[item status="0" img=""]一起去钓鱼🐟[/item]
[item status="0" img=""]一起去当志愿者、义工👮[/item]
[item status="0" img=""]一起坐一辆没坐过的车，在陌生的地方下车逛🚃[/item]
[item status="0" img=""]淋一次雨，在雨中漫步☔[/item]
[item status="0" img=""]为对方做早餐🍔[/item]
[item status="0" img=""]在沙滩上写下彼此的名字✍[/item]
[item status="0" img=""]一起看初雪⛄[/item]
[item status="0" img=""]穿彼此的衣服👯[/item]
[item status="0" img=""]一起去坐过山车🎎[/item]
[item status="0" img=""]嘴对嘴吃东西🍜[/item]
[item status="0" img=""]一起去游泳🏊[/item]
[item status="0" img=""]去遍人民币背后的风景⛳[/item]
[item status="0" img=""]两个人一起锻炼运动🏃💃[/item]
[item status="0" img=""]一起爬山💑[/item]
[item status="0" img=""]在耳边低声旖旎"我爱你"💖[/item]
[item status="0" img=""]一起对着流星许愿🌠[/item]
[item status="0" img=""]一起手拉手压马路👫[/item]
[item status="0" img=""]一起坐在阳台，晒着太阳，磕着瓜子，聊着天👐[/item]
[item status="0" img=""]一起养一只宠物🐶[/item]
[item status="0" img=""]在公共场合下一起喝娃哈哈🍼[/item]
[item status="0" img=""]一起去买菜、做饭、刷碗🍛[/item]
[item status="0" img=""]一起去坐热气球🎈[/item]
[item status="0" img=""]带我去你童年居住的地方走一走👩[/item]
[item status="0" img=""]带你去我童年居住的地方走一走🧑[/item]
[item status="0" img=""]一起堆雪人⛄[/item]
[item status="0" img=""]一起坐摩天轮，在最高处拥吻💏[/item]
[item status="0" img=""]一起用勺子吃西瓜🍉[/item]
[item status="0" img=""]一起捡贝壳🐚[/item]
[item status="0" img=""]看一次冰灯⛲[/item]
[item status="0" img=""]一起去看海🌊[/item]
[item status="0" img=""]一起走沙滩🚶[/item]
[item status="0" img=""]一起去看支付宝共同种下的树🎋[/item]
[item status="0" img=""]一起跨年，通宵守岁📺[/item]
[item status="0" img=""]送彼此出门，给一个大大的拥抱与啵啵😚[/item]
[item status="0" img=""]一起看书，装满我们的书架💡[/item]
[item status="0" img=""]为对方穿衣服、系鞋带🙅[/item]
[item status="0" img=""]推对方玩秋千💁[/item]
[item status="0" img=""]一起去参加朋友的婚礼💕[/item]
[item status="0" img=""]在马尔代夫，体验玻璃地板的海上小屋🏡[/item]
[item status="0" img=""]一起坐一次飞机🛫[/item]
[item status="0" img=""]一起坐一次游轮🚤[/item]
[item status="0" img=""]一起去看一次演唱会🎵[/item]
[item status="0" img=""]一起在浴缸里泡澡🛀[/item]
[item status="0" img=""]一起去看海豚🐬[/item]
[item status="0" img=""]一起去捡落叶🍁[/item]
[item status="0" img=""]开车红灯时叫你啵啵🚗[/item]
[item status="0" img=""]一起完成一个冒险刺激的挑战💀[/item]
[item status="0" img=""]一起沿着铁轨走🚂[/item]
[item status="0" img=""]一起去看埃菲尔铁塔，在塔下拥吻👄[/item]
[item status="0" img=""]一起设计整理房间💎[/item]
[item status="0" img=""]徒步走完北京二环👟[/item]
[item status="0" img=""]与好朋友一起，享受四人约会的美妙💜💛💚💙[/item]
[item status="0" img=""]为他打领带🔫[/item]
[item status="0" img=""]我叫你一次“老婆”，你叫我一次“老公”👨‍❤️‍💋‍👨[/item]
[item status="0" img=""]带你在午夜开车兜风🚙[/item]
[item status="0" img=""]为她涂指甲油💅[/item]
[item status="0" img=""]来一次浪漫的小情趣😍[/item]
[item status="0" img=""]在阳台上养着一排多肉植物🥦[/item]
[item status="0" img=""]一起过一次六一儿童节👧👦[/item]
[item status="0" img=""]入住一次五星级酒店🏨[/item]
[item status="0" img=""]为彼此换一个对方心仪的发型，不论长短烫染💇[/item]
[item status="0" img=""]偷偷观察对方熟睡的模样，记录下来📷[/item]
[item status="0" img=""]一起去打电玩👾[/item]
[item status="0" img=""]一起给对方写信，读给对方听📄[/item]
[item status="0" img=""]一起滑雪，摔倒也要拉着你🎿[/item]
[item status="0" img=""]拥有我们独特的情侣戒指💍[/item]
[item status="0" img=""]一起完成一副千片拼图😜[/item]
[item status="0" img=""]一起去天安门看升旗仪式🚄[/item]
[item status="0" img=""]一起包饺子🥟[/item]
[item status="0" img=""]一起去吃自助餐，把没尝过的食材都尝试一遍🔪[/item]
[item status="0" img=""]去拍一回写真📸[/item]
[item status="0" img=""]一起去新加坡看焰火表演🎇[/item]
[item status="0" img=""]一起去看极光⚡⚡[/item]
[item status="0" img=""]背着她走一段路👣[/item]
[item status="0" img=""]一起赏月🌙[/item]
[item status="0" img=""]一起去看樱花🌸[/item]
[item status="0" img=""]以喝交杯酒的方式喝东西🥂[/item]
[item status="0" img=""]一起买一张彩票🎫[/item]
[item status="0" img=""]在树下埋下我们的约定🎑[/item]
[item status="0" img=""]带上你我的家人去聚会、旅游🚙[/item]
[item status="0" img=""]来一场难忘的求婚🎁💍[/item]
[item status="0" img=""]在朋友面前大方介绍彼此💋[/item]
[item status="0" img=""]拍属于我们自己的婚纱照🎎[/item]
[item status="0" img=""]互相在朋友圈晒结婚证📇[/item]
[item status="0" img=""]设计一场梦中的婚礼💤🌹🎉[/item]
[item status="0" img=""]拥有一个爱的结晶，给予宝贝最好的爱👶👼[/item]
[item status="0" img=""]余生漫漫，执子之手，与子偕老💏[/item]
[/loveList]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

如果出现界面保存不了应该是数据库不支持emoji导致的，这是作者给出的解决方案地址

支持表情的解决方案 (opens new window)

第一步

修改相关的数据类型，数据库中运行下列sql语句即可

alter table typecho_comments convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_contents convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_fields convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_metas convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_options convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_relationships convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_users convert to character set utf8mb4 collate utf8mb4_general_ci;

1
2
3
4
5
6
7

第二步

将整体的编码方式进行修改，在网站目录中找到这个文件config.inc.php，在最后的数据库参数那边进行设置

/** 定义数据库参数 */
$db = new Typecho_Db('Pdo_Mysql', 'typecho_');
$db->addServer(array (
  ...
  'charset' => 'utf8mb4',  // 将原来的utf8修改为 utf8mb4
  ...
), Typecho_Db::READ | Typecho_Db::WRITE);
Typecho_Db::set($db);

1
2
3
4
5
6
7
8

布置完毕去管理里面的独立界面就i有3个界面，可能还有一个默认的界面，不用管删掉也行

在这里插入图片描述

# 2.设置外观

在控制台的设置外观中设置主页相关的参数

在这里插入图片描述

这里就里面的两个参数做解释说明，两个链接分别是跳转需要的链接，之前创建界面那边有，其他的类似图标文字可以自行设置，这边就不演示了

在这里插入图片描述

接下来就是将首页设置成主页，同时将文章列表页的路径改成**/blog**，这里主要是用于点点滴滴界面的文章输出的路径，作者这里应该是把路径写固定了，写成**/blog**即可

在这里插入图片描述

# 3.设置背景音乐

这部分在底部自定义中进行添加代码

在这里插入图片描述

代码如下，当时查了相关的资料，目前大部分浏览器不再支持自动播放背景音乐，这个背景音乐的触发条件是打开网站，并有相关的界面滑动等即可触发背景音乐

<audio src="音乐链接" preload="" id="auto"></audio>
<script>
		        function toggleSound() {
		            var music = document.getElementById("auto");//获取ID  
		                console.log(music);
		                console.log(music.paused);
		            if (music.paused) { //判读是否播放  
		                music.paused=false;
		                music.play(); //没有就播放 
		            }  
		             
		        }
		        setInterval("toggleSound()",1);
</script>
<canvas
    height="616"
    width="1280" 
    style="position: fixed;left: 0;top: 0;pointer-events: none;z-index:99999;" 
    id="canvas_sakura">
</canvas>