# Daily Trivia-Final Project **Repository Path**: wencuixian/Daily-Trivia-Final-Project ## Basic Information - **Project Name**: Daily Trivia-Final Project - **Description**: 大二下学期网站与管理课程期末项目——每日冷知识网站 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2020-07-08 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 每日冷知识—运营报告 网站名称 | 每日冷知识 ---|--- 网址 | [https://wcx1023.top/](https://wcx1023.top/) 站长 | 闻翠娴 181013095 运营报告撰写人 | 闻翠娴 181013095 # 1.策划文档与网站地图 --- ### 网站建设目标 - 搜集并分享一些比较不常见的知识，即我们常说的冷知识。在该网站，用户可以对文章进行评论，发表自己不同的见解，也可以在讨论区自由讨论分享自己知道的知识，努力打造一个冷知识共享平台，给用户普及更多的知识。 ### 目标用户画像： 人群 | 对生活充满好奇，喜欢新鲜事物，接受新知识的人（大部分为年轻人） ---|--- 年龄 | 14-48岁 性格/行为特点 | 对这个世界好奇并惊讶于它的神奇好奇，对新知识有极强的求知欲。喜欢去了解新鲜事物，经常翻阅书籍，在互联网上查找冷门知识。 网站使用场景 | 对于某件事物好奇，想要更加深入了解这件事物；无聊时，看冷知识打发时光。 使用原因 | 网上的文章太杂乱，没有明显的分类，找起来很麻烦，比较烦躁。 对网站的希望 | 能够分享给身边的同学阅读；能看到网民对此网站文章的评价；有更高质量的网站文章；有更多更有趣，更冷门的知识。 ### 网站规划： 阶 段 | 规划 ---|--- 前期 | 搜集更多的冷知识文章，让网站更加丰富。做好平面设计，让网站看起来更简洁美观。 中期 | 不再局限于文章的“多”，更看重文章的“精”，搜集发表质量更高的文章。搜集用户的意见，根据用户的意见进行改进。 后期 | 开设新的功能或分类，让用户使用起来更方便。为网站做更多的seo，提高网站的点击量，多与用户互动，增加用户的粘度。多出原创文章，加快文章的更新速度等。 ### DVF模型： * 用户需求：设有近期评论：设有文章日历功能；设有搜索功能；设有导航栏； * 可持续性：持续更新更多高质量的文章；提供评论功能，用户可在文章下进行评论，与其他用户分享探讨自己知道的知识，增加用户活性，提高用户黏度；增加点赞和分享功能，用户可对于自己喜欢的文章进行点赞和分享给朋友，从而达到网站推广的目的。 * 可行性：在首页页面添加侧边栏小工具实现搜索、评论功能和最新文章功能；根据用户需求可以页脚增加分享到社交平台的功能实现用户情感化需求。 ### 网站地图：![网站地图](images/网站地图.jpg) # 2.图片的使用 --- ### 图片版权：本网站的所有图片下方均有来源说明，并且图片插有原文超链接，点击图片就可以进入原文。图片下方无文字说明则表示是自己截取的图片。 1. 如该文章所示[一代诗仙“李白”的冷知识，你知道几个？](https://wcx1023.top/sxlb/) [原文链接](https://baijiahao.baidu.com/s?id=1660151763717042428&wfr=spider&for=pc) 2. 如下图所示 ![输入图片说明](images/版权1.png) ![输入图片说明](images/版权2.png) ### 图库风格及配色：图库偏向于自然风格，会选取比较高清、真实的图片（如人物图片、动物图片等）。 - 理由：该网站是冷知识分享网站，选取的文章偏现实生活多一些，所以选取真实性的图片多一些。大部分是人物的画像和动植物。 ### 3篇原创云端架站文章 * [WordPress简单操作过程](https://wcx1023.top/wpjdcz/) * [国内外主流的云主机平台的对比分析及阿里云平台搭建wordpress](https://wcx1023.top/yzjdb/) * [Github education pack 申请流程](https://wcx1023.top/github-education-pack/) # 3.平面设计 ### 网站配色 * banner背景颜色：#ffffff 字体颜色：#29a996 #22d3b8 点赞、分享以及微海报图标颜色：#0066cc * 展示页面标题字重：1.3em 字体颜色：#1F3A47 字体：Ping Fang SC * 阅读更多字体大小：19.5px 字体颜色：#DF0101 字体：Ping Fang SC * 网站使用配色较少，选用蓝色和偏灰的黑色比较多，选取冷色调比较适合该网站“冷知识的主题”，选用简约的风格，用“极少的色彩、极少的形象”简化画面，除去干扰主体不必要的东西。 ![输入图片说明](images/平面1.png) ![输入图片说明](images/平面2.png) ![输入图片说明](images/平面3.png) ### 3处site origin的使用 1. 在1篇文章中使用site origin编辑，加入画廊工具，使多张图片以一个画廊的形式出现在文章中。[如链接所示](https://wcx1023.top/wpjdcz/) ![输入图片说明](images/origin1.png) 2. 在1篇文章中使用site origin编辑，使用布局，将图片居中放置。[如链接所示](https://wcx1023.top/yzjdb/) ![输入图片说明](images/origin2.png) 3. 在每一篇文章下面都加入帖子轮播图，让用户读完一篇文章后，不用返回目录，可以在轮播中点击文章进入阅读。[如链接所示](https://wcx1023.top/yzjdb/) ![输入图片说明](images/origin3.png) ### 2处AnimateIt动画使用 1. 在文章的图片中加入“滚动增长”的动画，用户在阅读文章时，阅读到图片部分，图片会自动增大。[如链接所示](https://wcx1023.top/hehua/) ![输入图片说明](images/aminate1.png) 2. 在搜索的小工具中加入了“点击增长”的动画，用户在点击搜索时，搜索框会变大一些，与下面的功能区区分开来。[如链接所示](https://wcx1023.top/category/home/) ![输入图片说明](images/aminate2.png) # 4.云端网站管理 ### 云端架站：网站域名wcx1023.top；网址：https://wcx1023.top/ ### 网站性能：使用site24x7监控 * 我在site24X7中添加了1个网站监视器，一共有八个监视位置，分别是北京、广州、洛杉矶、上海、张家口、雅加达、迪拜和维也纳。site24X7可以实时监控这八个位置的响应和速度，从监控中可以看出迪拜的响应速度是最快的，张家口的响应速度是最慢的。在这期间，我的网站除了北京和广州，其他地方都停过机，导致这几个地方的用户无法访问我的网站，这提醒我要注意停机这个问题，实时监控，后期也要优化。 ![输入图片说明](images/site24.png) ### 网站安全：wordfence * wordfence可以实时监控网站的安全问题，设有防火墙，可以阻止恶意攻击。从wordfence中可以知道我的网站防火墙功能设置比较弱，只有48%，但是整个网站还是较为安全，达到了60%。wordfence一天内帮我的网站阻止攻击的次数高达8000000，说明我的网站安全还是需要提升。从防火墙提供的数据可以看到，我的网站阻止复杂的攻击仅有35%，虽然可以阻止一些普通的攻击，但是遇到危险的攻击可能很难阻止，后期还是要进一步优化防火墙设置。 ![输入图片说明](images/wordfence1.png) ![输入图片说明](images/wordfence2.png) ![输入图片说明](images/wordfence3.png) ![输入图片说明](images/wordfence4.png) ![输入图片说明](images/wordfence5.png) ### 网站备份 * WinSCP网站的备份截图 ![输入图片说明](images/备份1.png) * 在wordpress后台安装WP-DB Backup备份数据库 ![输入图片说明](images/备份2.png) * 在工具里导出网站数据 ![输入图片说明](images/备份3.png) * 所有网站备份的截图 ![输入图片说明](images/备份4.png) ### 百度站长 * 由于之前百度长时间不收录我的网站，在百度搜索域名出现的都是“未找到网站”，所以我把之前的站长认证删除，重新认证，百度才收录了我的网站。 ![输入图片说明](images/百度站长1.png) * 收录时间不长，数据较少。从站点数据中可以看出，我的网站有2的点击量和展现量，索引量为1，抓取频次均为最高为1。在过去一个星期里，我主动推送过三次链接，每次分别提交5、6、7条链接，均未收录。经个人分析，百度不收录我网站文章链接的原因大概率为原创文章过少，我的网站中大部分文章转自网上。添加三篇原创文章，重新提交url，但是百度仍然不收录我的网站文章链接。除此之外我还找到了文章不被百度收录的原因的相关文章。 * [百度不收录网站文章的原因以及解决办法](https://wenku.baidu.com/view/fe3b1514b5360b4c2e3f5727a5e9856a5612268b.html) ![输入图片说明](images/百度站长4.png) ### Bing站长 * 目前为止，Bing并未收录我的网站，搜索域名出现页面为网站未找到，所以也没有数据显示。在查找收录教程后我得知，bing的站点收录要求较高，需要有良好的seo优化和大篇幅的原创文章，以下是我找到的关于bing站点不被收录的原因和解决方法的文章。 * [网站不收录的原因及方法](https://ask.seowhy.com/question/84837) ![输入图片说明](images/bing站长.png) * 虽然bing网页上不能搜索到我的站点，但是我的bing站点后台管理还有记录，从图中可知，我在添加站点后主动提交站点有72条（多次提交，有重复链接），后台也有抓取我的网站的记录。 ![输入图片说明](images/bing站长2.png) ### SEO优化 * 方法1：向bing提交我认为有价值的文章url * 结果：没有成效，bing并没有收录我的文章url，原因可能是大篇幅文章不是原创，所以导致bing不收录我的url。 ![输入图片说明](images/seo1.png) * 方法2：关键词优化。每日冷知识是一个冷知识的共享平台。所以我添加的网站的关键词就是：冷知识、共享平台、增长见识等等。综上，本人对网站首页的seo title、meta description进行了关键词优化以及对文章做了可读性编辑 ![输入图片说明](images/seo4.png) ![输入图片说明](images/seo5.png) * 结果：以前在百度搜索关键词不会出现我的网站，优化过后，搜索关键词会出现我的网站，但是排在网页后面的位置。 ![输入图片说明](images/seo搜索.png) * 方法3：添加外链。①我在360浏览器的问答中，回复了一位提问着，在回答中添加了我的网站链接。②我在我的简书一篇文章中添加了我网站其中一篇文章的链接。 ![输入图片说明](images/seo6.png) ![输入图片说明](images/seo7.png) * 方法4：添加内链。我的网站中有两篇互为关联的文章，我给这两篇文章互相添加了内链。 ![输入图片说明](images/seo2.png) ![输入图片说明](images/内链2.png) * 添加方法3和方法4的结果：根据jetpack给的数据显示，网站的流量有很显著的提高。在添加链接之前，可能由于网站新建没有名气所以几乎没什么流量，在添加链接后，网站有了曝光率，可以从其他地方吸取用户，所以网站的流量有了显著的提高。 ![输入图片说明](images/seo8.png) # 用户研究 ### 用户访谈： 本人一共对5位用户做了用户访谈。访谈的内容为：页面的排版、字体的大小和颜色、文章的排版以及情感化需求 根据用户访谈，总结得出：①用户认为首页页面放置的文章篇数太多，有一种网页拉不到底的感觉。②主页面的文章标题的字体大小与文章字体的大小对比不明显，“阅读更多”的颜色与文章的颜色相同，不易区分。③文章的图片太小，没有居中处理，链接文字没有不同颜色区分。④没有点赞和转发等按钮，不符合用户情感需求。 #### 修改①：根据用户建议我对我的页面排版做出修改，在主页面设置一页只有六篇文章，不会让页面有过长的感觉。 #### 修改②：根据用户建议我对我的字体的大小做出修改，利用css把文章标题大小改为1.3em,跟文章字体大小对比明显。对“阅读更多”的颜色改为红色，易于区分。 ![输入图片说明](images/对比1.png) ![输入图片说明](images/对比11.png) #### 修改③：根据用户建议我对我的文章的排版做出修改，将图片放大并进行居中处理，链接文字改为蓝色，易于识别区分。 ![输入图片说明](images/对比2.png) #### 修改④：根据用户的情感化需求，安装了博客社交分享组件，每篇文章下都有点赞、分享功能。 ![输入图片说明](images/对比3.png) ### A/B testing： **首页布局方案测试** - **A方案总结**：共访问了3位用户，3位用户均认为A方案的列表排版更整洁、视觉上更舒服，每篇文章之间有明显的间隔，不会让人混淆，也不会有视觉疲。侧栏还有小工具，更方便用户操作。但是文章标题字太小，不宜与区别于文章内容，还有阅读更多于文章内容颜色一样不宜区分。 ![原首页a](images/a方案.png) - **B方案总结**：共访问了2位用户，2位用户均认为B方案的首页排版布局过于繁杂，方格布局让文字都聚集在一块，整个页面都是文字，很快就产生了视觉疲劳，并且没有小工具，不易于操作。 ![原首页b](images/b方案.png) **综合用户的意见和方案的可行性，我选择了A方案，因为A方案的列表样式来排版文章使排版更有条序，整个版面也更加整洁。根据用户的意见，我把文章标题字体调大了，阅读更多的颜色也调成了哦那个色，让用户更容易区分。 （效果如下图所示）** ![修改效果](images/c方案.png) ### 定制化： - #### 改Css。 根据用户访谈信息，三名用户认为我的文章标题太小，“阅读更多”不易于文章区分，所以我利用css将文章标题从0.8em改为1.3em,并且利用css修改了“阅读更多”字体的颜色。 **css修改图** ![输入图片说明](images/css1.png) - #### 安装博客社交分享软件 根据用户访谈信息，访谈用户均表示阅读完文章不能点赞和分享很难受，不满足她们的情感需求，所以我额外下载了博客社交分享软件，让每一篇文章下都有点赞和分享功能。 **如图所示** ![输入图片说明](images/css2.png) ![输入图片说明](images/css3.png) # 加分项 * 域名加入了SSL证书，访问域名有https 点击查看[每日冷知识](https://wcx1023.top)