发布于 

Typecho搭建一个简易情侣网站

最近需要搭建一个情侣网站，因为之前的网站是在WordPress建站平台上搭建的，就想着能不能找到一个WordPress情侣主题网站，但很遗憾没找到，即使找到一个还是十几年前的网站风格，不忍直视。

因为考虑到另一半对网站管理后台的操作及编辑能力有限，所以要找一个简单的网站，不需要像自己创建博客网站那样整得花里胡哨。经过在度娘上的搜索，还真的找到了一个，主题名为Brave勇敢爱[1]，主题作者[2]@秦枫鸢梦。

image.png
image.png

可以看出这个网站极简，主页面从上到下只有一言、情侣展示区、恋爱时间计时器、祝福板（用于网站访客发送祝福）、点点滴滴（情侣写的文章会被收录其中）、Love List（恋爱清单，用于记录两人想一起做的事）、网站底部同样可以加入一言。

祝福板

image.png
image.png

点点滴滴

image.png
image.png

Love List

image.png
image.png

建站准备

该主题基于Typecho平台建站，在使用typecho搭建完网站后发现网站后台很轻量，网站访问也很流畅，真的适合搭建轻主题。

下面简单介绍一下搭建Brave主题情侣网站的流程，前面基本与WordPress建站相同。

你需要：

  1. 一个服务器

  2. 一个备案域名并将域名解析到服务器

  3. 宝塔面板安装与配置

考虑到我之前已经将一级域名搭建过网站了，这里我们可以使用二级域名，例如使用love.xxxx.com，将二级域名解析到服务器后，在宝塔面板中点击【添加站点】，填入自己的二级域名，创建FTP和数据库，记住自己的数据库账号和密码，安装typecho时需要用。

注：宝塔面板可以创建多个网站部署到服务器中，一个一级域名可以分发无数个二级域名，也就意味着一个域名加一个服务器可以创建许多个网站，当然前提服务器能承受住。

创建好网站后可以给网站安装SSL证书

Typecho安装

下载Typecho安装包[3]

在宝塔面板【文件】找到/www/wwwroot/自己的域名文件夹将Typecho安装包上传到此目录下并解压。

解压后生成一个名为build的文件夹，将build的文件夹下的所有文件剪切到/www/wwwroot/自己的域名文件夹下，并删除build文件夹。

在同级目录下找到usr进入到子级文件夹uploads把权限从755改为777以防止网站建成后上传附件时出问题。

640
640

在浏览器地址栏中输入自己的域名/install.php进行typecho的安装

image.png
image.png

在初始化配置中输入自己的数据库名、数据库用户名、数据库密码（在宝塔面板的数据库找到）和创建typecho用户名，密码、邮箱（用于typecho后台登录），一切都设置好后就可以安装了。

image.png
image.png

初始网站的界面为typecho的默认样式

image.png
image.png

Brave主题安装

在宝塔面板的【文件】找到/www/wwwroot/自己的域名/usr/themes，将Brave主题[4]压缩包上传至themes文件夹下并解压。

登录Typecho后台，方法是在浏览器地址栏输入自己的域名/admin并填写自己的用户名密码即可登录到Typecho后台。找到【控制台】【外观】启用Brave主题，在【设置外观】中进行网站的一些设置

640
640

Brave主题配置教程请查看：https://blog.zwying.com/archives/59.html

关于头像和页面图标可以将图片上传到图床上获得图片的链接填入到相应的表单中

Typecho支持emoji设置

Typecho默认是不支持添加emoji的，这就会导致我们不能在主题中加入emoji，如果加入也会无法保存。

这主要是由于Typecho数据库编码是utf8，这种编码不支持emoji表情。

如果想Typecho支持emoji只需要将数据库的编码改为utf8mb4即可。

  1. 在宝塔面板的【数据库】中找到自己网站对应的数据库，在右侧点击管理，页面会跳转到数据库的登录页面，输入自己的数据库用户名和密码，点击执行
image.png
image.png

注：如果数据库登录界面无法打开，可能是因为服务器的888端口未开，请在阿里云轻量应用服务器工作台【防火墙】中添加一个888端口

  1. 登录后在左侧点击自己的数据库，可以看到右侧的排序规则是utf8，我们要改成utf8mb4
image.png
image.png
  1. 点击SQL，在代码框中输入编码转换代码，点击执行
image.png
image.png
Text
1
2
3
4
5
6
7
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;

出现绿色对勾表示替换成功

640
640
  1. 在宝塔面板找到网站根目录数据库配置文件config.inc.php，将'charset' => 'utf8'改为'charset' => 'utf8mb4'，该代码大约在config.inc.php的第60行，替换后将文件保存即可
