5分钟做一个免费的网页爱情树,快快学习发给自己的女朋友吧(微信QQ都可以查看哦)^_^

5分钟做一个免费的网页爱情树,快快学习发给自己的女朋友吧(微信QQ都可以查看哦)^_^

有什么特点:

  1. 网页是在线的, 可以微信发给你女朋友
  2. 你可以把在线地址转成二维码发给女朋友哦
  3. 可以自定义背景音乐哦
  4. 不需要编程基础, 任何人都会做的. 不过一定要先注册一个GitHub账号

你可以先打开这个地址查看我给我媳妇制作的爱情树

也可以看一下GIF效果

教程视频(5分钟):

5分钟做一个免费的网页爱情树https://www.zhihu.com/video/1132062193285480448

图文教程 Step one by one.

第一步:打开这个地址AJLoveChina/LoveTree ,先点击给个小星星^_^,然后点击Fork按钮

先点击给个小星星吧 (小星星就是收藏的意思) ^_^
fork 作者的仓库

第二步:fork完成之后,点击config.js文件

第三步:点击修改按钮,我们接下来修改config.js, config.js就是我们的配置文件,包含了我们爱情树网页的内容。比如表白文字,相爱时间,双方的昵称。

第四步:按照config.js文件的提示修改内容

第五步:修改好之后,当然就是保存了。Github保存的按钮叫做 Commit changes (提交修改) (还是蛮形象的哈)

第六步:提交之后。我们需要做一些设置来让我们的爱情树可以被别人访问,例如用手机浏览器,用微信等等打开,这样我们的爱情树才有意义啊。

第七步:在setting页面找到下图中的设置,点击master branch, 然后页面会自动刷新。

第八步:上一步完成之后,继续滚动页面到下图位置,点击图中https//xxx/loveTree/ 那个链接, 如果打开页面显示404, 请在地址最后一个斜杠/后面加上 index.html 即可。(忽略地址最后的小数点,那个没有用)

这里我们的教程就完成了,如果有问题欢迎在下方评论哦,傲天老铁会在看到之后回复的。

然后赶紧做一个属于自己的爱情树发给自己的女朋友吧~~~

(傲天温馨提示,把地址转成二维码之后发给女朋友更有意思哦,而且不要用那种土土的黑白二维码,这里我推荐一个二维码美化工具 awesome-qrcode,可以做出非常炫酷的二维码,比如下面二维码是我做的爱情树网页,你可以微信扫一扫看看)

Tip:awesome-qrcode是一款开源的二维码美化工具

男人可以不帅,但是一定要骚

bye bye~~

(PPS:欢迎在Github关注一下傲天呗 我会经常分享+开发一些有趣的应用,楼主是实力开发(*^▽^*) )

AJLoveChina - Overviewgithub.com图标


更新日志

  1. 2020年1月2日更新 修复safari时间显示NaN的bug (在此时间之前已经fork的老铁需要重新fork才能修复这个bug) ( 感谢@Ploros 老铁的反馈)
  2. 2020年1月17日更新,回答 @万花筒 如何修改音乐?(这里不文字说明了, 直接给个GIF图,注意音乐文件的名称必须是 music.mp3,必须这个名字哦!!)
音乐文件的名称必须是 music.mp3

3. 2020年3月5日更新,多位老铁反馈音乐无法播放,那是因为Chrome已经基于其内核的浏览器限制了音乐的自动播放。已修复,改成用户点击右上角的音乐LOGO播放。

4. 2020年3月5日更新,看到好多老铁们的幸福表白,真心替你们开心~~😀

编辑于 2020-03-05