# 网站运营 **Repository Path**: NFUNM037/web ## Basic Information - **Project Name**: 网站运营 - **Description**: No description available - **Primary Language**: M - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2019-06-27 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 网站运营与管理 ## 一、策划 #### （1）网站建设目标 1、 让用户了解来着各界的运动巨星 2、 发掘更多的运动届新星 3、 让用户感受体育的氛围，加入体育活动中来 ---- #### （2）目标用户画像 ![目标用](https://images.gitee.com/uploads/images/2019/0629/222416_2c0df0d9_1648154.jpeg "图帮主3336164.jpg") ---- #### （3）网站规划 1、首先加入/引入大量的运动巨星介绍文章 2、宣传我的网站 3、吸取用户意见，并不断优化改善 ---- #### （4) dvf模型 ![dvf](https://images.gitee.com/uploads/images/2019/0628/014935_5d719da3_1648154.jpeg "dvf.jpg") ----- #### (5) 网站地图 ![网站地图](https://images.gitee.com/uploads/images/2019/0628/015029_577b55cb_1648154.jpeg "网站地图.jpg") ---- ## 图片的使用 #### 1、图片版权 - 文章/封面内所有来源自网络中的图片都有标注来源并且链接到原网站。 ![版权](https://images.gitee.com/uploads/images/2019/0628/015253_be99a857_1648154.png "微信图片_20190628015237.png") ----- #### 2、图库风格和配色 ![顶部图像](https://images.gitee.com/uploads/images/2019/0628/015338_e17dfde6_1648154.png "微信图片_20190628005746.png") - 顶部图像采用了一个人在奔跑的阴影图，这很符合我网站运动的主题，让人身临其境感受体育氛围。紧接着，是网站滑块的图像，用的都是巨星们的成名照，十分符合运动巨星的主题。 ![预览版块](https://images.gitee.com/uploads/images/2019/0628/015507_41788212_1648154.png "微信图片_201906280057462.png") - 预览文章的版块，文章的特色图片都是该文章人物的高清大图，可以第一眼就看出该人物是属于什么届的体育巨星，同时也可以第一眼感受他的性格。 ----- ##### 配色 ![配色](https://images.gitee.com/uploads/images/2019/0628/015621_26a779c2_1648154.png "微信图片_20190628010747.png") - 网站采用了红、黑、白三种配色，红色代表体育精神的激情似火，而黑与白的搭配使得版面更为简洁清楚，让用户可以第一时间看到重点内容。 ----- ## 云端架站踩坑图文文章 1、 https://www.fangwenxi.club/?p=16 2、 https://www.fangwenxi.club/?p=23 3、 https://www.fangwenxi.club/?p=10 ----- # 平面设计 ### 1、 背景、字体使用及对比度与可读性 - **背景及网站配色** ![背景及配色](https://images.gitee.com/uploads/images/2019/0629/005441_d0c88a31_1648154.png "微信图片_20190629005229.png") - 滑块版块的红黑配色，让红色的大标题更为显眼，而白色字体在红色版块上看起来也十分舒服和清楚。 ![小滑块](https://images.gitee.com/uploads/images/2019/0629/005627_d072da33_1648154.png "微信图片_201906290052291.png") - 小滑块的设计，文章日期、分类、标签运用了加粗的设计，让文章分类更为明确。 ![文章内部](https://images.gitee.com/uploads/images/2019/0629/005723_1c16636c_1648154.png "微信图片_201906290052292.png") - 使用黑白配色，白底黑字，使文章结构清晰明确。 ---- ### 2、平面设计插件运用 # **Animate it!** 1、 在侧边功能栏里，为**功能**添加了“ _animated rubberBand delay1 duration2 eds-on-hover_ ”，使得本身反馈点击很平淡的版块，加上了**弹簧**效果，让用户更能体验到点击反馈。 ![功能](https://images.gitee.com/uploads/images/2019/0629/013854_c6bb7dca_1648154.png "微信图片_20190629013649.png") ![效果](https://images.gitee.com/uploads/images/2019/0629/013914_e58e4efc_1648154.png "微信图片_201906290136492.png") 2、 在页脚小工具栏的**近期文章**栏，添加了“ _animated grow delay1 duration2 eds-on-hover_ ”，使得文章的名字更大，更突出，让用户更容易关注到本网站的文章。 ![文章](https://images.gitee.com/uploads/images/2019/0629/014154_b21d5cf2_1648154.png "微信图片_201906290136491.png") ![效果](https://images.gitee.com/uploads/images/2019/0629/014206_779b1b9b_1648154.png "微信图片_201906290136493.png") ----- # SiteOrigin 1、 在**巨星名言名句**页面添加了一张图像，更符合该页面的主题。 - 页面链接：https://www.fangwenxi.club/?page_id=6 ![页面图像](https://images.gitee.com/uploads/images/2019/0629/014643_a1255c5f_1648154.png "微信图片_20190629014632.png") ![页面图像](https://images.gitee.com/uploads/images/2019/0629/014742_689a69b2_1648154.png "微信图片_20190629014726.png") 2、 在**KOBE BRYANT —你见过凌晨四点的洛杉矶吗？**文章中，添加了搜索框，使得用户可以马上找到自己想看的文章。 - 页面链接：https://www.fangwenxi.club/?p=103 ![搜索](https://images.gitee.com/uploads/images/2019/0629/014937_27288d2a_1648154.png "微信图片_20190629014928.png") ![搜索](https://images.gitee.com/uploads/images/2019/0629/015353_a56c53ee_1648154.png "微信图片_20190629015335.png") 3、 在**CRISTIANO RONALDO—没有努力，天份不代表什么**文章中，添加了页面栏，用户可以不用回到顶部就跳转页面了。 - 页面链接：https://www.fangwenxi.club/?p=123 ![页面](https://images.gitee.com/uploads/images/2019/0629/015459_f4925e39_1648154.png "微信图片_201906290153352.png") ![页面](https://images.gitee.com/uploads/images/2019/0629/015510_cfe86fb9_1648154.png "微信图片_201906290153351.png") ---- # 云端网站管理 ### 1、 云端架站 - 有正常可用的云端网站，使用域名 https://www.fangwenxi.club ### 2、 网站安全 - 使用了插件Wordfence来监控本网站的安全性 ![插件Wordfence](https://images.gitee.com/uploads/images/2019/0629/020418_6166461e_1648154.png "微信图片_201906290202432.png") ![插件Wordfence](https://images.gitee.com/uploads/images/2019/0629/020450_e69f39d3_1648154.png "微信图片_201906290202433.png") ![插件Wordfence](https://images.gitee.com/uploads/images/2019/0629/020500_58562891_1648154.png "微信图片_201906290202431.png") - 同时我还使用了插件Wordfence的蛮力保护的功能 ![插件Wordfence](https://images.gitee.com/uploads/images/2019/0629/020601_d60a7b34_1648154.png "微信图片_20190629020243.png") - 由此我知道插件Wordfence还可以设置入侵者连续试错密码后的强制关闭，让我的网站安全性更上一层楼，插件Wordfence还有很多防护功能等我去发现。 ----- ### 3、网站性能 - 使用site24x7进行监控 ![site24x7](https://images.gitee.com/uploads/images/2019/0629/020915_45a5f038_1648154.png "微信图片_20190629020753.png") - 添加8个监控地点 ![监控地点](https://images.gitee.com/uploads/images/2019/0629/020945_eee65d30_1648154.png "微信图片_20190629020757.png") - 有以下图片我们可以知道，在深夜，各项应答时间都会变得更少，应答得更快，同时即时在高峰期，网页的可用性和相应时间都是不错的。 ![site](https://images.gitee.com/uploads/images/2019/0629/021202_52ea36f7_1648154.png "微信图片_20190629021011.png") ---- ### 4、网站备份 ![备份](https://images.gitee.com/uploads/images/2019/0629/021610_98f08c18_1648154.png "微信图片_20190629021606.png") ![备份](https://images.gitee.com/uploads/images/2019/0629/021622_02388338_1648154.png "微信图片_201906290215081.png") ![备份](https://images.gitee.com/uploads/images/2019/0629/021701_cdc0c25b_1648154.png "微信图片_20190629021508.png") ---- # 站长工具 ### 1、百度认证 ![百度](https://images.gitee.com/uploads/images/2019/0629/094321_3bd9f5e8_1648154.png "微信图片_20190629094308.png") - **流量截屏** ![百度](https://images.gitee.com/uploads/images/2019/0629/094507_1909364c_1648154.png "微信图片_20190629094230.png") ### 成果展示 - 一开始我的网站是在很末尾的页面，之后，我开始很勤奋的更新我网站上面的文章，同时也对文章进行一系列的**SEO优化**，做完这些后，我发现我的网站来到了搜索引擎的第四页第一个。 ![SEO](https://images.gitee.com/uploads/images/2019/0629/094921_d5253a91_1648154.png "微信图片_20190629094755.png") ![百度搜索](https://images.gitee.com/uploads/images/2019/0629/094940_940dffc7_1648154.png "微信图片_20190629094803.png") ![百度搜索](https://images.gitee.com/uploads/images/2019/0629/094956_fa2c23f9_1648154.png "微信图片_20190629094800.png") ----- ### 2、bing认证 - **流量截屏** ![bing](https://images.gitee.com/uploads/images/2019/0629/134910_05dad155_1648154.jpeg "bing.jpg") ![bing](https://images.gitee.com/uploads/images/2019/0629/144152_080a0cc0_1648154.jpeg "bing1.jpg") ### 成果展示 - 一开始在bing上是无法用关键词搜索到我的网站的,如下图： ![bing搜索](https://images.gitee.com/uploads/images/2019/0629/142603_4d01fd45_1648154.jpeg "bing搜索2.jpg") - 之后我进行了几篇文章的关键词添加。 ![关键字](https://images.gitee.com/uploads/images/2019/0629/142751_79fadaf6_1648154.png "微信图片_201906291427401.png") ![关键字](https://images.gitee.com/uploads/images/2019/0629/142812_b20428ce_1648154.png "微信图片_20190629142740.png") -我的网站就可以成功在bing用关键字搜索到了！ ![搜索](https://images.gitee.com/uploads/images/2019/0629/143018_f54f8856_1648154.jpeg "bing搜索3.jpg") ----- ## SEO优化 - 关于**SEO优化**，我做了许许多多的尝试，最终我的文章都亮起了SEO的绿灯 ![seo](https://images.gitee.com/uploads/images/2019/0629/160539_98d4e0ce_1648154.png "微信图片_20190629160449.png") ![seo](https://images.gitee.com/uploads/images/2019/0629/160604_b19e158f_1648154.png "微信图片_20190629160457.png") ### 1、为文章里的图片添加alt属性 - 在图片的alt属性处加上本文的焦点关键词。 ![alt](https://images.gitee.com/uploads/images/2019/0629/162652_8e9cde63_1648154.png "微信图片_20190629162639.png") ![alt](https://images.gitee.com/uploads/images/2019/0629/162741_e49880aa_1648154.png "微信图片_20190629162731.png") ----- ### 2、在文章内部添加网站内部链接 ![内部链接](https://images.gitee.com/uploads/images/2019/0629/203124_c8cb457a_1648154.png "内部链接.png") ![seo](https://images.gitee.com/uploads/images/2019/0629/203322_0f518ff7_1648154.png "内部链接2.png") ---- ### 3、 在文章的meta元素的标题添加关键词描述以及修改文章标题长度 ![meta](https://images.gitee.com/uploads/images/2019/0629/203632_caefae17_1648154.png "meta.png") ### 4、关键词密度 -文章中关键词是不能太经常出现的，那会影响一整篇文章的可读性，因此我控制了关键词在文章中的数量，只出现四次！ ![密度](https://images.gitee.com/uploads/images/2019/0629/204057_cbb761b0_1648154.png "关键词密度.png") ### 5、面包屑导航 ![面包屑](https://images.gitee.com/uploads/images/2019/0630/202815_1a63b712_1648154.png "面包屑.png") ----- ## SEO优化之后jetpack流量监控前后对比 - 第一次优化SEO后，浏览量显著提升 ![seo](https://images.gitee.com/uploads/images/2019/0629/204855_5d1489e5_1648154.png "Jetpack.png") - 第二次优化SEO后，浏览量又一次达到顶峰 ![seo](https://images.gitee.com/uploads/images/2019/0629/204925_44a64aaa_1648154.png "Jetpack2.png") ----- # 用户研究 ### 方法A：用户访谈 - 访谈对象：五位一样正在上网站运营课的17级网新学生 - 访谈问题：针对网站色彩搭配和文章结构问题进行访谈 ----- - **通过访谈几位同学的意见比较统一如下：** - 1、 首页中，滑块按钮的颜色和其他配色很不搭 ![滑块](https://images.gitee.com/uploads/images/2019/0629/214649_efad678c_1648154.png "微信图片_20190629214217.png") - 2、文章预览模块的过场动画颜色太过难看 ![预览](https://images.gitee.com/uploads/images/2019/0629/214859_c4800c93_1648154.png "微信图片_20190629214754.png") - 3、文章没办法筛选分类，全部呈现在首页 ![分类](https://images.gitee.com/uploads/images/2019/0629/215059_db0d07dd_1648154.png "微信图片_20190629215044.png") - 4、页脚的三个栏目都希望能有互动效果 ![页脚](https://images.gitee.com/uploads/images/2019/0629/222756_0c8d38aa_1648154.png "微信图片_20190629222743.png") ---- - **针对上述四个问题，我马上进行了网站的首页设计** - 1、首先，我修改了**辅助背景色**，将原先的**蓝色**改为了**黑色**，满足了色彩搭配的需求，使页面更好看 ![背景色](https://images.gitee.com/uploads/images/2019/0629/215421_d6a286ee_1648154.png "微信图片_20190629215349.png") ![背景色](https://images.gitee.com/uploads/images/2019/0629/215527_a548c8b1_1648154.png "微信图片_20190629215515.png") ![背景色](https://images.gitee.com/uploads/images/2019/0629/215539_19a3cae8_1648154.png "微信图片_20190629215518.png") - 2、然后我为首页侧边栏添加了**分类目录**，并勾选了**以下拉菜单显示**、**显示文章数量**和**体现层级关系**，让**分类目录**在侧边栏更为简练和明确，更方便用户寻找自己喜欢的文章。 ![目录](https://images.gitee.com/uploads/images/2019/0629/215833_7d0faee7_1648154.png "微信图片_20190629215634.png") ![目录](https://images.gitee.com/uploads/images/2019/0629/220554_0c6b1ee3_1648154.png "微信图片_20190629215907.png") - 3、最后是为页脚的三个小工具添加动画效果 ![效果](https://images.gitee.com/uploads/images/2019/0629/222935_133c4dea_1648154.png "微信图片_20190629222919.png") ![效果](https://images.gitee.com/uploads/images/2019/0629/222955_092cdec9_1648154.png "微信图片_20190629222922.png") ----- ### 方法B：A/B测试 - 这一次，我找了十位同学，来进行**A/B测试** - 测试问题为：网站首页文章，是使用一个静态页面好，还是使用最新文章更新预览好。 ![首页](https://images.gitee.com/uploads/images/2019/0629/220829_ece22fed_1648154.png "微信图片_20190629220820.png") - 静态页面效果如下： ![静态](https://images.gitee.com/uploads/images/2019/0629/221009_ab86bef8_1648154.png "微信图片_20190629220957.png") - 即顶部有文章特色图片的滑块，下面是静态页面的内容 - 最新文章预览效果如下： ![预览](https://images.gitee.com/uploads/images/2019/0629/221032_175d89a5_1648154.png "微信图片_20190629221000.png") - 即顶部有文章特色图片的滑块，下滑时每一篇文章的预览，并且有过场动画。 ---- - 十位同学经过仔细观察和思考后，90%的同学选择了首页是最新文章预览的效果，只有10%的同学选择了静态页面。因此我的首页设计为最新文章预览效果。 ----- # 定制化方案 - 1、在用户研究的过程中，有一位同学提到，我的网站包含了许多运动明星，那能不能把他们所在的体育队伍展示给用户看看呢，我马上开始寻求方法，直到我找到了**SportsTeams**这个插件。 ![运动](https://images.gitee.com/uploads/images/2019/0629/233056_990bbd4a_1648154.png "微信图片_20190629233038.png") - 这个插件可以编辑队伍图标，编辑方式比较像写文章。 ![插件](https://images.gitee.com/uploads/images/2019/0629/233210_99655852_1648154.png "微信图片_20190629233125.png") - 添加完队伍及队伍图标之后，在网站显示是这样的 ![图标](https://images.gitee.com/uploads/images/2019/0629/233350_8d2eaf43_1648154.png "微信图片_20190629233041.png") - 加入**SportsTeams**后，侧边栏上就有了队伍图标及介绍，用户可以在侧边栏看到文章出现的巨星所在的队伍，这满足了 **用户研究** 的要求又十分符合 **运动/体育** 的主题！ ----- - 2、为了网站本身的原创作品不被剽窃，我给网站安装了**WP Copy Protect**插件，这个插件可以让用户无法在我的网站上点击右键，也无法复制我的内容，更好的保护我的网站自己的版权。 ![WP](https://images.gitee.com/uploads/images/2019/0630/203604_a06a5fe3_1648154.png "微信图片_20190630203513.png") ------ # 加分项 - 使用https - 网站链接为 https://www.fangwenxi.club ![https](https://images.gitee.com/uploads/images/2019/0629/225440_2c96e80d_1648154.png "微信图片_20190629225419.png")