# 网站运营期末项目 **Repository Path**: liangchuyao/web-operation ## Basic Information - **Project Name**: 网站运营期末项目 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2020-07-01 - **Last Updated**: 2024-12-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 网站运营期末项目——[中大南方文娱资讯](https://www.loey.fun/) 网站名称 | 中大南方文娱资讯 ---|--- 网址 | [https://www.loey.fun/](https://www.loey.fun/) 站长| 梁楚尧 运营报告撰写人| 梁楚尧 ------ # 一、策划 ## 1、策划文档与网站地图 ### 1.1 网站定位及内容 - 主题: 关于中山大学南方学院各类文娱活动和竞赛的资讯、晚会竞赛前的预热宣传、晚会竞赛途中的直播介绍、晚会竞赛后的精彩回顾。以及实时跟进校外一些积极向上的文娱晚会活动的推送。(文娱包括文学、文化、艺术类活动) - 背景: 随着教育改革的深入,我国虽然在大学生素质提高的事业上取得诸多进步,但仍然存在一些问题。大学教育的重要目的就是希望大学生能够成长为高素质的人才。文娱活动在大学校园中十分常见,也深受大学生喜爱,它会对大学生的精神状态起到重要影响,因而对他们的素质的形成巨有重要意义。而目前我校的众多文娱活动较为分散,校级晚会和各院系晚会之间联系不够强,各个院系之间的资讯传播不够广,导致很多师生只对本院系活动有所了解,校园文化品味有待提高。 - 目标: 1. 我校师生更加快捷便利的了解到校内各个院系以及校外的文娱资讯,不再局限于自己的院系。更快更好地提升大学生的人文精神,提高心理素质,丰富精神世界,培养良好气质风度和社会交往能力,推动大学生进行人文素质教育,多方面、多元化、多角度拓展我校师生的文化素养和学识深度广度。 2. 给校外的用户提供一个很好的平台去了解我校的校园文化和丰富多彩的文娱活动,将南苑特色文娱活动打造成我校的校园文化品牌之一,与其他高校共同学习。 ### 1.2 目标用户画像 ![avatar](/图片/用户分析小粒头像.jpg)图片来源[百度](https://imgsa.baidu.com/forum/w%3D580/sign=576ac0e41430e924cfa49c397c096e66/ab0d9f13b07eca80355ae40b9a2397dda044839f.jpg) |
姓名:小粒

年龄:18岁

职业:大学生
---|--- 人物简介| 是中山大学南方学院外国语学院的大一新生,在大一这个学期对自己学院的文娱活动有一定了解,对学校的文娱活动和竞赛有较高的兴趣,想通过一个平台去了解学校的各类文娱活动,并发表自己的看法和交流心得。 用户行为 | 多数情况下使用手机设备获取网站信息,有时候会使用电脑。 用户态度 |喜欢颜色饱和度高、独具特色的风格。在浏览网站的时候更注重网站的布局还有展示的图片视频等。 当下痛点| 目前我校的文娱资讯较为分散,相关活动推送及文娱知识普及较为枯燥无味,想寻找一个平台不仅能集合校内各类各院的文娱资讯,同时也能发表一些自己在文娱活动中想要分享或讨论的内容。 ![avatar](/图片/用户分析小西头像.jpg) 图片来源[百度](https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3462211933,3356538789&fm=26&gp=0.jpg)|
姓名:小西

年龄:20岁