Text
1
2
3
4
5
6
7
8
9
/** 定义数据库参数 */
$db = new Typecho_Db('Pdo_Mysql', 'typecho_');
$db->addServer(array (
  'host' => 'localhost',
  'user' => 'xxxxxxxxxxxx',
  'password' => 'xxxxxxxxx',
  'charset' => 'utf8mb4', /*将原来的utf8修改为utf8mb4*/
  'port' => 'xxxx',
  'database' => 'xxxxxxxx',

在完成上述配置后即可为网站全局添加emoji表情，推荐一个emoji网址：https://www.emojiall.com/

Brave主题修改

为了增加网站的个性化，我们可以简单地DIY这个主题，下面介绍我的一些定制方法

image.png
image.png

> 网站底部添加一言

在宝塔面板【文件】的网站根目录找到/usr/themes/Brave/base/footer.php，双击进行编辑，第2行<div class="p-5 text-center ">下即可更改网站底部的文字

Text
1
2
3
4
5
6
<div class="p-5 text-center ">
 <h6><?php $this->options->title() ?></h6> /*引入网站名*/
 <h6>你惊艳了我的时光，也温柔了我的岁月</h6> /*加入你想加入的文字，可自改*/
 <a class="lover-card-title" href="http://beian.miit.gov.cn/" target="_blank"> 皖ICP备2021016244号-1</a> /*添加备案号*/
 <!--<p class="h6"> Powered by <a href="http://typecho.org" target="_blank">Typecho</a> ※ Theme is <a href="https://blog.zwying.com" target="_blank">Brave</a></p>--> /*主题放版权的地方，如果觉得放在自己的情侣网站不和谐可以删除或注释起来*/
</div>

如果你想给自己的文字加入颜色渐变效果可以这样写<h6 class="lover-card-title">你惊艳了我的时光，也温柔了我的岁月</h6>，颜色渐变效果可以参考我的备案号

image.png
image.png

> 添加下雪特效

同样是在footer.php修改，在</body>前添加

Text
1
2
3
4
5
<script src="https://pt.pyrroleach.com/js/snowy.js"></script>
 <style type="text/css">
  .snow-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;}
  </style>
  <div class="snow-container"></div>

还有一种下雪特效挺有意思，在鼠标接近雪花时会将雪花吹跑

使用Typecho搭建一个简易情侣网站.gif
使用Typecho搭建一个简易情侣网站.gif

方法同样是在在</body>前添加一段JavaScript代码，如下：

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<canvas id="Snow"></canvas>
<script>
    if(true){
        (function() {
            var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            };
            window.requestAnimationFrame = requestAnimationFrame;
        })();
        
        (function() {
            var flakes = [],
                canvas = document.getElementById("Snow"),
                ctx = canvas.getContext("2d"),
                flakeCount = 200,
                mX = -100,
                mY = -100;
            
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            function snow() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            
                for (var i = 0; i < flakeCount; i++) {
                    var flake = flakes[i],
                        x = mX,
                        y = mY,
                        minDist = 150,
                        x2 = flake.x,
                        y2 = flake.y;
            
                    var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
                        dx = x2 - x,
                        dy = y2 - y;
            
                    if (dist < minDist) {
                        var force = minDist / (dist * dist),
                            xcomp = (x - x2) / dist,
                            ycomp = (y - y2) / dist,
                            deltaV = force / 2;
            
                        flake.velX -= deltaV * xcomp;
                        flake.velY -= deltaV * ycomp;
            
                    } else {
                        flake.velX *= .98;
                        if (flake.velY <= flake.speed) {
                            flake.velY = flake.speed
                        }
                        flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
                    }
            
                    ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";
                    flake.y += flake.velY;
                    flake.x += flake.velX;
                        
                    if (flake.y >= canvas.height || flake.y <= 0) {
                        reset(flake);
                    }
            
                    if (flake.x >= canvas.width || flake.x <= 0) {
                        reset(flake);
                    }
            
                    ctx.beginPath();
                    ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
                    ctx.fill();
                }
                requestAnimationFrame(snow);
            };
            
            function reset(flake) {
                flake.x = Math.floor(Math.random() * canvas.width);
                flake.y = 0;
                flake.size = (Math.random() * 3) + 2;
                flake.speed = (Math.random() * 1) + 0.5;
                flake.velY = flake.speed;
                flake.velX = 0;
                flake.opacity = (Math.random() * 0.5) + 0.3;
            }
            
            function init() {
                for (var i = 0; i < flakeCount; i++) {
                    var x = Math.floor(Math.random() * canvas.width),
                        y = Math.floor(Math.random() * canvas.height),
                        size = (Math.random() * 3) + 2,
                        speed = (Math.random() * 1) + 0.5,
                        opacity = (Math.random() * 0.5) + 0.3;
            
                    flakes.push({
                        speed: speed,
                        velY: speed,
                        velX: 0,
                        x: x,
                        y: y,
                        size: size,
                        stepSize: (Math.random()) / 30 * 1,
                        step: 0,
                        angle: 180,
                        opacity: opacity
                    });
                }
            
                snow();
            };
            
            document.addEventListener("mousemove", function(e) {
                mX = e.clientX,
                mY = e.clientY
            });
            window.addEventListener("resize", function() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            });
            init();
        })();
    }
</script>
<style>
    #Snow{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
        background: rgba(125,137,95,0.1);
        pointer-events: none;
    }
</style>

> 增加相识时间计时器

主题默认只有一套计时器，即设定相恋时间。如果想增加一套相识时间可以按照如下设置

加入计时器功能

打开footer.php，找到

1
2
3
4
5
6
7
8
<script>
 window.showSiteRuntime = function() {
     site_runtime = $("#site_runtime");
   ....
 <?php if ($this->options->pjaxContent) : $this->options->pjax回调(); ?><?php endif; ?>
NProgress.done();
});
</script>

