畢業不說再見，青春不散場

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

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

畢業紀念冊效果圖

畢業紀念冊的上線步驟

1. 創建應用

a. 登陸云開發平臺

登錄云開發平臺。使用阿里云賬號登錄，按照提示創建團隊，點擊同意協議。沒有阿里云賬號的用戶，在登錄頁面注冊后進行登錄即可。為了保證最好的使用體驗，請使用Chrome瀏覽器。

b. 創建應用

打開快速開始，點擊創建新應用。

c. 云資源訪問授權。

云資源訪問授權。如果您之前沒有使用過云開發平臺，會出現云資源授權管理的選項，往下拉出現直至同意授權的字樣，點擊「同意授權」后出現授權成功，點擊進入「下一步」。

d. 選擇語言和計算服務。

分別選擇開發語言NodeJS，創建方式選擇直接創建，然后點擊下一步。然后填寫應用的名稱和介紹，選擇所屬產品線（按需要選擇），計算服務選擇FC。然后點擊完成，云服務如果沒有開通需要開通一下，開通不收費。

2. 配置和上線應用。

a. 下載畢業紀念冊的代碼。

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

b. 創建環境

應用創建成功后會跳轉到應用詳情頁面，點擊日常環境的「部署配置」，依次選擇 【自動創建環境】-【選擇任意可用區】-【自動創建交換機】

c. 在線開發部署

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

d. 上傳代碼文件

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

e. 一鍵上線畢業紀念冊

點擊CloudIDE左側的部署Tab，選擇日常環境，點擊立即部署，在彈出框中確認配置后繼續部署。部署完成后產生臨時域名，即可訪問好部署的站點。快點給同學們分享一下吧，臨時域名30分鐘有效期。

f. 綁定線上域名

生產的臨時域名是云開發平臺免費提供的，有效期只有30分鐘，過期之后需要手動刷新才可以生效。如果想保留作為長期的畢業站點使用，可以綁定自己的域名，現在很多域名1塊錢首年。

在你購買的域名控制臺，配置CNAME映射到該域名，下圖以阿里云的域名控制臺為例。如果你是新購的域名還沒有備案的話，在云開發平臺創建一個region在香港的產品也可以立即使用。

在云開發平臺的應用詳情頁面點擊線上環境的「域名配置」，綁定配置好的域名，并且按照日常環境的配置進行「環境配置」，保存后打開「在線開發部署」進行一鍵部署即可使用自己的域名進行訪問。

畢業紀念冊可定制的功能

. 背景圖更換

在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之間的數字,1是完全清晰 0是隱形

/*櫻花透明度*/ canvas { padding:0; margin:0; opacity:0.3;
在一起計時

在js/time.js下輸入入學年份就可以算出來在一起的時間

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

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

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

在css/xuanzhuan.css中，自定義圖片, 圖片大小 以及 旋轉相冊位置，可以替換掉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音樂

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

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