Build a Valentine's Day confession website (super detailed process, package teaching package)

@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>

复制

六、效果预览

• 首页

在这里插入图片描述

• 祝福板

在这里插入图片描述

• 点点滴滴

在这里插入图片描述

• Love List

在这里插入图片描述

七、原作者博客和交流群

原作者的博客

Github地址

原作者官方Demo

笔者的Demo

八、总结

搭建不是很难,今天情人节,大家准备好了吗？