在代码</script>之后加入

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
<script>
 window.showMeetRuntime = function() {
  meet_runtime = $("#meet_runtime");
  if (!meet_runtime) {
   return;
  }
  window.setTimeout("showMeetRuntime()", 1000);
  start = new Date("<?php $this->options->meetingtime(); ?>");
  now = new Date();
  T = (now.getTime() - start.getTime());
  i = 24 * 60 * 60 * 1000;
  d = T / i;
  D = Math.floor(d);
  h = (d - D) * 24;
  H = Math.floor(h);
  m = (h - H) * 60;
  M = Math.floor(m);
  s = (m - M) * 60
  S = Math.floor(s);
  meet_runtime.html("第 <span class=\"bigfontNum\">" + D + "</span> 天 <span class=\"bigfontNum\">" + H + "</span> 小时 <span class=\"bigfontNum\">" + M + "</span> 分钟 <span class=\"bigfontNum\">" + S + "</span> 秒");
 };
 showMeetRuntime();
 $(document).pjax('a', '#Pjax', {
  fragment: '#Pjax',
  timeout: 6000
 });
 $(document).on('pjax:send', function() {
  NProgress.start();
 });
 $(document).on('pjax:complete', function() {
  <?php if ($this->options->pjaxContent) : $this->options->pjax回调(); ?><?php endif; ?>
  NProgress.done();
 });
</script>

将计时器引入网站首页

在网站根目录找到/usr/themes/Brave/indexPage.php双击打开编辑，在代码的13行到18行进行改动

1
2
3
4
5
6
    <blockquote class="blockquote text-center my-5 py-2">
        <h5 class="lover-card-title">今天是我们相识的</h5>/*相识的文字*/
        <h5 id="meet_runtime"></h5>/*引入相识计时器*/
        <h5 class="lover-card-title">也是我们在一起的</h5>/*相恋文字。原句是：我们风雨同舟已经一起走过，我这里做了修改*/
        <h5 id="site_runtime"></h5>/*引入相恋计时器*/
    </blockquote>

网站后台加入相识时间输入框

这里是为了方便与用户的交互，只要在后台的【设置外观】按格式填入相识时间即可

在网站根目录找到/usr/themes/Brave/function.php双击打开编辑，找到

Text
1
 $lovetime = new Typecho_Widget_Helper_Form_Element_Text('lovetime', NULL, NULL, _t('恋爱起始日期设定'), _t('格式“MM/DD/YYYY HH:MM:SS”，例“01/28/2022 23:02:00”'));

在前面加入

Text
1
2
$meetingtime = new Typecho_Widget_Helper_Form_Element_Text('meetingtime', NULL, NULL, _t('初遇起始日期设定'), _t('格式“MM/DD/YYYY HH:MM:SS”，例“08/20/2013 14:00:00”'));
$form->addInput($meetingtime);

回到后台的【设置外观】即可看到新增了初遇起始时间设定，时间格式参考下图

image.png
image.png

考虑到首页的计时器数字过大，可以在/usr/themes/Brave/base/style.css中找到第一个.bigfontNum{}将字体大小改为2rem

Text
1
2
3
.bigfontNum{
 font-size: 2rem;
}

如果看不到效果的变化请清除浏览器的cookie后刷新网站页面

image.png
image.png

> 插入音乐

有两种方式：一种是直接在网页下面添加背景音乐（只插入一首音乐），一种是在网站里加入一个音乐播放器（可以播放一个列表的音乐）

网页插入背景音乐

以网易云为例，网易云现在已经支持以外链的方式将网易云音乐插入网页中

  1. 浏览器登录网易云音乐

  2. 找到自己想插入的音乐，点击生成外链播放器

image.png
image.png
  1. 复制HTML代码到想插入的页面中
image.png
image.png
  1. 以插入到lovelist页面为例，找到并打开loveListPage.php，将以下的代码加入到<?php $this->need('base/footer.php'); ?>之前，保存
1
2
3
<div class="container text-center">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=26376060&auto=1&height=66"></iframe>/*此处插入前面复制的HTML代码*/
</div>

效果：

image.png
image.png

文章插入背景音乐

这个需要安装一个meting插件，将插件上传至网站根目录/usr/plugins，在后台【控制台】【插件】中启用该插件，启用成功后可以进行相关设置。进入文章撰写页点击右上角的耳机图标，插入音乐链接即可在文章中插入音乐

下载地址：https://distance1998.lanzouw.com/iKHPIzr806b

官网及使用手册：https://github.com/MoePlayer/APlayer-Typecho

插入音乐播放器

我目前使用的是这一种方式在网站插入音乐，打开foot.php，在</body>前插入如下代码

1
2
3
4
5
6
7
8
9
10
11
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<meting-js
 server="netease"/*插入网易云*/
 type="playlist"/*c插入歌单*/
 id=""/*插入歌单id*/
 fixed="true"/*启用吸底模式*/
 autoplay="true"/*自动播放，仅适用于手机浏览器，经测试PC端和微信打开自动播放均会被禁止*/
 loop="all"/*循环播放*/
 >

找到网易云歌单id的方法很简单，就是进入歌单主页在地址栏中找到id后面的数字，将数字填入到id=""，恰好网易云有一个共享歌单的功能，邀请另一半一起管理歌单，歌单会实时同步到网站的音乐列表下

image.png
image.png

如果想插入其他音乐，或设置其他参数可参考官方手册：https://github.com/metowolf/MetingJS

注：如果使用插入音乐播放器的方法就不要安装Meting插件了，两者会有冲突

> 加入鼠标点击特效

鼠标每点击网站页面一次，就会弹出一行文字，效果如下：

使用Typecho搭建一个简易情侣网站.gif
使用Typecho搭建一个简易情侣网站.gif

