Skip to content

Commit

Permalink
docs: 完善Readme
Browse files Browse the repository at this point in the history
  • Loading branch information
rychouwei committed Aug 16, 2019
1 parent 4ffb1ce commit e8343b5
Show file tree
Hide file tree
Showing 3 changed files with 208 additions and 78 deletions.
129 changes: 129 additions & 0 deletions README.md
View file
Expand Up @@ -15,3 +15,132 @@
想要达到撩人的效果，最重要的还是文字啦。

> 背景告白气球特效扒自网络，非自己编写。如有侵权请联系：974393900@qq.com
## 使用教程

> 下面步骤涉及到`Git`和`npm`的使用，如果你还不会用，请百度自学。
### 将本仓库克隆到本地

```shell
git clone https://github.com/Rychou/two_years
```

### 同步依赖

``` shell
npm install
```

### 启动项目

```shell
npm start
```

### 进行个性化编辑

这一步就可以对自己想要的纪念日期、背景音乐、文字等进行个性化编辑。

#### 纪念日

打开项目根目录下的`src/Main.js文件`，找到如下代码。

```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`，在文件开头，找到如下代码。

```js
import React, { Component } from 'react'
import $ from 'jquery'
import url from './audio/gbqq.mp3' // 引入背景音乐文件。填写文件路径。建议文件名用英文。
```

#### 网页标题和信封标题

修改网页标题，打开`public/index.html`，找到以下代码：

```html
<title>两周年纪念！</title> <!-- 将这里的文字替换成你想要的标题即可-->
```

修改信封标题，打开`src/App.js`，找到如下代码：

```html
<div className="text">你收到一封信，点击查收！</div> <!-- 将这里的文字替换成你想要的标题即可 -->
```

#### 核心：文章内容

最重要的部分其实是你的文字部分，其他的都不重要，重要是文字要走心。

打开`src/Main.js`，找到如下代码，将你要写的话，写到对应位置。

```jsx
<div className="date">{date()}</div>
<div id="autotype">
<h1 style={{ fontWeight: 900 }}>哈喽！wuli趴布猪！</h1> <!-- 文章开头文字 -->
<p >在煽情开始之前，先放首歌当背景音乐吧！Music!</p> <!-- 文章内容 -->
<p>今天是我们两周年的纪念日，从2016年4月23日到现在，我们一起经历了许许多多的事情，
有欢笑也有争吵，也曾因为一些事情闹过分手，但是我们都走过来了。</p>
<!-- 此处省略800字 -->
</div>
```

### 打包编译

执行命令

