畢業(yè)不說再見，青春不散場

經(jīng)歷了動(dòng)蕩的2020年，讓2021年的同窗時(shí)光顯得格外珍惜。早上的起床號(hào)仍然會(huì)響起，食堂的阿姨照常準(zhǔn)備早餐，門口的大爺照例檢查著證件和健康碼，三年在一起已經(jīng)980天18個(gè)小時(shí)51分59秒。但是又是一年畢業(yè)季，疫情影響了你們開學(xué)的時(shí)間，卻沒有影響到你們畢業(yè)，少了盛大的畢業(yè)典禮，但是一起走過的青春不會(huì)忘記。

畢業(yè)是千百萬個(gè)人，千百萬個(gè)夏天的故事，我們有千百萬個(gè)理由讓你的畢業(yè)更加特別一點(diǎn)。阿里云云開發(fā)平臺(tái)的用戶安南同學(xué)定制了他的專屬畢業(yè)紀(jì)念冊，他將他的紀(jì)念冊奉獻(xiàn)給大家，讓所有的畢業(yè)生都可以快速擁有自己的云上畢業(yè)紀(jì)念冊，通過阿里云云開發(fā)平臺(tái)一鍵上線。不管你是IT大拿、還是建站小白，都可以分分鐘獲取自己專屬的也畢業(yè)紀(jì)念冊。畢業(yè)不說再見，青春不散場！

畢業(yè)紀(jì)念冊效果圖

畢業(yè)紀(jì)念冊的上線步驟

1. 創(chuàng)建應(yīng)用

a. 登陸云開發(fā)平臺(tái)

登錄云開發(fā)平臺(tái)。使用阿里云賬號(hào)登錄，按照提示創(chuàng)建團(tuán)隊(duì)，點(diǎn)擊同意協(xié)議。沒有阿里云賬號(hào)的用戶，在登錄頁面注冊后進(jìn)行登錄即可。為了保證最好的使用體驗(yàn)，請使用Chrome瀏覽器。

b. 創(chuàng)建應(yīng)用

打開快速開始，點(diǎn)擊創(chuàng)建新應(yīng)用。

c. 云資源訪問授權(quán)。

云資源訪問授權(quán)。如果您之前沒有使用過云開發(fā)平臺(tái)，會(huì)出現(xiàn)云資源授權(quán)管理的選項(xiàng)，往下拉出現(xiàn)直至同意授權(quán)的字樣，點(diǎn)擊「同意授權(quán)」后出現(xiàn)授權(quán)成功，點(diǎn)擊進(jìn)入「下一步」。

d. 選擇語言和計(jì)算服務(wù)。

分別選擇開發(fā)語言NodeJS，創(chuàng)建方式選擇直接創(chuàng)建，然后點(diǎn)擊下一步。然后填寫應(yīng)用的名稱和介紹，選擇所屬產(chǎn)品線（按需要選擇），計(jì)算服務(wù)選擇FC。然后點(diǎn)擊完成，云服務(wù)如果沒有開通需要開通一下，開通不收費(fèi)。

2. 配置和上線應(yīng)用。

a. 下載畢業(yè)紀(jì)念冊的代碼。

訪問https://github.com/cloudworkbench/memory-album 下載源代碼后解壓縮到本地目錄。

b. 創(chuàng)建環(huán)境

應(yīng)用創(chuàng)建成功后會(huì)跳轉(zhuǎn)到應(yīng)用詳情頁面，點(diǎn)擊日常環(huán)境的「部署配置」，依次選擇 【自動(dòng)創(chuàng)建環(huán)境】-【選擇任意可用區(qū)】-【自動(dòng)創(chuàng)建交換機(jī)】

c. 在線開發(fā)部署

環(huán)境配置完成后，完成后回到如下頁面，點(diǎn)擊在線開發(fā)部署，在新的窗口打開WebIDE部署, 點(diǎn)擊「在線開發(fā)部署」，打開CloudIDE上傳代碼文件。

d. 上傳代碼文件

CloudIDE加載完成后，選中下載后解壓好的文件，將源碼文件直接拖拽到CloudIDE的根目錄，上傳完成后記得保存并且推送。

e. 一鍵上線畢業(yè)紀(jì)念冊

點(diǎn)擊CloudIDE左側(cè)的部署Tab，選擇日常環(huán)境，點(diǎn)擊立即部署，在彈出框中確認(rèn)配置后繼續(xù)部署。部署完成后產(chǎn)生臨時(shí)域名，即可訪問好部署的站點(diǎn)?？禳c(diǎn)給同學(xué)們分享一下吧，臨時(shí)域名30分鐘有效期。

f. 綁定線上域名