职业:大学生
---|--- 人物简介| 是中山大学南方学院的大二学生,担任校学生会艺术建设部的部长,所在部门主要负责组织、策划校级文娱活动,协助学校举办各类文娱比赛,指导学校各系学生会开展各类文娱活动。 用户行为 | 多数情况下使用电脑设备获取网站信息,有时候会使用手机。网站浏览频率:在有校级文娱活动前后会上网站征集并发布相关资讯。 用户态度 |喜欢简洁明了的主题,注重网站展示的内容。 当下痛点 | 目前院系的文娱资讯宣传力度不够,校级活动与院级活动联系不够强,校级学生会与各院级学生会部门社团、艺术中心社团之间的沟通不够及时,导致无法更好地为广大学生服务。想要有一个平台能够更好营造一个积极向上的校园文化氛围,集合全校所有的文娱活动资讯,同时学生工作者之间也能加强联系,互相学习讨论。 ### 1.3 网站建设规划(根据用户调研的结果进行了目标的调整) 网站建设前期: - 因为大多数用户比较看重网页的排版和图文结合的文章排版,因此运用合适的主题,提升网站的美观度和可读性,持续改进网站的平面设计、交互设计和文章排版,提高网站的易用性; - 因为该网站图片比较多,图片加载和页面加载速度对用户体验影响大,因此要优化用户的访问速度,关注site24×7的数据; - 持续转载高质量的文章,加大初期在我校师生中的曝光度; - 能够在搜索引擎较靠前的排名中出现该网站; - 因为用户对文章评论该功能反响大,因此要定期维护文章评论讨论区。 网站建设中期: - 因为有部分用户习惯使用手机端进入该网站,因此要完善手机端的网站美观度和可读性,提高手机端的网站易用性; - 为网站做更多的seo,提高网站的点击量,做好网站的的安全防护工作; - 多产出原创文章,提高更新速度; - 有一定数量的长期用户; - 获得更多的浏览量; - 加大对文章评论讨论区的维护。 网站建设后期: - 提高用户的活跃度和黏度,提高用户体验质量; - 开设新的功能或分类,使网站的内容更丰富多样; - 继续做好网站的安全防护工作。 ### 1.4 DVF模型定义需求 - 用户需求:用户需要一个能长期推送我校各个院系及校级文娱活动和竞赛资讯、晚会竞赛前的预热宣传、晚会竞赛途中的直播介绍、晚会竞赛后的精彩回顾的平台。网站文章可读性高,有高质量的图片和动图;设有简洁易懂的导航栏;设有分享功能;文章底部设有讨论功能。 - 可持续性:持续更新更多高质量的文章;提供分享功能,让用户将网站传播到更多地方,增加网站传播范围;站长会及时回复用户的评论和建议,增强网站的互动性和用户粘度,保持网站活力。 - 可行性:使用site origin等插件对页面和文章进行排版布局的优化,保障文章图片的清晰度;首页页面以形象生动的图文结合方式展现;在首页页面添加侧边栏小工具实现搜索和导航;在文章底部添加评论功能;根据用户需求可以页脚增加分享到社交平台的功能实现用户情感化需求。 ### 1.5 网站地图 ![avatar](/图片/中大南文娱资讯网站地图.jpg) --- ## 2、图片使用 ### 2.1 图片版权 - **文章内的所有图片下方**均有说明图片来源,非原创的每张图片都有版权交待并附有超链接,点击“图片来源”能跳转至原图的网站;原创图片下也有说明无版权问题。 - **文章封面特色图片在文章页尾、特色图片设置时的说明处**均有说明图片来源,非原创的每张图片都要有版权交待并附有超链接,点击“图片来源”能跳转至原图的网站;原创图片下也有说明无版权问题。 - 图片示例说明: ![avatar](/图片/图片版权1.png) ![avatar](/图片/图片版权2.png) ![avatar](/图片/图片版权3.png) ### 2.2 图库风格及配色 - **风格:图库风格均根据晚会主题而改变,多采用画面构图丰富饱满的图片,整体是欢乐庆典的氛围。并紧扣网站的风格、配色,整体文章封面的风格都保持一致。**————图库图片是服务于文章,配合文章突出需要说明的重点。通过用户调研以及访谈,发现用户在浏览这类文娱晚会主题的网站时更注重网站所展示的图片视频等,因此画面构图丰富饱满的图片更能吸引用户,配合网站主题传达风格。 - **配色:图库配色多选取饱和度高的颜色,主要以红色橙色紫色等能够展现晚会氛围的颜色。但还是需要根据文章中所要传达的晚会主题而有部分其他颜色的修饰,**————红色橙色是一种很活泼、辉煌的色彩,能引起用户的兴奋热烈,给用户传达欢乐热闹的氛围,符合网站主题。 ## 3、三篇原创云端架站图文文章 1. [wordpress架站教程](https://www.loey.fun/2020/07/12/wordpress%e6%9e%b6%e7%ab%99%e6%95%99%e7%a8%8b/) 2. [国内外主流云主机平台对比](https://www.loey.fun/2020/07/12/%e5%9b%bd%e5%86%85%e5%a4%96%e4%b8%bb%e6%b5%81%e4%ba%91%e4%b8%bb%e6%9c%ba%e5%b9%b3%e5%8f%b0%e5%af%b9%e6%af%94/) 3. [wordpress踩坑之文章找不到](https://www.loey.fun/2020/07/12/wordpress%e8%b8%a9%e5%9d%91%e4%b9%8b%e6%96%87%e7%ab%a0%e6%89%be%e4%b8%8d%e5%88%b0/) ## 4、平面设计及插件运用 ### 4.1 网站配色、对比度与可读性 - 网站配色:以橙色为主色调点缀,画面大面积留白 1. 橙色是欢快活泼的光辉色彩,给人以青春的感觉。符合网站主题并与图库色系保持一致; 2. 大面积的留白搭配橙色点缀,使得整个网站整体显得简洁干净,以此提高网站的可读性; 3. 橙色是暖色系中最温暖的色,与图库配色中的大红大紫有一定区别,避免整个网站都是动感的颜色,降低用户的视觉疲劳感。 - 字体:主要字体为Georgia。————基本上适合正文屏显的衬线字体,笔画粗重,衬线明线,轮廓较大,小字体显示也很清晰,可读性比较强。 - 字体大小:主内容字体大小原本为20px,在用户研究后发现80%的用户认为正文字体过大,因此调整为16px,为偏灰色。————三个文字等级,在字号和字重上拉开对比,用户在视觉上有了对比层级,方便用户阅读理解。同时白色背景上使用黑色字体是可读性最高的设计方案。 ### 4.2 运用Animate it! 插件 1. 点击右侧小工具中的网站地图,图片则会放大,以此起到强调的作用。[展示链接](https://www.loey.fun/) ![avatar](/图片/animateit111.gif) 2. 浏览页面,滑动到右侧小工具中近期文章的位置时,小工具会摇晃,以此起到提醒的作用。[展示链接](https://www.loey.fun/) ![avatar](/图片/animateit3.gif) 3. 浏览文章时,滑动到图片,该图片则会自动放大,以此起到强调的作用。[展示链接](https://www.loey.fun/2020/07/11/%e5%bf%86%e5%b9%b4%e5%9b%9b%e5%ad%a3%ef%bc%8c%e4%b8%8d%e8%b4%9f%e9%9f%b6%e5%8d%8e2018%e5%b9%b4%e5%95%86%e5%ad%a6%e9%99%a2%e6%af%95%e4%b8%9a%e6%99%9a%e4%bc%9a/) ![avatar](/图片/animateit4.gif) ### 4.3 运用SiteOrigin 插件 **1. 使用SiteOrigin中page builder的布局风格,用户在阅读文章前可以提前并直观的看到精彩瞬间合集。[展示链接](https://www.loey.fun/2020/07/12/%e7%ac%ac%e5%8d%81%e4%b8%80%e5%b1%8a%e6%a0%a1%e5%9b%ad%e6%96%87%e5%8c%96%e8%89%ba%e6%9c%af%e8%8a%82%e9%97%ad%e5%b9%95%e5%bc%8f%e6%9a%a8%e6%88%91%e7%9a%84%e5%ae%b6%c2%b7%e6%a0%a1%c2%b7-2/)** ![avatar](/图片/siteorigin1.jpg) **2. 使用SiteOrigin Tabs插件,用户在阅读文章时可以系统的提前了解到晚会的篇章内容。[展示链接](https://www.loey.fun/2020/07/01/2019%e8%bf%8e%e6%96%b0%e6%99%9a%e4%bc%9a/)** ![avatar](/图片/siteorigin2.png) **3. 使用SiteOringin Posts Carousel插件,在文章结尾添加相关领域文章的帖子轮播。[展示链接](https://www.loey.fun/2020/07/12/%e5%9b%bd%e5%86%85%e5%a4%96%e4%b8%bb%e6%b5%81%e4%ba%91%e4%b8%bb%e6%9c%ba%e5%b9%b3%e5%8f%b0%e5%af%b9%e6%af%94/)** ![avatar](/图片/siteorigin3.png) ------ # 二、管理 ## 1、云端架站 - 网站域名:loey.fun - 网站地址:https://www.loey.fun/ ## 2、网站安全:使用Wordfence - 通过监控数据我了解到我的网站的安全性能还不高,只达60%。 - 浏览登录记录均为本人 - 我的网站会时常受到别人的攻击,但暂时并未受到影响。但未雨绸缪,我会通过实时wordfence插件来检测我网站的安全性,防范于未然。 - 同时通过图片数据可知,该防火墙在不断的学习中,以此提高网站的安全性。 ![avatar](/图片/wordfence1.png) ![avatar](/图片/wordfence2.png) ![avatar](/图片/wordfence3.png) ### 3、网站性能:使用site24x7 - 添加了8个地点,分别为广州、伦敦、巴黎、圣保罗、华盛顿、北京、旧金山、卢森堡,监视器总数为12个,可以看到整体的网站性能。 - 了解到了我的网站在这八个地方的响应时间和速度,其中国内的广州和北京两个检测点的访问速度比国外所有的检测点都要快很多。 - 卢森堡地区在2020年7月7日下午5:36时曾停机5分钟38秒,所以在那5分钟38 秒里卢森堡网民是无法点开我的网站,以后我会加强对他的检测防护。 - 其它各大洲的监测地点均为正常值,可用性为100%,停机时间为0,能正常访问本网站。并且每五分钟检测一次,均可访问,可用性较强。 ![avatar](/图片/site24×7截图1.png) ![avatar](/图片/site24×7截图2.png) ![avatar](/图片/site24×7截图3.png) ![avatar](/图片/site24×7截图4.png) ![avatar](/图片/site24×7截图5.png) ![avatar](/图片/site24×7截图6.png) ## 4、网站备份 1. winSCP的截图: ![avatar](/图片/备份1.png) 2. 通过插件(Wordpress Database Backup) 备份数据库 (sql文件)截图 : ![avatar](/图片/备份2.png) 3. 通过wordpress后台导出工具导到本地的文件截图: ![avatar](/图片/备份3.png) 4. 文件夹整合后的截图 ![avatar](/图片/备份4.png) ------ # 三、运营 ## 1、站长工具 ### 1. 站长工具A:Baidu站长认证 - 注册完立刻就收录了,但是在很长一段时间里搜索的显示结果仍然是期中项目时的文传院标题。(7月5日前)![avatar](/图片/百度站长1.png) - 在7月5日后,再次搜索时,就可以显示当前的标题了,且为网站最新。![avatar](/图片/百度站长2.png) - 站长收录后索引量和频次变化都有所改变![avatar](/图片/百度站长3.png)![avatar](/图片/百度站长4.png) ### 2. 站长工具B:Bing站长认证 - 7月13日前,bing网站管理员添加我的网站。但是多次查阅资料([链接](https://www.bing.com/webmaster/help/why-is-my-site-not-in-the-index-2141dfab))并使用了许多方法后(如新增了13篇文章、提高文章质量、提交Sitemaps和页面文章url等),却始终无法通过bing的搜索引擎找到我的网站![avatar](/图片/必应站长1.png) ![avatar](/图片/必应站长2.png) - 7.14那天,我的网站被bing收录,在bing国内版和国际版搜索到我的网站了![avatar](/图片/必应站长3.png)![avatar](/图片/必应站长4.png) ## 2、SEO优化 ### 方法一:关键词优化 在Yoast里添加文章的关键词同时补充完善描述文本,以此增加搜索引擎的收录机会。我对网站首页的seo title、slug、meta description进行了关键词优化以及对文章做了可读性编辑。 添加方法:在每篇文章的最后面会出现Yoast的工具,通过总结文章最有价值的关键词,同时利用关键词搜索工具查询该关键词的使用频率确定,最后确定的文章关键词。 成果:添加完之后,在必应上搜索关键词,出现了我网站的首页链接入口 ![avatar](/图片/关键词优化.jpg) ![avatar](/图片/关键词优化1.jpg) ### 方法二(官方方法): 修改文章url的定义规则,使得其更加规范化以便于搜索引擎收录。我将文章中文名改成了英文名。 - 修改前: ![avatar](/图片/url1.png) - 修改后:采用网站主页url+时间+文章英文名 ![avatar](/图片/url2.png) ### 方法三(官方方法): 在百度站长工具和bing站长工具主动提交文章url。 登录bing和baidu站长工具网站,找到提交url的位置,将目前网页所有页面的链接都主动提交上去。 - 手动bing提交文章及页面url ![avatar](/图片/必应提交文章1.png) - 手动baidu提交文章及页面url ![avatar](/图片/百度提交文章.png) ### 方法四:提交网站的sitemap到bing和baidu的站长工具。
在Yoast中找到本网站的sitemap,将sitemap提交至bing和baidu站长工具中。 - baidu已成功抓取网站sitemap ![avatar](/图片/百度sitemap.png) - bing已成功抓取网站sitemap ![avatar](/图片/必应sitemap.png) ### 方法五:添加外链 将网站的页面/文章链接放到其他平台作为友情链接。 - 我在知乎相关的热门文章的评论中添加了我的网站和文章url - 我在贴吧——中大南方吧中发表了新的帖子,里面添加了我网站和文章的url - 我在贴吧——中山大学南方学院吧的相关热门帖子中添加了我的网站和文章url ![avatar](/图片/知乎.jpg) ![avatar](/图片/贴吧1.png) ![avatar](/图片/贴吧2.jpg) ### 成果: #### 1、方法一到方法四(关键词优化、修改文章url、经常主动添加文章及页面的url到站长、添加sitemap到站长),刚优化的前几天,根据jetpack网站数据统计表中可以看出我网站浏览量没有明显变化,可能是因为时间较短,第六天开始就有了上升的趋势,说明这些优化的方法在短期内还不能见效,需要一定时间的缓和期。 ![avatar](/图片/方法一到四.png) #### 2、方法五添加外链后,jetpack网站数据统计表中可以看出我网站的浏览量变化有一定上升,说明添加外链增加了网站的曝光率,并且在百度上搜索可以看到相关内容。 ![avatar](/图片/方法五2.png) ![avatar](/图片/方法五成果1.png) ## 3、用户研究。 ### 方法一:用户访谈(5人) - #### 问题设置: 1. 您进入网站的第一印象是什么? 2. 你觉得这个网站有什么亮点或者缺点吗? 3. 你觉得这个网站侧边栏功能需要有什么? 4. 你最想让我们增加的一个功能是什么? 5. 你最希望我的网站哪方面需要改动? 6. 你觉得这个网站的页面排版和文章排版给你的视觉体验怎么样? 7. 你对这个网站的整体印象是什么? 8. 满分100分,你给这个网站打多少分? - #### 访谈总结: 1. 100%的用户进入后觉得网站的配色简单大方,同时又符合风格,主题明确,排版尚佳; 2. 60%的用户觉得右侧网站地图小工具点击无法放大,显得有点鸡肋; 3. 80%的用户赞扬了文章中的图片大小统一这一特点,阅读文章时图文结合体验感好; 4. 80%的用户觉得打开网页的速度和图片加载的速度过慢; 5. 100%的用户喜欢在浏览文章的时候导航栏始终处于置顶状态,能够随时进入想要的页面; 6. 60%的用户觉得文章右侧较空,文章处的侧边栏内容较少,难以在本页面找到其他文章内容,跳转不方便; 7. 100%的用户觉得文章封面配有图片能更加吸引注意,体验感较好; 8. 40%的用户觉得首页篇幅过长,文章过多; 9. 80%的用户觉得文章内的字体过大,20%的用户觉得首页文章标题过大; 10. 40%的用户希望右侧导航栏新增文章搜索功能以及学校各学院文娱组织的名称之类的,可以通过组织名称去找到自己想了解的活动; 11. 80%的用户认为本网站功能较为齐全,菜单栏的选项清晰,可以较快找到感兴趣内容; 12. 20%的用户对本网站打了70分,40%的用户打了90分,40%的用户打了100分。 - #### 改进措施: 1. 页侧边工具栏:[改进后的展示链接](https://www.loey.fun/%e7%bd%91%e7%ab%99%e5%9c%b0%e5%9b%be/) 新增一个页面为网站地图,给右侧网站地图小工具新增跳转链接,可以点开放大看网站地图内容。 2. 文章页侧边工具栏:[改进后的展示链接](https://www.loey.fun/2020/07/12/mainstream-cloud-host-platforms/) 使用Custom Sidebars插件,给文章设置不同的侧边栏,新增了一个文章分类的小工具。 3. 首页:[改进后的展示链接](https://www.loey.fun/) - 把首页显示的文章从10篇缩减为6篇,减少了首页的篇幅。 - 在右侧导航栏新增搜索功能和学校各院系组织名称。 4. 文章:[改进后的示例展示链接](https://www.loey.fun/2020/07/11/drama-performance/) - 给文章中的图片统一大小。 - 将文章主内容的20号字体改为16号。 - #### 文章页侧边工具栏: ![avatar](/图片/对比1.jpg) - #### 改进前后的页面对比图: ![avatar](/图片/对比2.jpg) - #### 改进前后的文章对比图: ![avatar](/图片/对比3.jpg) ### 方法二:A/B 测试(首页排版不同,分别访问不同的3名用户并做出总结) - A方案:首页版面设计中导航栏下是带有图片展示的精选页面,下面的文章板块是以“特色图片+标签+标题+作者发布时间+内容简要” - B方案:首页版面设计中导航栏下是滑动横幅板块,用于展示文章,下面的文章板块是以“标签+标题+作者发布时间+特色图片+内容简要” - AB方案对比图: ![avatar](/图片/方案.jpg) - A方案总结:访问了3名用户。2位用户认为首页页面简洁干净,文章板块排版整齐,视觉效果很好,并且元素丰富,可以很快找到感兴趣内容,整体体验感不错。1位用户认为首页页面内容分布明确清晰,但是文章标题字号过大,显得留白很多。 - B方案总结:访问了3名用户。3位用户均认为首页页面排版样式变换多样,视觉元素较为丰富,视觉效果不错。但是所展示的内容过于单调,几乎都是文章。整体布局在视觉上显得过于密集,会引起视觉疲劳。下方文字板块中,首先能看到文章标签,可以很快的知道文章分类,但是相邻的图片不对齐,显得稍许凌乱。 - 结论:综合两个方案各自用户的意见和该方案的可行性,我选择了A方案。因为A方案所展示的元素较为丰富,有**页面精选**、**文章精选**、**最近更新的6篇文章**,内容分布明确清晰,不仅能突显网站特色还能很好的吸引及引导用户点击二级页面。下方文章板块相比B方案而言,A方案排列更加整齐。 ## 4、定制化: ### 定制化方案一:使用WP Super Cache插件,在cache目录生成html静态资源,在用户访问网站的设备上自动生成网站缓存,优化用户的访问速度,提升用户体验感 **分析:** 在做用户访谈的时候,80%的用户反映打开网页的速度过慢,并且我的网站图片较多,加载速度对网站的访问量有很大的影响。因此我添加了WP Super Cache这个插件,让网站加载速度更流畅,用户使用更舒畅。 **变化:** 对比后发现,使用这个插件后,网页加载速度平均快了1秒,在这之前打开网页后需要花费一定时间加载文章中的图片,但是现在基本上在打开网页的同时图片都已成功加载并显示出来了。很好的提高了网页和图片的加载速度,提升用户体验。 ![avatar](/图片/定制1.png) ### 定制化方案二:使用Custom Sidebars插件,给首页、分类、文章、页面等等设置不同的侧边栏,在不同的页面显示不同效果,满足不同页面的特定需求。 **分析:** 在做用户访谈的时候,60%的用户反映文章右侧空白太多(侧边栏内容较少),导致视觉效果不佳;并且在文章页面难以找到跳转其他感兴趣文章的按钮,降低了用户体验。因此我安装了Custom Sidebars插件,使得文章和首页设置的侧边栏内容不同,在文章侧边栏处增加了文章分类导航栏,方便用户在二级页面也能找到自己感兴趣的文章,减少跳转次数,满足用户需求。 ![avatar](/图片/定制2.png) ![avatar](/图片/对比1.jpg) ------ # 四、加分项 ### 使用HTTPS:https://www.loey.fun/