打开footer.php，在</body>前插入如下代码

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
<!--鼠标点击特效-->
<script type="text/javascript">
jQuery(function () {
        $("html").click(function(e) {
            var a_idx = Math.floor((Math.random() * 30));/*鼠标点击随机出现一句话，代码数字请与添加的短句数量相一致*/
            var a = new Array(
                "希望全世界停电 我可以偷偷跑去亲你", "我会爱你很久很久","我在贩卖日落 你像神明一样将阳光撒向我","陪伴本身就是这个世界上最了不起的安慰方式", "嘿，我是一朵云ლ(⁰⊖⁰ლ)", "❤"
                   ,"陪你把岁月熬成清酒 陪你把孤夜熬成温柔","❤","月光下邂逅的是爱情和你","祝眉目舒展 顺问冬按","只想拥你入怀","这个世界乱糟糟的 而你干干净净","日月星辰之外 你是第四种难得","我会在每个有意义的时刻 远隔山海与你共存","山脚下遇见的你 我们山顶见","想试试在你迎面跑来一把抱住你的感觉","在生命里的旅程里 遇见你真好","如果不曾遇见 岂知生命如何","❤"
                   ,"想和你一起走过下雪后的天","在我贫瘠的土地上你是最后的玫瑰","今晚月色很美呢","r=a(1-sinθ)","天青色等烟雨 而我在等你","你是我这一生等了半世未拆的礼物","你养我 我养你 两人爱情甜蜜蜜","人的一生会遇见两个人 一个惊艳了时光 一个温柔了岁月","你不用多好，我喜欢就好","愿有岁月可回首 且以深情共白头"
                 );/*请在此添加句子*/
            var color1 = Math.floor((Math.random() * 255))
            var color2 = Math.floor((Math.random() * 255));
            var color3 = Math.floor((Math.random() * 255));

            var $i = $("<span />").text(a[a_idx]);
            var x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 9999999999999 ,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-family":"mmm",
                "fontSize":Math.floor((Math.random() * 5)+10),/*文字大小在10px到15px之间*/
                "font-weight": "bold",
                "color": "rgb("+color1+","+color2+","+color3+")",/*随机颜色*/
                "-webkit-user-select":"none",
                "-moz-user-select":"none",
                "-ms-user-select":"none",
                "user-select":"none",
            });
            $("body").append($i);
            $i.animate({
                    "top": y - 200,
                    "opacity": 0
                },
                3000,/*句子悬浮时间*/
                function() {
                    $i.remove();
                });
        });
    });
</script>

> 为网站添加灯笼

过年的时候为了增加喜庆可以为网站顶部添加灯笼，效果如下：

使用Typecho搭建一个简易情侣网站.gif
使用Typecho搭建一个简易情侣网站.gif

打开footer.php，在</body>前插入如下代码[5]

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!--灯笼-->
<div class="deng-box2">
  <div class="deng">
    <div class="xian"></div>
    <div class="deng-a">
      <div class="deng-b">
        <div class="deng-t">年</div>
      </div>
    </div>
    <div class="shui shui-a">
      <div class="shui-c"></div>
      <div class="shui-b"></div>
    </div>
  </div>
</div>
<div class="deng-box3">
  <div class="deng">
    <div class="xian"></div>
    <div class="deng-a">
      <div class="deng-b">
        <div class="deng-t">新</div>
      </div>
    </div>
    <div class="shui shui-a">
      <div class="shui-c"></div>
      <div class="shui-b"></div>
    </div>
  </div>
</div>
<div class="deng-box1">
  <div class="deng">
    <div class="xian"></div>
    <div class="deng-a">
      <div class="deng-b">
        <div class="deng-t">乐</div>
      </div>
    </div>
    <div class="shui shui-a">
      <div class="shui-c"></div>
      <div class="shui-b"></div>
    </div>
  </div>
</div>
<div class="deng-box">
  <div class="deng">
    <div class="xian"></div>
    <div class="deng-a">
      <div class="deng-b">
        <div class="deng-t">快</div>
      </div>
    </div>
    <div class="shui shui-a">
      <div class="shui-c"></div>
      <div class="shui-b"></div>
    </div>
  </div>
