Skip to content

个人介绍模板详细介绍

Orangii edited this page Jun 26, 2021 · 2 revisions

这里是橙梓的个人简介模板介绍

这个仓库是橙梓的个人介绍网页的去文字化的模板,你可以自由改变内容及使用。

此网页基于HTML5UP团队制作的Identity(H5模板,好像在他们官网上找不到了),再自学三年HTML5+CSS3+Vue后添加了一些动画、展示方式及展示手段,让页面看起来更生动有趣。

在线版: https://template.orangii.cn/ 上线版: https://orangii.cn/

Screenshot

页面特色

首页

Demo: https://template.orangii.cn/

正如上面的截图所示,首页的样子基本与原模板Identity一致,但是本模板有一些特有的动画,如

或见此Wiki

  • 展示动画

Animation Animation

  • 还有很多细节没有展示,具体可以去在线版去看

首页可以使用一些get参数来获取不同的效果

  • showContacts 此参数会让页面打开后根据UA自动跳转到对应的联系方式信息,示例: https://template.orangii.cn/?showContacts 请使用微信或QQ浏览器打开查看效果 如需修改参照这个链接

  • page 使用 page=<int> 的方式来让页面打开后自动跳转到指定介绍页,示例: https://template.orangii.cn/?page=2

赞赏页

Demo: https://template.orangii.cn/donate.html

这个页面里该有的动画都有,与首页也相同,不过也具有一些独特的特色。

在这个页面里也是会根据UA自动打开对应的付款方式,目前支持QQ钱包、支付宝、微信,如需添加或修改UA支持可以查看这个链接

还可以使用 ?from=<URL> 的方式指定返回按钮需要返回的链接,例如: https://template.orangii.cn/donate.html?from=index.html

付款页

Demo: https://template.orangii.cn/donate.html

这个页面里除了之前动画、UA自动展示付款方式等,额外支持了金额显示的功能,使用GET amount=<double> 的方式指定显示的金额,例如 https://template.orangii.cn/pay.html?amount=2.33

同样,也支持 from 参数,与赞赏页面相同。

二维码生成页

Demo: https://template.orangii.cn/qr.html

在此页面你可以体验上述说到的完整功能,在页面中会自动生成带有各种所需参数的URL,只需要选择或填入想要的参数。 QRcode

需要注意的是,你需要提前更换example.com,否则链接及二维码就是错的了,方法在这里

开始上手

觉得这个网页不错?你也可以整一个!

  1. 利用Github Pages生成网页
  2. 根据Wiki修改内容
  3. 提交你制作的新功能

如果有什么建议意见,欢迎在Issue讨论~