生產(chǎn)的臨時(shí)域名是云開發(fā)平臺(tái)免費(fèi)提供的，有效期只有30分鐘，過期之后需要手動(dòng)刷新才可以生效。如果想保留作為長期的畢業(yè)站點(diǎn)使用，可以綁定自己的域名，現(xiàn)在很多域名1塊錢首年。

在你購買的域名控制臺(tái)，配置CNAME映射到該域名，下圖以阿里云的域名控制臺(tái)為例。如果你是新購的域名還沒有備案的話，在云開發(fā)平臺(tái)創(chuàng)建一個(gè)region在香港的產(chǎn)品也可以立即使用。

在云開發(fā)平臺(tái)的應(yīng)用詳情頁面點(diǎn)擊線上環(huán)境的「域名配置」，綁定配置好的域名，并且按照日常環(huán)境的配置進(jìn)行「環(huán)境配置」，保存后打開「在線開發(fā)部署」進(jìn)行一鍵部署即可使用自己的域名進(jìn)行訪問。

畢業(yè)紀(jì)念冊可定制的功能

. 背景圖更換

在index.html中更改url的路徑images/classroom.png，或者替換文件夾里classroom.png文件

body { perspective: 1000px; display: block; padding:0; margin:0; overflow:hidden; background-image:url("images/classroom.png"); background-position: center center; background-repeat: no-repeat; background-size: cover;
櫻花透明度

在index.html中更改opacity 0~1之間的數(shù)字,1是完全清晰 0是隱形

/*櫻花透明度*/ canvas { padding:0; margin:0; opacity:0.3;
在一起計(jì)時(shí)

在js/time.js下輸入入學(xué)年份就可以算出來在一起的時(shí)間

var arr = "2018-10-1 21:00:00".split(/[- :]/);//改這里var box = document.getElementsByClassName('textCon')[0];
黑白上畢業(yè)紀(jì)念的話

在js/typing.js中修改str的內(nèi)容以及顯示的速度,也就是到時(shí)候黑板上顯示的內(nèi)容，字體大小/顏色/位置可以在css中調(diào)整

let divTyping = document.getElementById('text')//divlet i = 0,//初始化 timer = 0, str = '山無棱,天地合,才敢與君絕'//要顯示的字function typing () { if (i <= str.length) { divTyping.innerHTML = str.slice(0, i++) + '_'//當(dāng)字沒顯示完的時(shí)候,從字符串上切下來上去 timer = setTimeout(typing, 450)//每次的間隔 }
旋轉(zhuǎn)相冊

在css/xuanzhuan.css中，自定義圖片, 圖片大小 以及 旋轉(zhuǎn)相冊位置，可以替換掉image文件夾里的圖片。

.xuanzhuan { width:200px; height:200px; margin: 100px auto; background: url("../images/xuanzhuan/shu.jpg") no-repeat; background-size: cover; transform-style: preserve-3d; position: absolute; transition: 15s linear; top: 50%; left: 42%; z-index: initial;}.xuanzhuan:hover{ transform: rotateY(360deg);}.xuanzhuan div{ height:150px; width: 200px; position: absolute; background-size: cover; background: no-repeat;}.xuanzhuan div:nth-child(1){ /*0,0,2,1*/ background: url("../images/xuanzhuan/1.jpg"); background-size: cover; transform:rotateY(0deg) translateZ(400px);}.xuanzhuan div:nth-child(2){ background: url("../images/xuanzhuan/2.jpg"); background-size: cover; transform:rotateY(60deg) translateZ(400px);}.xuanzhuan div:nth-child(3){ background: url("../images/xuanzhuan/3.jpg"); background-size: cover; transform:rotateY(120deg) translateZ(400px);}.xuanzhuan div:nth-child(4){ background: url("../images/xuanzhuan/4.jpg"); background-size: cover; transform:rotateY(180deg) translateZ(400px);}.xuanzhuan div:nth-child(5){ background: url("../images/xuanzhuan/5.jpg"); background-size: cover; transform:rotateY(240deg) translateZ(300px);}.xuanzhuan div:nth-child(6){ background: url("../images/xuanzhuan/6.jpg"); background-size: cover; transform:rotateY(300deg) translateZ(300px);}
BGM音樂

這里采用的是外鏈引入音樂的方式，你也可以用自己本地的音樂文件，那樣打開更快，只要放到項(xiàng)目根路徑下直接引用就行。先生成外鏈，然后在index.html中引入，在index.html下的audio標(biāo)簽的里的source標(biāo)簽的src屬性中粘貼鏈接。

<!--音樂--><audio controls class="music"> <source class="music_a" src="http://m10.music.music/2021060508530538.mp3" type="audio/mpeg"></audio>