最终效果


预览地址:

https://tczmh.gitee.io

源码地址:

https://gitee.com/tczmh/tczmh

二维码:(微信中可以直接长按识别后预览,不会被拦截)


电脑预览效果:


手机预览效果:





新的发现


在之前初识gitee page的时候就写过一篇博客:零基础3分钟内教会你做一个自己的博客网站


这次主要内容还是基于上一次的,所以基本的注册和新建项目就不重复了,建议先看一眼上次的博客就好了


这次重点说几个新发现


1:如果你注册的用户名是tczmh,那你开一个同名的项目作为gitee page的话,原本的https://tczmh.gitee.io/tczmh/ 可以省略成 tczmh.gitee.io ,也就是用户名+.gitee.io,而且天生支持https和在微信打开不被拦截!简直不要太爽!


2:网址可以通过草料cli.im来转成二维码,这样就可以放在求职简历或者发到微信朋友圈,微信扫一扫或者长按识别二维码,都可以直接看到最终的H5网站。另外也可以通过t.im来一次生成短连接和二维码,方便传播


3:目前大部分都是无后台的静态页面。当然也可以通过2个方案来增加可扩展性。第一个方案是用vue + json文件的方式存储信息,例如自己写一个博客网站,一个总的目录json和每一篇博客是一个json。之后也只要git通过更新json来更新网站内容。另一个方案是直接用gitee默认支持的3套博客模板来建站,Jekyll、Hugo、Hexo,再用git更新内容,前提是有node/go/ruby/php之类的语言基础





代码部分



网站模板原地址 : http://www.cssmoban.com/cssthemes/8073.shtml


源码gitee地址 : https://gitee.com/tczmh/tczmh , 已把所有内容集成到vue的data中,只要改变data参数就可以生成出一个全新的内容,相当于一个简介模板


位置 : tczmh / js / common.js

  1. var app = new Vue({
  2. el: '#app',
  3. data: {
  4. name:" 渣 渣 輝 ",
  5. background_image:'img/66624.jpg',
  6. avatar:'img/tuling.jpg',
  7. str1:" 我 是 碼 农 ",
  8. str2:" 也 是 民 間 手 艺 人 ",
  9. str3:" 我 是 程 序 猿 ",
  10. str4:" 也 是 艺 術 家 ",
  11. about_p1:'我是一个爱编程,爱游戏,爱运动,唯独不爱说话的程序猿!',
  12. about_p2:'嘿嘿嘿,下面这张图是我随便找的,我们程序猿的祖师爷!',
  13. // 技能 和 百分比
  14. skill1:'HTML / CSS3',
  15. skill1_num:'60%',
  16. skill2:'Javascript',
  17. skill2_num:'90%',
  18. skill3:'VUE',
  19. skill3_num:'60%',
  20. skill4:'MySQL / NoSQL',
  21. skill4_num:'70%',
  22. skill5:'JAVA',
  23. skill5_num:'95%',
  24. skill6:'LINUX',
  25. skill6_num:'80%',
  26. work_years:3, // 工作年限
  27. project_num:16, // 项目总数
  28. code_line_num:666666,// 总代码量,
  29. school1:'加州理工大学', // 学校1
  30. major1:'量子物理学', // 专业1
  31. major_dtl1:'主要研究物质世界微观粒子运动规律的物理学分支,主要研究原子、分子、凝聚态物质,以及原子核和基本粒子的结构、性质的基础理论它与相对论一起构成现代物理学的理论基础。', // 简介1
  32. school2:'伯克莱大学', // 学校2
  33. major2:'哲学', // 专业2
  34. major_dtl2:'每一个人在本性上都想求知。', // 简介2
  35. years1:'2010 - 2012',
  36. years2:'2013 - 2016',
  37. job1:'研发',// 职位
  38. jobp1:'疑难杂症妙手回春', // 工作简介
  39. cpn1:'Google Labs', // 公司
  40. cpnyear1:'2015 - 2017',
  41. job2:'开发',
  42. jobp2:'从0到1',
  43. cpn2:'Facebook',
  44. cpnyear2:'2017 - 2018'
  45. }
  46. })