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

wresource

发布于 2022-07-31 11:06:42

8850

发布于 2022-07-31 11:06:42

文章被收录于专栏：云服务器开发

@TOC

一、前言

声明：此文章以经过原作者允许进行的二次创作，原作者的博文如下，感谢作者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-程序员专属情人节表白网站)

二、准备工作

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

手把手教你从零开始腾讯云服务器部署

服务器的简单应用

三、安装 Typecho

1.下载源码

typecho官方网址

下载正式版的就可以了

2.部署到网站上

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

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

3.开始安装 Typecho

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

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

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

四、更换主题

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

Brave的github地址

将这些文件复制压缩成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

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

支持表情的解决方案

第一步

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

```mysql

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;

```

第二步

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

```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);

```

布置完毕去管理里面的独立界面就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>