修改指引 index.html

本页将指引您修改 index.html 中的内容，将其改为您需要的内容

加载动画

在源码第17-24行包含一个div.loader的容器和css，他们共同组合了加载动画，修改时请对整块进行修改。需要注意的是只有容器class为loader时才可以展示动画。具体原因在/assets/css/main.css中第105行

body.is-preload *, body.is-preload *:before:not(.loader), body.is-preload *:after:not(.loader) {
	-moz-animation: none !important;
	-webkit-animation: none !important;
	-ms-animation: none !important;
	animation: none !important;
	-moz-transition: none !important;
	-webkit-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
}

其中的not选择器选中的容器将不在应用无动画，可以在此处修改以选择其他容器。 加载动画原始素材在 https://codepen.io/Orangii/pen/vYgWXJZ ，需要注意的是，HTML5UP原团队将加载中body标签加入了 class="is-preload" 因此也许需要增加如下css以显示其动画并在加载完毕后隐藏，且不影响其他元素的操作。

.is-preload .loader{
	opacity: 1;
	z-index: 999;
}
.loader{
	opacity: 0;
	z-index: -999;
/* Other CSS*/
}

2021年7月2日新增在加载动画中摇一摇会出现倾倒的效果动画，实现过程、原理、源码等请参考js common.js的解释中的内容

首页直接展示的内容

在section#main中，你可以直接看到相关内容并修改。

例如修改头像需要修改36行这里的图片src

<span class="avatar"><img src="images/avatar.jpg" alt="" style="width: 122px; height: 122px;" /></span>

不过，不要轻易动关于Vue的内容（否则可能就直接无法加载） 例如

<div v-for="item in contacts" v-if="item.show" key="item.name" v-html="item.content"></div>
<button class="button small" key="button" @click="hideContact(true)" style="opacity: 0.55;" v-show="backButton">返回</button>
<li v-for="item in contacts"><a @click="showContact(item.name)" :class="item.icon">{{item.desc}}</a></li>

这里面 “返回” 是可以修改的，因为他和你在网页中看到的一样，且你理解它的含义，但是“ {{item.desc}} ”或“ @click="showContact(item.name)" ”你可能就需要谨慎修改，如果你学过Vue，那么这些是需要和Vue定义处一块修改；如果你只学过HTML+CSS+JS，那么这些你可能没看明白的地方就要谨慎修改了。

联系方式信息

这里需要来到117行位置，Vue定义中data中contacts部分，你可以看到“Change things below this line”的标识注释

/*          Change things below this line               */
//Contact info
contacts:[
	{
		name:"Wechat",
		icon:"icon brands fa-weixin",
		desc:"微信",
		content:"<img src='images/demoQR.png' class='qr' />",
		show:false
	},
//...
							
],

数据格式如下

• name: String 用于表示这个联系方式整体，便于程序定位， 非空且不同
• icon: String 用于展示图标，是一个class的值，使用fontawesome图标
• desc: String 描述信息，最好填上，用于一些有的没的的用处
• content: String 联系方式所展示的内容，HTML，具体作用可以点击模板展示页中底部三个按钮查看具体效果
• show: boolean 默认 false ，由程序修改，用于判断是否显示，若为 true 则直接就展示出来了

理论上你写多少个就会展示多少个，但是……超过5个可能会让网页看的很难看。

介绍页

也就是点击模板中“Click！按钮”后展示的内容，具体可看 https://template.orangii.cn/?page=1 修改的话需要来到142行处Vue data中page的数组处

// Pages content
page:[
	{
		title:"Page 1",
		texts:["Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore facere accusamus quae nesciunt at fuga dicta vitae quidem reiciendis. Quos blanditiis corporis vel iusto reprehenderit ratione distinctio fugiat quae sed."],
		html:"",
		imgs:["images/bg.jpg"]
	},
	// ...
],
/*            Change ends here                 */

数据格式如下（都是String我就不写了）

• title: 单个页面标题
• texts: 字符数组，每个数组元素都是字符串，每一个元素会被放入单独p标签，所以是可以分行的
• html: 以上的text如果你写了html，那么也不会解析成html，但是这里的html会确确实实解析为html
• imgs: 是个数组，每个元素为一个img的src，按顺序展示多张图片 以上属性都可以为空，只要你想。

理论上你写多少个就能展示多少页，但是我不保证你写个万八百页的浏览器能不能撑住。 但是仍然建议两页以上，默认最后一页是彩蛋页，不展示，于是你可以多做一页空页，要比改代码简单易懂一点。

Footer页脚

自PR#6完成后，本部分介绍的内容迁移至footer.html，请到对应处修改，内容相同

所有页面footer修改方案一致，就在此写一次以后就不写了（懒） 一看就会

<footer id="footer">
	<ul class="copyright" style="opacity: 0.5;">
		<li><a href="#">&copy; Untitled</a></li><li><small>Design: <a href="http://html5up.net" target="_blank">HTML5 UP</a></small></li><li>Background: <a href="http://unsplash.com" target="_blank">Unsplash</a></li>
	</ul>
	<ul class="copyright" style="opacity: 0.5;">
		<li>Untitled</li><li><a href="https://beian.miit.gov.cn/" target="_blank">备案号</a></li>
		<li><iframe src="" style="height: 1.5em; width: 5em; border-radius: 0;" name="GitHubStar"></iframe></li>
	</ul>
</footer>

为了尊敬原作者，第一个ul中的内容 建议保留 ，严格来说，你可以一直加ul及li标签，或修改其中的任何内容，好不好看我就不知道了。

过渡动画

所有页面的过渡都这样，就在这写一次了。 关于过渡动画，你可以按照Vue教程修改以下css

<style>
	.fade-enter-active, .fade-leave-active {
		transition: all .5s;
	}
	.fade-enter, .fade-leave-to {
		opacity: 0;
		transform: scale(0%,0%);
	}
</style>

不知道为什么，Chrome不支持 transform: scale(0,0); 所以Firefox你可以看到缩放，但是Chrome只有淡入淡出。

其他小东西

SEO及其他标签需要你自己去查并自己添加，这里就不多介绍了。

js中注释不多，但是命名比较规范，所以如果你了解Vue，可以按照你想要的效果改一改。

首页所有图片双击会在新标签中打开图片，代码在314行

$("body").on("dblclick","img",function(){window.open(this.src)});

/js/common.js中有 todonate() 函数可以跳转捐赠页

自动跳转展示联系页函数在最下面，如下

if(getQueryVariable("showContacts")||getQueryVariable("showcontacts")){
	(function(){
		var url;
		var browser = navigator.userAgent.toLowerCase();
		if (browser.match(/MicroMessenger/i) == 'micromessenger') {
			//微信浏览器
			url = "#"; // Your Wechat Link
			setTimeout(function(){mainsec.showContact("Wechat")},1500);
		} else if(browser.indexOf(' qq') != -1 && browser.indexOf('mqqbrowser') != -1){
			//qq内置浏览器
			url = "#"; // Your QQ link
			setTimeout(function(){mainsec.showContact("QQ")},1500);
		}
	})();
}

修改UA判断和 mainsec.showContact() 中的参数即可修改其效果