</div>
<style type="text/css">.deng-box {
  position: fixed;
  top: -40px;
  right: -20px;
  z-index: 9999;
  pointer-events: none
}
.deng-box1 {
  position: fixed;
  top: -30px;
  right: 10px;
  z-index: 9999;
  pointer-events: none
}
.deng-box2 {
  position: fixed;
  top: -40px;
  left: -20px;
  z-index: 9999;
  pointer-events: none
}
.deng-box3 {
  position: fixed;
  top: -30px;
  left: 10px;
  z-index: 9999;
  pointer-events: none
}
.deng-box1 .deng, .deng-box3 .deng {
  position: relative;
  width: 120px;
  height: 90px;
  margin: 50px;
  background: #d8000f;
  background: rgba(216, 0, 15, .8);
  border-radius: 50% 50%;
  -webkit-transform-origin: 50% -100px;
  -webkit-animation: swing 5s infinite ease-in-out;
  box-shadow: -5px 5px 30px 4px #fc903d
}
.deng {
  position: relative;
  width: 120px;
  height: 90px;
  margin: 50px;
  background: #d8000f;
  background: rgba(216, 0, 15, .8);
  border-radius: 50% 50%;
  -webkit-transform-origin: 50% -100px;
  -webkit-animation: swing 3s infinite ease-in-out;
  box-shadow: -5px 5px 50px 4px #fa6c00
}
.deng-a {
  width: 100px;
  height: 90px;
  background: #d8000f;
  background: rgba(216, 0, 15, .1);
  margin: 12px 8px 8px 8px;
  border-radius: 50% 50%;
  border: 2px solid #dc8f03
}
.deng-b {
  width: 45px;
  height: 90px;
  background: #d8000f;
  background: rgba(216, 0, 15, .1);
  margin: -4px 8px 8px 26px;
  border-radius: 50% 50%;
  border: 2px solid #dc8f03
}
.xian {
  position: absolute;
  top: -20px;
  left: 60px;
  width: 2px;
  height: 20px;
  background: #dc8f03
}
.shui-a {
  position: relative;
  width: 5px;
  height: 20px;
  margin: -5px 0 0 59px;
  -webkit-animation: swing 4s infinite ease-in-out;
  -webkit-transform-origin: 50% -45px;
  background: orange;
  border-radius: 0 0 5px 5px
}
.shui-b {
  position: absolute;
  top: 14px;
  left: -2px;
  width: 10px;
  height: 10px;
  background: #dc8f03;
  border-radius: 50%
}
.shui-c {
  position: absolute;
  top: 18px;
  left: -2px;
  width: 10px;
  height: 35px;
  background: orange;
  border-radius: 0 0 0 5px
}
.deng:before {
  position: absolute;
  top: -7px;
  left: 29px;
  height: 12px;
  width: 60px;
  content: " ";
  display: block;
  z-index: 999;
  border-radius: 5px 5px 0 0;
  border: solid 1px #dc8f03;
  background: orange;
  background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)
}
.deng:after {
  position: absolute;
  bottom: -7px;
  left: 10px;
  height: 12px;
  width: 60px;
  content: " ";
  display: block;
  margin-left: 20px;
  border-radius: 0 0 5px 5px;
  border: solid 1px #dc8f03;
  background: orange;
  background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)
}
.deng-t {
  font-family: 华文行楷, Arial, Lucida Grande, Tahoma, sans-serif;
  font-size: 3.2rem;
  color: #dc8f03;
  font-weight: 700;
  line-height: 85px;
  text-align: center
}
.night .deng-box, .night .deng-box1, .night .deng-t {
  background: 0 0 !important
}
@-moz-keyframes swing {
  0% {
    -moz-transform: rotate(-10deg)
  }
  50% {
    -moz-transform: rotate(10deg)
  }
  100% {
    -moz-transform: rotate(-10deg)
  }
}
@-webkit-keyframes swing {
  0% {
    -webkit-transform: rotate(-10deg)
  }
  50% {
    -webkit-transform: rotate(10deg)
  }
  100% {
    -webkit-transform: rotate(-10deg)
  }
}</style> 

> 为点点滴滴页面文章添加作者

Brave主题发布的文章可以在点点滴滴页面中查看，作者还贴心的加入了文章写作时间以及在时间前加一个深情地写于，觉得很浪漫

image.png
image.png

如果在深情地写于前加入谁谁写的那就更完美了，本来这个主题网站就应该两人一起来记录。加入作者的方法如下：

  1. 登录网站后台，选择【管理】【用户】进入到管理用户界面，选择新增，添加新的用户，填入基本信息（记住自己账号和密码），用户组选择管理员，最后点击增加用户，为另一半创建新账户。

  2. 登录宝塔面板，在【文件】的网站根目录找到并打开/usr/themes/Brave/index.php，大约在代码第23行，找到深情地写于，在前面加入<?php $this->author();后保存

Text
1
<time datetime="<?php $this->date('c'); ?>" itemprop="datePublished" > <?php $this->author(); ?> 深情地写于 <?php $this->date(); ?></time>
  1. 登录不同的账户撰写文章，在文章发布后就会显示是谁写的
640
640

> 添加botui聊天机器人

BotUI框架作为一款自动回复文字、图片、视频的JS聊天机器人，可以自由设置多种选项、触发关键词、输入框等内容，聊天内容或范围也可以自由设置，回复内容可以是文字、图片（GIF亦可）、视频。

botui可以帮助我们与网站访客进行简单地交互，比如用来自我介绍。

接下来演示一下怎么在Brave主题中加入这个聊天机器人。

首先在botui官网：https://github.com/botui/botui 下载必要组件的压缩包并完成解压，下载vue.min.js : https://distance1998.lanzouw.com/iAWaazth3uj并解压。登录宝塔面板，在/usr/themes/Brave目录下新建一个botui文件夹，将botui官网下载的build文件夹下的botui-theme-default.css、botui.min.css、botui.min.js及下载的vue.min.js一并上传至刚刚在宝塔面板新建的botui文件夹。

引入CSS样式文件

在head部分引入botui-theme-default.css、botui.min.css。打开网站后台，进入设置外观界面，找到头部自定义内容将下面代码填入到头部自定义内容输入框中

``html

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

#### 创建聊天机器人

在body部分添加机器人，引入`botui.min.js`、`vue.min.js`及交互内容`js`文件。其中交互内容`js`文件可以自己命名也可以直接命名为`botui.js`以下均以`botui.js`为例，在添加好交互内容后将`botui.js`上传到`/usr/themes/Brave/botui`文件夹下。

交互内容如何写请查看官方文档：`https://docs.botui.org/`。

给个小例子，你可以直接将以下代码粘贴到`botui.js`空文件中

