來！感覺一下程序員的浪漫！

顫抖吧女人們

先看一波預覽：rychouuuu.coding.me/two_year/

Github 地址 github.com/Rychou/two_…

其實這是我在大二的時候，恰逢兩週年記念，異地又沒法見面，送禮又沒得錢錢，但卻有聰明才智，搞了這麼個網頁，最終被感動到哭（本身）。

使用教程

下面步驟涉及到Git和npm的使用，若是你還不會用，請百度自學。

將本倉庫克隆到本地

git clone https://github.com/Rychou/two_years
複製代碼

同步依賴

npm install
複製代碼

啓動項目

npm start
複製代碼

進行個性化編輯

這一步就能夠對本身想要的記念日期、背景音樂、文字等進行個性化編輯。

記念日

打開項目根目錄下的src/Main.js文件，找到以下代碼。

componentDidMount() {
    this.print();
    setInterval(() => {
        this.time(2016, 4, 23) // 1.填寫大家的記念日
    }, 1000
    )
    var audio = document.getElementById("audio");
    setTimeout(() => audio.play(), 8500) // 背景音樂在頁面加載後，延遲播放的時長，單位：毫秒。
}
複製代碼

背景音樂

項目默認的背景樂是周董的《告白氣球》，你也能夠換成對方最喜歡的音樂。建議從網上找到音樂文件下載到src/audio/目錄下，而且推薦mp3格式的文件，兼容性好。

將文件下載好後，打開src/Main.js，在文件開頭，找到以下代碼。

import React, { Component } from 'react'
import $ from 'jquery'
import url from './audio/gbqq.mp3' // 引入背景音樂文件。填寫文件路徑。建議文件名用英文。
複製代碼

網頁標題和信封標題

修改網頁標題，打開public/index.html，找到如下代碼：

<title>兩週年記念！</title> <!-- 將這裏的文字替換成你想要的標題便可-->
複製代碼

修改信封標題，打開src/App.js，找到以下代碼：

<div className="text">你收到一封信，點擊查收！</div> <!-- 將這裏的文字替換成你想要的標題便可 -->
複製代碼

核心：文章內容

最重要的部分實際上是你的文字部分，其餘的都不重要，重要是文字要走心。

打開src/Main.js，找到以下代碼，將你要寫的話，寫到對應位置。

<div className="date">{date()}</div>
    <div id="autotype">
        <h1 style={{ fontWeight: 900 }}>哈嘍！wuli趴布豬！</h1> <!-- 文章開頭文字 -->
        <p >在煽情開始以前，先放首歌當背景音樂吧！Music!</p> <!-- 文章內容 -->
        <p>今天是咱們兩週年的記念日，從2016年4月23日到如今，咱們一塊兒經歷了許許多多的事情，
        有歡笑也有爭吵，也曾由於一些事情鬧過度手，可是咱們都走過來了。</p>
        <!-- 此處省略800字 -->
    </div>
複製代碼

打包編譯

執行命令

npm run build
複製代碼

執行完後，會在build目錄生成打包後的網頁，你能夠直接把這個打包後的網頁當場給你女友看。但這就不能遠程訪問了。

若要遠程訪問，有兩個辦法：

1. 部署到遠程服務器，不推薦，由於若是要用本身域名的話，須要備案。
2. 部署到Github Pages 或 Coding Pages，推薦，由於域名可不備案，沒那麼複雜，成本也更低。

部署到Github Pages

網上有不少文章講這個東西，我這裏不作過多詳細的介紹，簡單講一下流程。

1. 在Github上建立一個空的倉庫，以 userName.github.io 做爲倉庫名。其中 userName 是你的用戶名。
2. 將倉庫克隆到本地
3. 將剛剛打包編譯後的網頁（build目錄下全部文件），複製粘貼到倉庫根目錄。
4. 用git push 到遠程倉庫。
5. 在倉庫的設置頁面，啓動Github Pages服務。大概1分鐘左右打開 userName.github.io 便可。

更騷的操做

你能夠買本身的域名，好比常見的英文域名等。最騷的是，你能夠買一箇中文域名 XXX.我愛你。注意這是可行的。

只不過中文域名的配置稍微複雜一些，具體怎麼操做我也不太記得了，但也不難，你們自行百度便可。

寫到最後

這個網頁是我在大二時期寫的，如今已經要大四了，也找到了本身心儀的前端崗位實習。

異地狗是正的很難受，當時我跟她相隔1300千米，在記念日當天卻不能相見，真是很難受。當時也不知道要送啥纔好，因而想到本身也是程序員，那就用程序員的方式表達浪漫吧～

因而就寫了這個網頁，當時的代碼如今看起來寫的是很爛，也沒有花太多心思去考慮代碼，功能實現了就好了。若是大佬們見到了這麼爛的代碼別吐槽哈，我本身已經吐槽了本身了哈哈哈。

最後想祝願各位不論是兄弟仍是姐妹們，可以和另一半長長久久，幸福美滿！

沒有另外一半的，趕忙找！

若是你們在實現的時候遇到了什麼問題，歡迎郵件: 974393900@qq.com 或直接加 QQ也行。