MAGIC
Home Tags Archives Links here

☔如何拥有博客自定义网页

2020-08-27 👩‍💻编程

img
yeah！！！purple Rain！☔☔☔☔☔☔
以下全是我非常不专业的教程
额外加料：添加hexo评论系统

用了两天时间搞定的想法

  • 最初是想：哎呀，我该怎么把p5js交互效果加在首页的某个角落呢
    （我在一个白嫖到的挺好看的html文件里直接引入了js代码，结果无论怎样，画布都出现在了整个网页最下方，对齐了左边。啊十分抱歉毁了原文件的美观。）
  • 然后我想：至少……能变成不能交互的网页动态背景应该不过分吧。
    （之前有看过类似案例。于是去找了找之前班里分享过的案例，找到了这个，又白嫖到html和css了哈哈哈哈。但是！博客好像都是统一的主题风格，这要怎么修改去哪里修改首页配置。）
  • 最后我想：要不然……做一个独立的页面吧，但一定要在博客网址下！
    （无限降低要求🤦因为实在懒得再去折腾搞起另一个网站建立注册的东西了。）

好吧，其实过程并没有上面那么顺利，我试图把博客网站文件找下来，以为真的可以搞到一个文件里加一段代码就好了。就是这些文件之间的关系太没有概念了。后面放弃了，去查了各种html，css的语言、架构，非常粗略地了解了一下这些语言分别的功能，暂时是没有找到方法（后来找到了见新文章）。

0.目标

决定先从搞定一个网页开始，尝试html，css，js三者联合打造。
最后再试试把它引入到博客网址下，实现网络浏览。

1.purple Rain来源

原p5js代码，是根据油管大神视频 紫雨processing代码，跟着思路敲下来的，但是有挺多不完善的地方，后来差不多改好成如下效果了。

See the Pen purpleRain0 by ZHEGExyy (@zhegexyy) on CodePen.

2.添加html,css样式

参考案例
https://codepen.io/ge1doot/pen/vOQZGG

See the Pen purpleRain1 by ZHEGExyy (@zhegexyy) on CodePen.

ps：codepen上的html一栏只需要写标签body内的内容
而完整的html文件代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
    <script src="./script.js"></script>
    <!-- 以上两行载入p5js,以及js文件路径 -->
    <link rel="stylesheet" href="/test.css">
    <!-- 以上一行载入css文件路径 -->
  </head>
  <body>

    <div class="text">
      <div id="div1" nowrap>PURPLE RAIN<br>A css test in 20/08/26</div>
  </div>

  </body>
</html>

3.改进，加入交互

  • 交互方式：
    • 按钮不同状态不同css特效
    • 按钮点击后下雨文本发光，再次点击 雨消失文本恢复
  • 按钮加入方法：html内书写<button>``</button>
  • 涉及知识点：
    • css加入有关标签botton参数
    • html发生事件（鼠标点击按钮），触发js函数
    • js函数修改CSS参数

3.0 设定初始状态

  • 类里面设置this.dir初始值为 createVector(0,0)
  • 定义状态变量a，初始值为0
  • 函数Down()根据a值变化执行命令

3.1 html中加入按钮，按钮被点击触发js函数Down()

1
2
3
4
5
6
7
8
(html)
    <body>
    <div class="text">
        <div id="div1" nowrap>PURPLE RAIN<br>A css test in 20/08/26</div>
        <button class="button" onclick="Down()">click!</button>
        <!-- onclick="事件"--点击按钮触发事件 -->
    </div>
</body>

3.2 css定义 按钮 的style

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
.button {
    display: block;
    position:absolute;
    top:70%;
    left:50%;
    transform: translate(-50%, -50%);

    padding: 15px 25px;
    font-family: 'Poiret One', cursive;
    font-size: 20px;
    font-weight:bold;
    cursor: pointer;
    /* 鼠标提示是否可以访问 */
    text-align: center;   
    text-decoration: none;
    outline: none;
    color: #fff;
    background-color: rgb(138,43,226)  ;
    border: 2px solid #fff;
    border-radius: 15px;
    /* box-shadow: 0 5px 5px rgb(193, 193, 193, 100); */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #ffffff;
    color: rgb(138,43,226);
    font-size: 35px;
    box-shadow: 0 0px 20px rgb(255,255,255);
}

3.3 函数Down()根据状态值a改变css文件内的style参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//a是一个flag，
function Down(){
    if(a==0){
    for(let i=1;i<500;i++){
        d[i].yspeed = d[i].yspeed+d[i].gra
        d[i].dir = createVector(0,d[i].yspeed)

    }

        var div1 = document.getElementById('div1');
	    div1.style.textShadow="0px 0px 15px #ffffff";
        //文本阴影位移（0，0），扩散像素为15，颜色：白。实现效果：文本发光
        a=1
    }else{
        for(let i=1;i<500;i++){
            x= random(width)
            y=random(-200,-100)
            d[i] = new Drop(x,y)
        }
        var div1 = document.getElementById('div1');
	    div1.style.textShadow="0px 0px 0px #ffffff";
        //文本阴影扩散像素为0，被文本本身覆盖看不见。
        a=0
    }

See the Pen

4.加入博客小分队

教程参考https://blog.csdn.net/qq_40922859/article/details/100877777
简单来说
1.先按上面的教程，使hexo渲染跳过指定的（前面步骤自定义的）html文件
2.可以选择添加顶部菜单按钮（比如我这里的Here）,将url设为html文件路径

！！！添加hexo评论系统

看到一篇极为详细的常用评论系统分析！！！！

type ] 自定义小标题

来自Hexo-Theme-Yun 开发者：云游君
https://www.yunyoujun.cn/share/third-party-comment-system/

最后我选择了livere(来必力)，源自韩国，可支持微信微博qq，十分亲民！
官网：https://livere.com/
注意：cards主题自带livere的city版本（免费），无需多余操作
商业版或者使用其他hexo主题的详细方法请查询网上教程（某个关键步骤我查到了三个版本，实在找不到权威方法。）

  1. 注册账号，注意：验证邮件可能会躺在你的垃圾邮件里。
  2. 选择city版本，跳转页面可以看到一长串代码，复制你的data_uid.
  3. 回到主题目录下，填入你要使用的评论系统
    1
    2
    comments: 
      use: livere
  4. 在comment下找到livere，粘贴uid
    1
    2
    livere:
      livere_uid: 填入uid
  5. 完成！
    可以进入livere官网管理页
    • 查看各类评论数据
    • 调整授权登入平台类型

最后更新于2021-07-19

👩‍💻编程 # html

Comments