一、前言
声明：此文章以经过原作者允许进行的二次创作，原作者的博文如下，感谢作者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语句即可
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，在最后的数据库参数那边进行设置
/** 定义数据库参数 */ $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
官方交流扣扣群：81854222
八、总结
搭建不是很难，今天情人节，大家准备好了吗？