```JavaScript
var botui = new BotUI("botui");
    botui.message.bot({
        delay: 200,
        content: "hi，欢迎来到这里😄"
    }).then(function() {
        return botui.message.bot({
            delay: 1000,
            content: "我是聊天机器人"
        })
    }).then(function() {
        return botui.message.bot({
            delay: 1000,
            content: "你想知道什么吗？"
        })
    }).then(function() {
        return botui.action.button({
            delay: 1500,
            action: [{
                text: "你来自哪里",
                value: "lz"
            },
            {
                text: "不感兴趣",
                value: "bgxq"
            }]
        })
    }).then(function(res) {
        if (res.value == "lz") {
            lz()
        }
        if (res.value == "bgxq") {
            bgxq()
        }
    });
    var lz = function() {
        botui.message.bot({
            delay: 1500,
            content: "我来自虚拟的网络"
        }).then(function() {
            return botui.message.bot({
                delay: 1500,
                content: "是个可爱的机器人😃"
            })
        })
    }
    var bgxq = function() {
        botui.message.bot({
            delay: 1500,
            content: "再见"
        })
    }

文章页面引入聊天机器人

这个比较简单，假设以上均设置好后，新建一篇文章，将以下代码粘贴到文章中（框架未美化），发布后就可以看到聊天机器人与访客的交互效果了。

1
2
3
4
5
<div class="botui-app-container" id="botui"><!-- id要与交互内容第一行的var botui = new BotUI("此处填一个id值")相同; -->
<bot-ui></bot-ui>
<script src="/usr/themes/Brave/botui/vue.min.js"></script>
<script src="/usr/themes/Brave/botui/botui.min.js"></script>
<script src="/usr/themes/Brave/botui/botui.js"></script>

最终效果如下：

640
640

网站首页添加聊天机器人

在Brave主题网站里，文章发布后要进入点点滴滴页面才能查看。而我想做一个在网站首页就可以查看的聊天机器人，通过聊天机器人来交互式地介绍这个网站。

方法是创建一个关于我们的模板文件，再创建一个新的页面选择这个模板页，最后将页面显示在网站首页。

1. 创建模板

创建一个about-us.php的空文件，将下面代码粘贴到这个文件中。将about-us.php通过宝塔面板上传到根目录下的/usr/themes/Brave文件夹下

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
<?php
/**
 * 关于我们
 * @package custom
 * Author: ace
 * CreateTime: 2022/02/10
 * about-us page
 */
    
$this->need('base/head.php');
$this->need('base/nav.php');?>
    
<div class="list-content mx-auto mt-5">
    <div class="list-top">
<h5 class="list-text">💕关于我们💕</h5>
    </div>
</div>

<div class="botui-app-container" id="botui" style="min-height:300px; padding:14px 6px 4px 6px; background-image:url(https://s2.loli.net/2022/02/10/htvkG9LmSJWK4CF.jpg); border-radius: 10px;">
    <h6 class="list-text" style="color:#F2F2F2;"><strong>与<?php $this->options->title() ?>对话中...</strong></h6>
    <bot-ui style="background:transparent;">
       <center>
         <h4 style="color:#F2F2F2;">Loading...</h4>
         <h5 style="color:#F2F2F2;padding-top:30px;">请刷新一次页面以使聊天机器人能正常显示</h5>
       </center>
    <bot-ui>
</div>
    
<script src="/usr/themes/Brave/botui/vue.min.js"></script>
<script src="/usr/themes/Brave/botui/botui.min.js"></script>
<script src="/usr/themes/Brave/botui/botui.js"></script>
<?php $this->need('base/footer.php'); ?>
2. 创建新的独立页

登录网站后台，选择创建页面，在自定义模板中选择关于我们模板，标题任意填写，链接可以填写about-us。最后点击发布页面

3. 设置关于我们页面显示在网站首页

找到并打开/usr/themes/Brave/functions.php，将以下代码填入到functions.php中保存，最好靠近lovelist和祝福板表单。

1
2
3
4
 $aboutPageIcon = new Typecho_Widget_Helper_Form_Element_Text('aboutPageIcon', NULL, NULL, _t('首页关于页面图标'), _t('在此输入图标直链，将显示在首页关于小版块中'));
    $form->addInput($aboutPageIcon);
    $aboutPageLink = new Typecho_Widget_Helper_Form_Element_Text('aboutPageLink', NULL, NULL, _t('关于页面链接'), _t('在此输入关于页面链接'));
    $form->addInput($aboutPageLink);

在网站后台的设置外观填入图标链接和前面创建页面的链接，链接前要加http(s)://

640
640

找到并打开/usr/themes/Brave/indexPage.php，将以下代码填入<div class="row indexPlate">下方并保存，代码中的文字可任意修改

Text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
        <div class="col-md-4">
            <a href="<?php $this->options->aboutPageLink() ?>" class="card ">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <div class="avatar avatar-md">
                                <img src="<?php $this->options->aboutPageIcon() ?>" alt="..." class="avatar-img rounded-circle">
                            </div>
                        </div>
                        <div class="col">
                            <p class="h5">关于我们</p>
                            <p class="small text-muted mb-1">💑我们的经历</p>
                        </div>
                    </div>
                </div>
            </a>
        </div>

回到网站就可以发现关于我们页面已经出现在网站首页

640
640

点击关于我们进入交互聊天机器人页面，效果如下：

640
640

如果你的效果与我的不一样或者想让手机端有个更好的显示效果，请打开/usr/themes/Brave/botui/botui.min.css将以下代码替换11行的.botui-app-container选择器

1
.botui-app-container{width:90%;height:100%;line-height:1;margin:0 auto}@media (min-width:600px){.botui-app-container{width:600px;height:500px;margin:0 auto}}

注：目前基于页面的聊天机器人可能会出现加载不出的情况，这是由于该主题具有pjax无刷新加载网页的功能，关于页面中的js文件无法被网页加载，解决办法就是刷新一次关于页面。基于文章的聊天机器人则不会出现这种情况。

> 为网站添加相册

如果一个网站没有相册功能那也太不完美了，Brave主题本着简洁不自带相册功能。那么如何给Brave主题添加相册呢？

通过搜索找到了一个基于typecho的相册单页面模板，该模板来自：https://github.com/zzd/photo-page-for-typecho，感谢作者的开源。作者提供了两种相册模板：Multiverse和lens。Multiverse demo：https://html5up.net/uploads/demos/multiverse/ Lens demo：https://html5up.net/uploads/demos/lens/

在GitHub上下载模板文件后，将其中的Multiverse.php、Lens.php、Multiverse文件夹及Lens文件夹上传到/usr/themes/Brave文件夹下。以Multiverse相册风格为例进行创建相册演示

创建相册页面

登录网站后台，选择创建页面，在自定义模板中选择Multiverse风格照片集模板，标题填写相册，链接可以填写album。最后点击发布页面

设置相册页面显示在网站首页

与创建关于我们页面相同，将以下代码填入到functions.php中保存

1
2
3
4
$albumPageIcon = new Typecho_Widget_Helper_Form_Element_Text('albumPageIcon', NULL, NULL, _t('首页相册页面图标'), _t('在此输入图标直链，将显示在首页相册小版块中'));
    $form->addInput($albumPageIcon);
    $albumPageLink = new Typecho_Widget_Helper_Form_Element_Text('albumPageLink', NULL, NULL, _t('相册页面链接'), _t('在此输入相册页面链接'));
    $form->addInput($albumPageLink);

在网站后台的设置外观填入图标链接和前面创建相册页面的链接，链接前要加http(s)://

640
640

将以下代码填入indexPage.php合适的位置并保存，代码中的文字可任意修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="col-md-4">
            <a href="<?php $this->options->albumPageLink() ?>" class="card ">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <div class="avatar avatar-md">
                                <img src="<?php $this->options->albumPageIcon() ?>" alt="..." class="avatar-img rounded-circle">
                            </div>
                        </div>
                        <div class="col">
                            <p class="h5">相册</p>
                            <p class="small text-muted mb-1">🖼️留住你我回忆</p>
                        </div>
                    </div>
                </div>
            </a>
        </div>

回到网站可以发现相册页面已经出现在网站首页

640
640

发布照片到相册

方法是打开前面创建的相册页面，在页面中填入照片标题,拍摄时间,照片的链接分隔的逗号为英文逗号。也可以不填标题时间，但照片的链接前一定要有,,。更多使用说明请查看作者的readme文件。相册效果如下：

640
640
640
640

> 为lovelist页面清单增加完成时间

原主题的恋爱清单只能显示清单有无完成和插入一张图片，如下：

640
640

但我想让每个清单里都能显示一个完成清单的时间，经过摸索解决了我的需求。

在宝塔面板找到并打开/usr/themes/Brave/core/App.php，在$out .= '<div class="card-body p-0">'（大约第58行）下方插入如下代码

1
$out .= '<div class="lover-card-title" style="padding:10px 8px 10px 8px;">清单完成时间：'.$value['listct'].'</div>';

重新编辑恋爱清单页面，清单完成时间的关键字是listct

示例：

1
2
3
4
5
6
[loveList]

[item status="1" img="图片url" listct="2022-02-03"]两个人共用一个博客记录生活点滴🖊️[/item]

[/loveList]

效果如下：

640
640

文字默认居中对齐，如果想文字左对齐就在style=""加入text-align:left;

当然除了写清单完成时间，也可以写一些对清单的描述。

> 为主题添加文章样式

本来是不打算改主题文章样式的，因为这个网站只是用来记录我们俩个人的生活和想法，能记录文字就行。但经过测试发现这不是样式简不简陋的问题了，这特喵的根本没有样式好不好

原主题文章样式长这样：

640
640

唉，还是自己重新写一个样式吧

修改后的文章样式：

640
640

如果想使用我的主题样式，请将下面的代码复制到/usr/themes/Brave/base/style.css中

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
/*文章样式部分*/
/*开始*/

/* 全局声明 */
#article{
  line-height: 1.6rem;
  letter-spacing: .3px;
}

/* 标题 */
#article h1,h2,h3{
  color:#666;
  font-weight:700  !important;
}
  
#article h1:before {
  display:block;
  content:"";
   margin-top:30px
}
    
#article h1:nth-of-type(1)::before {
  display:block;margin-top:10px;
}
    
#article h1{
  font-size:28px !important;
  color:#666;
  line-height:1.4;
  margin: 2rem auto 1.4rem !important;
  background:linear-gradient(to bottom,transparent 65%,rgba(152,176,141,.2) 0) no-repeat;
  width:auto;
  display:inline;
}
    
#article h1:after {
  display:block;
  content:"";
  margin-bottom:10px;
}
    
    
#article h2{
  font-size: 24px !important;
  margin: 1.6rem auto 1.2rem !important;
  border-left: 5px solid #98B08D;
  padding: .1rem .3rem ;
}
      
#article h3 {
  margin: 1.4rem auto 1.2rem !important; 
  font-size:21px !important;
  font-weight:bold;
  padding-bottom:3px;
  border-bottom:1px solid rgba(233,238,231);
}

#article h4{
  margin: 1rem auto 1rem !important; 
  font-size:19px !important;
}

#article h5{
  margin: 1rem auto 1rem !important;
  font-size:17px;
  color:#98B08D;
}
    
#article h6{
  margin: 1rem auto 1rem !important;
  font-size:17px;
}

/* 段落 */
#article p{
  font-size:15px;     
}
 
/* 引用 */
#article blockquote{
  font-family: "Helvetica", Arial, "kaiti","pingfangSC light", "microsoft yahei" !important;
  margin: 1.6rem auto 1.2rem !important;
  padding: 15px 10px 1px 15px;
  line-height: 27px;
  background-color:#F7F7F7;
  border-left:3px solid #98B08D;
  color:#808080;
  display:block;
}
 
/* 行内代码 */
#article li code,p code{
  color: #789769 !important;
  background-color: rgba(233,238,231,0.5);
  font-family: "LM Mono 10","microsoft yahei","Times New Roman",Arial, simsun, "pingfangSC light", sans-serif;
  font-size: 0.875rem;
  box-sizing: border-box;
  margin: 0 4px;
  padding: 1px 2px ;
  border-radius: 2px;
  box-shadow: 0 0 .8px .8px rgba(129,181,103,.5);
}
  
/*列表*/  
#article ol,
#article ul {
  padding-left: 25px;
  margin: .5rem 0;
}
    
#article ol>li,
#article ul>li {
  color: #333;
}
    
#article li::marker{
  color: #617a55;
}
    
    
#article ol {
  margin: 1.2rem auto 1rem !important;
  padding-left: 25px !important;
   list-style-type: decimal !important;
}
    
#article ul {
  list-style-type: circle;
}
    
#article ul ul,
#article ol ul{
  list-style-type: disc;  
}
          
#article ul ul ul,
#article ol ul ul,
#article ol ol ul,
#article ul ol ul{
  list-style-type: square;  
}
    
 /*表格*/
#article table {
  margin: 1.6rem auto !important;
  width: 100%;
  overflow: auto;
  display: table;
  font-size: 14px;
  border-spacing: 0;
  border-collapse: collapse;
  word-break: normal;
  word-wrap: normal;
  border-radius: 3px;
  box-shadow: 2px 2px 5px 1px #8c8c8c61;
}
    
#article table td, table th {
  border-radius: 3px;
  padding: 6px 13px;
  word-break: keep-all;
}
    
#article table th {
  font-weight: 700;
  color:#789769;
  background-color: #f8f8f8;
}
    
#article table tr:nth-child(2n) {
  background-color: #f8f8f8;
}

/* 分割线 */
#article hr {
  margin: 2rem 0 !important;
  border-top: 2px dotted #F2F2F2 !important;
}
    
#article pre{
  margin: 1.2rem auto 1.6rem!important;
  padding:10px 15px;
  background-color:#F2F2F2 !important;
  border-radius:5px;
}

/* 图片 */
#article img {
  margin:1rem auto;
  border: 10px solid #ffffff!important;
  outline: 1px solid #F2F2F2;
}

/* 文字加粗 */
#article strong{
  color: #6FB147;
  font-weight: bold;
}
    
#article strong::before {
  content: '「';
}
    
#article strong::after {
  content: '」';
}

/* 动态彩虹字 考虑到斜体用的比较少，将斜体语法改为显示动态彩虹字 */
#article em {
  font-style:normal;
  background-image: linear-gradient(to left, orangered, orange, gold, lightgreen, cyan, dodgerblue, mediumpurple, hotpink, orangered);
  background-size: 110vw;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-animation:rainbow 60s linear infinite;
  animation: rainbow 60s linear infinite;
}
    
@keyframes rainbow {
  100% {
  background-position: -2000vw;
}
}

button, input, optgroup, select, textarea {
  margin: 1rem 0 1rem -15px !important;
}

/* 删除线 */
del {
  padding: 1px 2px;
  text-decoration: line-through #F87466;
  color:#808080;
}

/* 文章最后加上THE STORY CONTINUES... */
#article:after{
  content:'THE STORY CONTINUES...';
  font-size:16px;
  display:block;
  text-align:center;
  margin-top:50px;
  color:#999;
  border-bottom:1px solid #eee;
}

/*结束*/

考虑到不经常使用斜体，所以我把斜体的样式改成了动态彩虹字效果，语法是在想要的文字效果前各加一个*

640
640

想要实现文字高亮的效果请在style.css文件中加入以下代码

1
2
3
4
5
6
/*文字高亮*/
.highlight{
  background-color: #9BE9B3;
  padding: 2px 4px;
  margin: 0 2px;
}

在书写文章时写入以下语法就可给文字加上高亮：

<span class="highlight">这里的文字都会有高亮效果</span>

如果想自己二次修改样式可以在上面的代码进行修改，每段代码所对应的样式我已经给了注释，你只需要会一些简单的css语法即可自己定制。

最后

参考资料

[1]Brave主题: https://blog.zwying.com/archives/59.html

[2]秦枫鸢梦: https://blog.zwying.com/

[3]Typecho安装包: http://typecho.org/download

[4]Brave主题官方下载地址: https://github.com/zwying0814/Brave

[5]网站顶部挂上灯笼: https://www.vfaner.com/2080.html

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