```shel
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分钟左右打开 https://userName.github.io 即可。

### 更骚的操作

你可以买自己的域名，比如常见的英文域名等。最骚的是，你可以买一个中文域名 **XXX.我爱你**。注意这是可行的。

只不过中文域名的配置稍微复杂一些，具体怎么操作我也不太记得了，但也不难，大家自行百度即可。

## 写到最后

这个网页是我在大二时期写的，现在已经准备大四了，也找到了自己心仪的前端岗位实习。

异地狗是正的很难受，当时我跟她相隔1300公里，在纪念日当天却不能相见，真是很难受。当时也不知道要送啥才好，于是想到自己也是程序员，那就用程序员的方式表达浪漫吧～

于是就写了这个网页，当时的代码现在看起来写的是很烂，也没有花太多心思去考虑代码，功能实现了就行了。如果大佬们见到了这么烂的代码别吐槽哈，我自己已经吐槽了自己了哈哈哈。

最后想祝愿各位不管是兄弟还是姐妹们，能够和另外一半长长久久，幸福美满！

> 如果大家在实现的时候遇到了什么问题，也欢迎邮件: 974393900@qq.com 或直接加 QQ也行。
43 changes: 22 additions & 21 deletions src/App.js
View file
Expand Up @@ -3,30 +3,31 @@ import './App.css';
import iconurl from './icon/爱心.png'
import Main from './Main'
class App extends Component {
state={
class:'bounceInLeft',
show:false
};
state = {
class: 'bounceInLeft',
show: false,

};

render() {

const main = ()=>{
if (this.state.show)
return <Main/>
}
return (
<div>
<div className={"envelope animated "+ this.state.class}>
<div className="triangle-down"></div>
<img className="heart" src={iconurl} onClick={()=>{
this.setState({class:'bounceOutRight',show:true})
}}/>
<div className="triangle-up"></div>
<div className="text">你收到一封信，点击查收！</div>
</div>
{main()}
</div>
);
const main = () => {
if (this.state.show)
return <Main />
}
return (
<div>
<div className={"envelope animated " + this.state.class}>
<div className="triangle-down"></div>
<img className="heart" src={iconurl} onClick={() => {
this.setState({ class: 'bounceOutRight', show: true })
}} />
<div className="triangle-up"></div>
<div className="text">你收到一封信，点击查收！</div>
</div>
{main()}
</div>
);
}
}

Expand Down
114 changes: 57 additions & 57 deletions src/Main.js
View file
@@ -1,104 +1,104 @@
/**
* Created by Rychou on 2018/4/19.
*/
import React, {Component} from 'react'
import React, { Component } from 'react'
import $ from 'jquery'
import url from './audio/gbqq.mp3'
import url from './audio/gbqq.mp3' // 引入背景音乐文件


class Main extends Component{
state={
date:{},
class Main extends Component {
state = {
date: {},
}
componentDidMount(){
componentDidMount() {
this.print();
setInterval(()=>{
this.time(2016,4,23)
},1000
setInterval(() => {
this.time(2016, 4, 23) // 你们的纪念日
}, 1000
)
var audio = document.getElementById("audio");
setTimeout(()=>audio.play(),8500)
setTimeout(() => audio.play(), 8500) // 背景音乐在页面加载后，延迟播放的时长，单位：毫秒。
}
print = ()=>{
$.fn.autotype = function() {
var _this=$(this);
var str=_this.html();
print = () => {
$.fn.autotype = function () {
var _this = $(this);
var str = _this.html();
// 正则替换代码行之间添加的多个空格，不去除换行输出会有明显的停顿：实际是在输出多个空格
str=str.replace(/(\s){2,}/g,"$1");
str = str.replace(/(\s){2,}/g, "$1");
var index = 0;
$(this).html('');
var timer = function fn() {
var args=arguments;
var current = str.slice(index, index+1);
var args = arguments;
var current = str.slice(index, index + 1);
// html标签完整输出,如：<p>
if (current == '<'){
if (current == '<') {
index = str.indexOf('>', index) + 1;
}
else{
else {
index++;
}
//位运算符: 根据setInterval运行奇偶次来判断是否加入下划线字符“_”，使输入效果更逼真
if (index < str.length-1){ //打印字符倒数第2个字符开始，不加下划线字符，以防止结束符可能会多输出一下划线字符
if (index < str.length - 1) { //打印字符倒数第2个字符开始，不加下划线字符，以防止结束符可能会多输出一下划线字符
_this.html(str.substring(0, index) + (index & 1 ? '_' : ''));
}else{
} else {
_this.html(str.substring(0, index));
clearTimeout(timer);
};
setTimeout(fn,200)
setTimeout(fn, 200)
};
// 延迟1s开始
setTimeout(timer,1000);
setTimeout(timer, 1000);
};
$("#autotype").autotype();
}
time =(year,month,day)=>{
time = (year, month, day) => {
var dateNow = new Date();
var dateJNR = new Date(year,month-1,day);
var dateJNR = new Date(year, month - 1, day);
// var anniversary = parseInt((dateNow - dateJNR) / (365*24*3600*1000))
var d = parseInt((dateNow - dateJNR)/(24*3600*1000));
var hour = parseInt(((dateNow - dateJNR)/(3600*1000))%24);
var minute = parseInt((dateNow - dateJNR)/(1000*60)%60);
var second = parseInt((dateNow - dateJNR)/1000%60);
this.setState({date:{d:d,hour:hour,minute:minute,second:second}});
var d = parseInt((dateNow - dateJNR) / (24 * 3600 * 1000));
var hour = parseInt(((dateNow - dateJNR) / (3600 * 1000)) % 24);
var minute = parseInt((dateNow - dateJNR) / (1000 * 60) % 60);
var second = parseInt((dateNow - dateJNR) / 1000 % 60);
this.setState({ date: { d: d, hour: hour, minute: minute, second: second } });
};
render(){
const date =()=>{
if (this.state.date.d!==undefined){
const {d,hour,minute,second} = this.state.date
render() {
const date = () => {
if (this.state.date.d !== undefined) {
const { d, hour, minute, second } = this.state.date
return (<p>我们已经一起走过了: <span className="date-text">{d}</span> 天 <span className="date-text">{hour}</span> 小时 <span className="date-text">{minute}</span> 分 <span className="date-text">{second}</span> 秒 </p>
)
}
}
return(
return (
<div className="App animated bounceInLeft">
<div className="date">{date()}</div>
<div id="autotype">
<h1 style={{fontWeight:900}}>哈喽！wuli趴布猪！</h1>
<p >在煽情开始之前，先放首歌当背景音乐吧！Music!</p>
<p>今天是我们两周年的纪念日，从2016年4月23日到现在，我们一起经历了许许多多的事情，
<div className="date">{date()}</div>
<div id="autotype">
<h1 style={{ fontWeight: 900 }}>哈喽！wuli趴布猪！</h1>
<p >在煽情开始之前，先放首歌当背景音乐吧！Music!</p>
<p>今天是我们两周年的纪念日，从2016年4月23日到现在，我们一起经历了许许多多的事情，
有欢笑也有争吵，也曾因为一些事情闹过分手，但是我们都走过来了。</p>
<p>高三那会，每天都期待着见到你，上课的时候视线会不自觉的到你身上；吃早餐帮你打好早餐，帮你洗早餐盒；
下课的时候假装凑到你身边看看你在干啥，有没有不会的题目，然后就可以教你做题，表面上是想展现
自己的学霸风采。实际上啊，是因为喜欢和你呆在一起。喜欢看你的甜美的笑容，喜欢轻轻地闻你的发香，
慢慢地开始喜欢你身上的一切。当从别人口中得知你喜欢我这句话时候，我那一整天都笑的合不拢嘴，晚上也睡不着，脑海里一直重复着那句话。
<p>高三那会，每天都期待着见到你，上课的时候视线会不自觉的到你身上；吃早餐帮你打好早餐，帮你洗早餐盒；
下课的时候假装凑到你身边看看你在干啥，有没有不会的题目，然后就可以教你做题，表面上是想展现
自己的学霸风采。实际上啊，是因为喜欢和你呆在一起。喜欢看你的甜美的笑容，喜欢轻轻地闻你的发香，
慢慢地开始喜欢你身上的一切。当从别人口中得知你喜欢我这句话时候，我那一整天都笑的合不拢嘴，晚上也睡不着，脑海里一直重复着那句话。
</p>
<p>在4月23日那天晚上，在书店，我还记得清清楚楚，你穿着T恤和短裤，头发还散发着清香，我的心好像有什么感应一样，一靠近你就开始加速跳动。
在回去的路上，我正要说出“我喜欢你”这四个字的时候，你突然打断我说：“我也是！”。那一刻感觉时间都静止了，
整个人都处于一种飘飘然的状态。再到后来高考后的那个暑假，也是我一生当中最难忘的暑假，初吻、约会、每天都歪腻在一起，真心的感谢你陪我度过的那些时光。
<p>在4月23日那天晚上，在书店，我还记得清清楚楚，你穿着T恤和短裤，头发还散发着清香，我的心好像有什么感应一样，一靠近你就开始加速跳动。
在回去的路上，我正要说出“我喜欢你”这四个字的时候，你突然打断我说：“我也是！”。那一刻感觉时间都静止了，
整个人都处于一种飘飘然的状态。再到后来高考后的那个暑假，也是我一生当中最难忘的暑假，初吻、约会、每天都歪腻在一起，真心的感谢你陪我度过的那些时光。
</p>
<p>然后我们就开始了漫长的异地恋，还记得我们异地后的第一次见面嘛，分别那天傍晚，一个人开着电动车哭到哽咽，口头上说着没事，但没想到分别竟然是如此刺痛，那时候我就决定，
“我魏锐，非汪雅秋不娶”。在异地的期间里，我们一起去过很多地方，留下过很多难忘的回忆。有人说：“异地恋其实并不难坚持，因为它真实地考验了
两个人的心”。是啊！我们异地经历的那些事，让我们能够看清对方的真心，也让我们的感情更加深厚。最近很喜欢《谁愿放手》中的一句话，“年年月月逝去越是觉得深爱你”。
<p>然后我们就开始了漫长的异地恋，还记得我们异地后的第一次见面嘛，分别那天傍晚，一个人开着电动车哭到哽咽，口头上说着没事，但没想到分别竟然是如此刺痛，那时候我就决定，
“我魏锐，非汪雅秋不娶”。在异地的期间里，我们一起去过很多地方，留下过很多难忘的回忆。有人说：“异地恋其实并不难坚持，因为它真实地考验了
两个人的心”。是啊！我们异地经历的那些事，让我们能够看清对方的真心，也让我们的感情更加深厚。最近很喜欢《谁愿放手》中的一句话，“年年月月逝去越是觉得深爱你”。
</p>
<p>我不善于文字表达，写这一个网页和说那么多话也就想表达“我爱你”这简单的三个字而已，说煽情一点就是：“我的心室是单人间，只住得下你一人！”
好期待以后结束异地后的同居生活啊，希望那一天早点到来。
<p>我不善于文字表达，写这一个网页和说那么多话也就想表达“我爱你”这简单的三个字而已，说煽情一点就是：“我的心室是单人间，只住得下你一人！”
好期待以后结束异地后的同居生活啊，希望那一天早点到来。
</p>
<p>最后祝wuli趴布猪两周年纪念日快乐哦！</p>
<div style={{textAlign:'right'}}>
<p>爱你的♥魏锐</p>
<p>2018年4月23日</p>
<p>最后祝wuli趴布猪两周年纪念日快乐哦！</p>
<div style={{ textAlign: 'right' }}>
<p>爱你的♥魏锐</p>
<p>2018年4月23日</p>
</div>
</div>
</div>
<audio id="audio" src={url}></audio>
</div>

Expand Down

0 comments on commit e8343b5

Please sign in to comment.