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

經歷了動盪的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在香港的產品也可以立即使用。

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

畢業紀念冊可定製的功能

1. 背景圖更換

在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')//div
let 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>

在雲端，在一起！領取畢業大禮包

畢業不說再見，青春不散場！在雲端，在一起！

點擊訪問問答https://developer.aliyun.com/ask/321737的留言區域晒出自己「線上環境」部署的畢業紀念冊（包括網址和截圖）可以獲得10元的代金券一張，在6月30號18點之前點贊數前10的留言將獲得我們送出的畢業大禮包，阿里雲的公仔盲盒一個，讓你的青春永遠在線！

致青春！一鍵上線你們專屬的雲上畢業紀念冊