# 网站建设

**Repository Path**: Lorcia/website-construction

## Basic Information

- **Project Name**: 网站建设
- **Description**: 网站建设
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-01-08
- **Last Updated**: 2025-01-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
  <h1>网站运营报告</h1>
  <p>黄若涵 2210130125</p>
</div>  

#### 介绍
 2022级网络与新媒体一班黄若涵学习网站运营与管理课程的网站运营报告。 

## 运营报告目录
- [一、策划](#策划)
    - [（一）策划文档](#策划文档)
        - [1、网站建设目标](#网站建设目标)
        - [2、目标用户群体画像](#目标用户画像)
        - [3、网站规划](#网站规划)
        - [4、DVF模型](#DVF模型)
        - [5、网站地图](#网站地图) 
    - [（二）平面设计](#平面设计)
        - [1、网站图标的设计](#网站图标的设计)
        - [2、网站的动效](#网站的动效)
        - [3、网站布局与颜色](#网站布局与颜色)
        - [4、网站设计类插件](#网站设计类插件)
        - [5、网站部分图片展示](#网站部分图片展示)

- [二、管理](#管理)
    - [（一）网站管理](#网站管理)
        - [1、网站搭建](#网站搭建)
        - [2、网站安全](#网站安全)
        - [3、网站性能](#网站性能)
        - [4、网站备份](#网站备份)

- [三、运营](#运营)
    - [（一）站长工具](#站长工具)    
    - [（二）SEO优化](#SEO优化)
    - [（三）用户研究](#用户研究)
    - [（四）定制化](#定制化)

---

|  **网站名称**   | 20回忆录——关于JJ的一切 |
|  ----  | ----  |
| 站长  | 黄若涵(rhanw) |
| 网站url  | https://www.rhanw32.cn/ |
| 图片部分来源	  | 微博 |

# 一、策划

## 策划文档

### 网站建设目标：  

- 本网站旨在全面展示林俊杰的艺术成就与个人风采，通过文章总结介绍林俊杰的音乐历程、近期行程及成就，搭建一个与粉丝互动的互动平台。
网站内容将涵盖林俊杰的巡演信息，逐一总结每一站的精彩瞬间，并通过多媒体形式展示他的音乐创作与演出魅力。通过这一平台，我们希望能够进一步加强林俊杰与粉丝之间的联系，为粉丝提供一个集中交流、分享与支持偶像的社区环境。

### 目标用户画像  

* 群体用户画像：  

- 用户画像1
性别：女
年龄：21岁 
用户行为：喜欢听音乐，热衷参加偶像相关的粉丝活动，包括演唱会、线上直播、粉丝见面会等。平时在各种社交平台上发表言论，找寻粉丝团体。
用户需求：有专门平台可以分享偶像动态，与同好一起讨论偶像的最新动态和作品。

- 用户画像2
性别：男
年龄：36岁
用户行为：喜欢听歌，林俊杰伴随着他长大，但工作繁忙，很少关注其他相关信息。
用户需求：通过一个渠道整合所有资料，知道一手的咨询。

### 网站规划

1.前期规划（基础搭建与核心内容建设）
规划好网站的基本功能和内容架构，购买服务器与域名，采集收集相关内容，构思网页风格。

2.中期规划（网站搭建与功能优化）
完善网站内容与功能，上传前期准备好的文章以及其他附加内容，优化网站的SEO，使其在搜索引擎中排名更高，尤其是关于林俊杰的核心内容提。

3.后期规划（网站的安全性）
确保网站的响应式设计，确保多媒体内容（如视频、音频）流畅播放，配置好jetpack和seo等插件增强网站安全性。

### DVF模型

##1. 用户需求 (Demand)
1）清晰、美观、功能性强，带有林俊杰元素的网站设计。
2）创新顺滑的交互体验（动态效果、鼠标悬停特效等）。
3）包含林俊杰作品音乐或背景元素，增加沉浸感。

##2. 可行性 (Viability)
1）前端技术支持网站动态效果及自定义光标设计。
2）现有的WordPress插件（如粒子特效、音乐播放器等）能够吸引更多JJ音乐爱好者。
3）包含的林俊杰新歌资讯与巡演资讯会实时更新。

##3. 可持续性 (Feasibility)
1）动态效果与插件的持续运行需要监测性能与兼容性问题，需定期更新相关技术支持。
2）原创图片和内容需要持续创作，确保吸引力和访客的重复访问率。
3）可通过广告投放、增值服务获得收入。

### 网站地图（包括内链与外链）  
![输入图片说明](image/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-01-08%20161709.jpg)
![输入图片说明](image/wailian.jpg)
![输入图片说明](image/neilian.jpg)
---

### **1. 网站首页**  
- 内容概览：  
  展示网站的核心主题和歌手林俊杰的相关简介，包含最新动态或重点内容的简要介绍，如近期活动、新闻或精选文章。  
- 导航指引：  
  提供快速链接至各主要子页面的入口，增强访问便捷性。  

---

### **2. 回顾总结**  
- 总结林俊杰的世巡回顾和年度总结。    
   - 世巡回顾。
   - 音乐创作背后的故事。  
   - 重大事件的时间轴展示。  

---

### **3. 精彩世巡**  
- 记录林俊杰全球巡回演唱会的精彩瞬间，重点展示演唱会亮点、幕后花絮和粉丝互动。   
   - 演唱会地点与时间。  
   - 演出精彩视频或图片回顾。  
   - 林俊杰与友人互动内容。  

---

### **4. JJ20**  
- 林俊杰JJ20相关纪念内容，包括个人感悟、创作心得。    
   - JJ20特别企划的介绍。  
   - JJ20首次使用技术大事记。  

---

### **5. 所有文章**  
- 汇总网站的所有文章内容，按分类或时间顺序排列。方便用户浏览与搜索感兴趣的主题。   
    - 最新文章内容。  
    - 演唱会回顾。  
    - 林俊杰的生活与创作动态。  

---

### **6. ABOUT US**  
- 关于网站团队的介绍，包括建设初衷、团队成员和联系方式。   
   - 合作与联系表单。  

---

## 平面设计   

#### 1.网站图标的设计
* 站点图标融合了“林俊杰作为歌手的经典麦克风”和“林俊杰应援紫色代表色”的元素，采用简约风格设计，搭配深紫色为主色调，具体见：https://www.rhanw32.cn

![输入图片说明](image/%E9%BA%A6%E5%85%8B%E9%A3%8E.png)


#### 2.网站的动效
* 网站翻页的“下一页”有鼠标悬停更改颜色的动画效果。以下为鼠标悬停前后效果。

![输入图片说明](image/%E8%BD%A9%E4%BA%AD%E5%89%8D.jpg)

![输入图片说明](image/%E6%82%AC%E5%81%9C%E5%90%8E.jpg)

#### 3.网站布局与颜色
* 网站的主页与原创的文章页都使用了规范合理的页面布局，有序排列文章与区块。

![输入图片说明](image/%E9%A6%96%E9%A1%B5%E6%88%AA%E5%9B%BE.jpg)

* 网站使用了贴合网站主题的配色，深紫色为网站的主题色，不仅营造了神秘、高贵的氛围，也表达了林俊杰对音乐的执着和热爱。且字体为黑色，呈现较好可读性。

![输入图片说明](image/%E9%85%8D%E8%89%B2.jpg)

#### 4.网站设计类插件

* 使用了飘雪插件，让网站呈现出3D的下雪效果，使网站更美观。详见：https://www.rhanw32.cn/
![输入图片说明](image/%E9%A3%98%E9%9B%AA%E6%8F%92%E4%BB%B6.jpg)

![输入图片说明](image/%E9%A3%98%E9%9B%AA%E6%95%88%E6%9E%9C.jpg)

* 使用了浮窗音乐播放器插件，不仅使网站美观，更增加了可随机播放音乐的功能与歌词滚动，增加访客留存在网站的机会。

![输入图片说明](image/%E9%9F%B3%E4%B9%90.jpg)

#### 网站配图展示
5.网站大部分都使用了原创配图，图片配合文章能够增强网站的趣味性，使网站更美观。非原创图片已在页脚标注原图出处。

![输入图片说明](image/%E5%AA%92%E4%BD%93%E5%BA%93.jpg)


*****

# 二、管理
## 网站管理
#### 1.网站搭建
* 使用腾讯云轻量服务器搭建网站
域名网址:https://www.rhanw32.cn/
![输入图片说明](image/yuming.jpg)

#### 2.网站安全：使用Wordfence插件对网站进行安全管理
* 目前wordfence正在进行强力安全防护，防火墙已启用，扫描安全系数为60%，防火墙为48%。

![输入图片说明](image/wordfence.jpg)

* 防火墙系数比较弱，但拦截总数非常高，拦截了多次黑客攻击。

![输入图片说明](image/fanghuoqiang%20.jpg)


#### 3.网站性能：使用site24x7插件实时监控网站性能
* 安装了site24×7插件来监控我的网站，并使用RUM码配置在网站中确保了真实监控性能。

![输入图片说明](image/rum.jpg)

* 目前SITE24×7正在实时监控状态，但可以看到网站响应时间比较慢。

![输入图片说明](image/xiangying.jpg)

* 安装了以广州为主要监控点，
华盛顿 - 美国
特拉维夫 - IL
曼彻斯特 - 英国
班加罗尔 - 印第安纳州
首尔 - SK
广州 - CHN （小学）
台北 - TW为次要监控点。

![输入图片说明](image/guojia.jpg)

* 其中，反应时间每个国家都很平均，都在5s-15s之间，最快反应时间为0s，最慢反应时间为16s。

![输入图片说明](image/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-01-08%20152733.jpg)


#### 4.网站备份
* 网站备份截图
  （1）从wordpress仪表盘导出的网站数据
  （2）从宝塔面板备份的MySQL数据库压缩包
  （3）进入MySQL数据库面板导出的SQL源数据

![输入图片说明](image/beifen1.jpg)
![输入图片说明](image/beifen2.jpg)
![输入图片说明](image/sql.jpg)

*******
# 三、运营
## 站长工具 
### Bing网站管理员工具
* 通过在bing上搜索网站，发现已经在Bing网站管理员工具上已经收录成功，提交了网站地图，发现在引擎内已经可以显示有图片的索引网站。

![输入图片说明](image/shoulu.jpg)

* 不知道是不是bing站长工具需要翻墙登录的原因，点击量数据48h过去仍未更新，后续会在这里补充。。

## SEO优化
* 在开启seo之后，每次编写文章我都会格外注意seo显示的可读性。通过不断地修改和调整，seo给出的可读性判断是良好。

![输入图片说明](seo.jpg)

*通过检查seo发现文章没有内链，于是添加了最新文章内链，可以通过这个内链连接到其他文章。以及增加了邮箱外链

![输入图片说明](image/wailian.jpg)

![输入图片说明](image/neilian.jpg)


## 用户测评
#### 测评方式：将网站链接分享到一部分用户群体中进行测试。

1.部分用户已经在网站中发表了自己的评论。

![输入图片说明](image/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-01-08%20161311.jpg)

2.使用网站的用户表示，网站中的配色会比较明亮，虽然代表了林俊杰的元素，但觉得网站配色可以更丰富突出，并且提高舒适度。



## 加分项
使用HTTPS：https://www.rhanw32.cn

![输入图片说明](image/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-01-08%20161400.jpg)


## 感谢您的阅读！