来！感觉一下程序员的浪漫！

颤抖吧女人们

先看一波预览：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也行。