# Web_Operations **Repository Path**: jiayichen/Web_Operations ## Basic Information - **Project Name**: Web_Operations - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-07-07 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 网站运营期末项目 - 站长：陈嘉仪 网络与新媒体3班 181013044 - 网站：[古衣今裳https://www.jjyyc.top/](https://www.jjyyc.top/) - 网站搭建和模拟来自于wordpress ## 一、策划文档 ### 1、网站建设目标: - 本站为为广大汉服爱好者提供汉服最新相关资讯的分享网站，也为同袍提供一个友好的经验交流和学习汉服知识的平台。 ### 2、目标用户画像 ![用户画像](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E7%94%A8%E6%88%B7%E7%94%BB%E5%83%8F.png) ### 3、网站规划等前期策划内容 - 目标用户：汉服爱好者、汉服商家等 - 更新规划： - 网站内容更新频率为每周跟新一篇至两篇原创文章，更新内容为汉服知识和汉服图文的文章部分 - 时刻关注汉服活动，在活动推出的当天进行更新于汉服资讯模块和同袍活动模块 - 在每个中华节日前开设相关模块，给与用户了解和交流的部分 ### 4、调整过程 - 前期：坚持每日转载高质量文章，并对网站界面进行修改优化，如页面、联系方式、导航栏、网站标题及logo等 - 中期：开始更新原创文章，并筛选转载文章质量；并进行SEO优化处理，提高网站点击量和搜索排名 - 后期：利用论坛评论插件搭建讨论区，提高网站用户粘性 ### 5、DVF模型 ![DVF模型](https://gitee.com/jiayichen/Web_Operations/raw/master/img/DVF%E6%A8%A1%E5%9E%8B.png) ### 6、网站地图 ![网站地图](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E5%8F%A4%E8%A1%A3%E4%BB%8A%E8%A3%B3.png) ## 二、图片的使用 - 所有的图片来自转载文章，并都已经在文章结尾进行说明，并提供转跳至原文的链接 - 随所有的图片都进行了筛选，选取了比较符合文章的主题或网站古风主题色调的图片 ## 三、3篇云端架站/运维图文文章： - [手把手教你申请EDUCATION PACK！](https://www.jjyyc.top/index.php/2020/06/30/education-pack/) - [以DIGITALOCEAN为例架设WORDPRESS网站](https://www.jjyyc.top/index.php/2020/06/30/digitalocean-wordpress/) - [ 建站点经验分享 为你的WORDPRESS网站加速](https://www.jjyyc.top/index.php/2020/06/30/wordpress-speed/) ## 四、平面设计 ### 1、网站配色 风格：本网站采用中国古典风格 配色：网站采用了朱红为主色调，以中华红凸显古风感；再配以同一个色系的明黄色进行深浅叠加，饱和度较低的明黄色为模块背景色，亮黄为提示性按钮，以示提醒警示，让整个页面看起来色彩相对统一且具有层次性，整体更符合古风的感觉。 图片风格：紧扣网站古风风格以及红黄配色进行选图，整体文章封面的风格都相对保持一致。 ### 平面设计插件运用 #### Animate it! - 1、在美图部分文字增加图片的放大效果动画，并根据读者阅读速度设置了延时，减弱读者单看美图所造成的视觉疲劳。 - [具体可点击此处感受]](https://www.jjyyc.top/index.php/2020/07/01/biqiong/) ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E7%BE%8E%E5%9B%BE.gif) - 2、在部分新闻标签文字增加了图片从左/右平移入场的动画，增加整个页面的趣味性。 - [具体可点击此处感受（有三秒的延迟），评分时请不要太快掠过~]](https://www.jjyyc.top/index.php/2020/06/30/mask-heat/) ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E5%9B%BE%E7%89%87%E8%BF%9B%E5%9C%BA.gif) #### SiteOrigin 1、 网站地图 - [具体可点击此处感受](https://www.jjyyc.top/index.php/sitemap/) ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E7%BD%91%E7%AB%99%E5%9C%B0%E5%9B%BE%E2%80%94site.png) ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E7%BD%91%E7%AB%99%E5%9C%B0%E5%9B%BE-%E6%95%88%E6%9E%9C.png) 2、 美图页面——画廊 - [具体可点击此处感受](https://www.jjyyc.top/index.php/picture-and-text/meitu/) ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E7%94%BB%E5%BB%8A-site.png) ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E7%BE%8E%E5%9B%BE-site.png) 3、 资讯——音乐 - [具体可点击此处感受](https://www.jjyyc.top/index.php/hanfu-information/) ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E8%B5%84%E8%AE%AF-site.png) ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E8%B5%84%E8%AE%AF-%E6%95%88%E6%9E%9C.png) ## 二、云端网站管理 ### 云端架站 - 点击此处域名链接可访问我的网站：[古衣今裳https://www.jjyyc.top/](https://www.jjyyc.top/) ![古衣今裳](https://gitee.com/jiayichen/Web_Operations/raw/master/img/https.png) ### 网站安全 - 1.使用Wordfence进行监控 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%AE%89%E5%85%A8.png) - 2.阻止攻击的状况 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%85%B1%E6%8A%80%E6%95%B0.png) - 通过此监控了解到自己网站的安全性评分偏低，一天内每小时被攻击次数在100000000-8000000，经过Wordfence防火墙对攻击模式匹配请求的阻隔下，网站整体运行维持在正常水平。也让我意识到要关注网站安全性能部分要进行提高，如网站及时中所使用的Wordpress主题和插件，让更新内容中具有针对性能的部分为安全性能进行优化，提高网站的安全性，让我的网站减少受最新威胁的侵害。 ### 网站性能 site24x7，相关监控截图，添加8个监控地点 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/8%E4%B8%AA%E7%9B%91%E6%8E%A7%E7%82%B9.png) ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E7%9B%91%E6%8E%A7%E9%80%9F%E5%BA%A6.png) ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/8%E4%B8%AA%E5%9C%B0%E5%8C%BA.png) - 我在site24X7中添加了8个监视器，7个向上正常运行，SSL证书部分配置错误。 - 八个监视位置为：广州，伦敦，圣保罗，洛杉矶，苏黎世，北京，东京，温哥华。可见八个位置可用性都为100%，平均响应时间为0.964 秒。其中圣保罗地区的访问速度最慢，次之为伦敦；北京的访问速度最快，广州次之。 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E7%9B%91%E8%A7%86%E5%99%A8%E8%A7%A3%E6%9E%90%E8%B6%85%E6%97%B6.png) ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E9%80%86%E5%90%91%E6%9F%A5%E8%AF%A2%E5%A4%B1%E8%B4%A5.png) - 在 2020-7-11 8:43:29到2020-7-11 8:45:41的时间里，伦敦、洛杉矶和温哥华三地的监视器宕机了2分多钟。通过根本原因分析可知，Ping分析成功、TCP 到dns11.hichina.com的路由 :53服务器可达、域名解析正确，但逆向查询皆为失败，因此得到结论：服务器可能临时不可用或者太忙。在错误后，系统进行了自动补救和修正后继续正常运行。 ### 网站备份 - 1. wordpress后台导出工具导到本地 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/wprdpress%E5%A4%87%E4%BB%BD.png) - 2.提供通过插件备份数据库（sql文件）截图 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E6%8F%92%E4%BB%B6%E5%A4%87%E4%BB%BD.png) - 以上两种备份文件截图： ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%A4%87%E4%BB%BD%E6%88%AA%E5%9B%BE.png) - 3.将wp-config.php备份本地 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/win%E5%A4%87%E4%BB%BD.png) ## 站长工具 - 我选择了国内的百度和必应两个进行站长认证 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E7%AB%99%E9%95%BF%E8%AE%A4%E8%AF%81.png) ### 百度站长认证 - 已进行的百度的站长工具验证，百度已索引我的网站,并有一个搜引量 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E7%99%BE%E5%BA%A6%E7%AB%99%E9%95%BF.png) - 在16周时，搜索到的网站名依然为期中项目的网站名称，经查发现是提交认证时还未更新缓存。 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E7%99%BE%E5%BA%A6%E6%90%9C%E7%B4%A2.png) - 经过一周的等待，在18周终于更改为现网站名称 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E7%99%BE%E5%BA%A6%E7%AB%99%E9%95%BF%E6%88%90%E5%8A%9F.png) ### 必应站长认证 - 已成功添加网站，但尚未被收录 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%BF%85%E5%BA%94%E7%AB%99%E9%95%BF.png) ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%BF%85%E5%BA%94%E6%90%9C%E7%B4%A2.png) ### SEO优化 - 方法一：对于必应尚未收录网站的情况，我手动向搜索引擎提交网站地图sitemap等url ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E5%BF%85%E5%BA%94%E6%8F%90%E4%BA%A41.png) ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E5%BF%85%E5%BA%94%E6%8F%90%E4%BA%A42.png) - 方法二：同样，我也手动向百度提交网站地图sitemap等url，但因网站已经被百度收录，提交次数较少。 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E7%99%BE%E5%BA%A6%E6%8F%90%E4%BA%A4.png) - 方法三：在微博等媒体平台，推送图文来推荐自己的网站，让更多人看到我的网站以增加网站浏览量。 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E5%BE%AE%E5%8D%9A%E5%88%86%E4%BA%AB.jpg) - 方法四：发布朋友圈来推荐自己的网站，让亲朋好友看到我的网站，以增加网站浏览量。 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E6%9C%8B%E5%8F%8B%E5%9C%88%E6%8E%A8%E5%B9%BF.jpg) - 方法五：关键词优化，为文章添加了关键词 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E5%86%85%E9%93%BE1.png) ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E5%86%85%E9%93%BE%E6%95%88%E6%9E%9C.png) - 方法六:开启静态缓存 我参考了[简单设置让你的WordPress速度更快](https://www.mediazhang.com/archives/108)文章，了解到当访客访问页面的时候，我们可以使用缓存机质直接提供缓存页面和数据，减少了运行站点所需的服务器资源占用，从而可以大大加快站点的运行速度。我通过WP Super Cache静态缓存插件实现： ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E5%AE%89%E8%A3%85%E6%8F%92%E4%BB%B6.png) - WP Super Cache 是一款老牌免费缓存插件，当前最高效也是最灵活的静态缓存插件， 建议配合 Autoptimize 一起用，我这次暂时还没使用 Autoptimze 一起使用。 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E5%BC%80%E5%90%AF%E7%BC%93%E5%AD%98.png) - 首先要启用缓存功能，才能开展进一步的设置操作 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E8%AF%A6%E7%BB%86%E7%BC%93%E5%AD%98.png) ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E8%AF%A6%E7%BB%86%E7%BC%93%E5%AD%982.png) - 之后我们可以切换到“高级”模块中，勾选选项并保存，在一些选项后有着（推荐）重要的选项建议勾选喔 - 方法七:Trackbacks和Pingbacks Trackbacks和Pingbacks是WordPress自带的一个功能。简单的说就是一种互惠外链，主要应用在WordPress的博客文章里。很长一段时间内，它们被认为对SEO优化有利，能为WordPress网站带来流量。 **但是！！** 在经过查阅相关资料后，我发现Trackbacks和Pingbacks会导致大量的垃圾网站做链接连接到的你网站，并产生大量的垃圾评论，最终会增加主机的CPU和内存负载，拖慢网站加载速度。因此，我最终选择禁用了Trackbacks和Pingbacks功能来保护我的网站。 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/WordPress%20Pingbacks%E5%92%8CTrackbacks.png) #### 优化前的浏览量 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E4%BC%98%E5%8C%96%E5%89%8D%E6%B5%8F%E8%A7%88%E9%87%8F.png) - 由图可见，在7.8开始优化前的浏览量不足三十次，是非常少的。 #### 优化后的浏览量 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E4%BC%98%E5%8C%96%E5%90%8E%E6%B5%8F%E8%A7%88%E9%87%8F.png) - 直至7.19，网站浏览量在优化后有着明显的提升，单日最高浏览量能达到近三百次。虽然浏览总量还比较低，但依然能体现SEO对于网站的重要性。 ## 用户研究 ### 用户研究方法的成果 #### 问题设置： 1、平时是否会留意汉服的相关资讯呢？ 2、有哪些特别喜欢的古风类型？ 3、对于喜欢的汉服资讯是否会积极分享呢？ 4、第一眼看到这个网站有什么样的感觉？ 5、有喜欢或不喜欢里面的某些内容或者界面设计吗？ 6、觉得这个网站有什么创新点或者不足之处吗？ 7、愿意将这个汉服资讯网站分享给有共同爱好的朋友吗？ #### 访谈总结： 1、所有访谈者都愿意留意汉服资讯，3/5的访谈者对汉服资讯很感兴趣，愿意主动分享优质汉服资讯和优秀的汉服资讯网站。 2、网站的风格文雅，贴合主题，可以尝试多一点大胆配色。 3、网站内容很齐全，访客能轻松的找到感兴趣的内容。 4、大多数访谈者的肯定主界面的轮播图中的设计（标题文章+主图）；汉服美图这一栏，配上古典诗词有韵味。 5、有许多人不是特别理解汉服圈的行为，希望汉服文化能够慢慢被越来越多的人熟知。 6、希望可以看到相关的视频短片，或者是有古风音乐可以分享在网站中。 #### 改进措施： 1、增加汉服知识专栏，进一步反映千年儒教典礼服制的文化精髓，同时跟进时代变化传播新的汉服文化理念。 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E6%B1%89%E6%9C%8D%E7%9F%A5%E8%AF%86%E4%B8%93%E5%8C%BA.png) 2、微调界面配色，其中界面主题栏中的配色变为红色。 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%AE%9A%E5%88%B6%E5%8C%96%E9%83%A8%E5%88%86/%E5%AF%BC%E8%88%AA%E6%A0%8F%E4%BF%AE%E6%94%B9%E5%90%8E%20css2.png) 3、增设汉服视频页面，之后会在网站之中引入部分合适的古风音乐作为背景音乐。 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E8%83%8C%E6%99%AF%E9%9F%B3%E4%B9%90.png) 4、同时开设评论留言功能，欢迎访客分享新资讯、优秀的视频或者合适的古风音乐。 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%90%8E%E5%8D%8A%E6%AE%B5%E6%97%B6%E9%97%B4%E7%9A%84%E6%88%AA%E5%9B%BE/%E8%AF%84%E8%AE%BA.png) ### 定制化 -定制化前 导航栏为黑色与网站主题不符合，且太窄不易被看见。网站内容占满整个屏幕，易让人产生视觉疲劳。针对这些问题，我进行了一些个性化的设置。 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%AE%9A%E5%88%B6%E5%8C%96%E9%83%A8%E5%88%86/%E5%AE%9A%E5%88%B6%E5%8C%96%E5%89%8D.png) ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%AE%9A%E5%88%B6%E5%8C%96%E9%83%A8%E5%88%86/%E5%AE%9A%E5%88%B6%E5%8C%96%E5%89%8D2.png) #### 网站宽度 - 网站整体宽度改为原本的70%，让访客在视觉上更集中于中部的内容。轮播图相应缩小，弱化视觉疲惫。 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%AE%9A%E5%88%B6%E5%8C%96%E9%83%A8%E5%88%86/%E5%AE%9A%E5%88%B6%E5%8C%96-%E5%AE%BD%E5%BA%A6css.png) ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%AE%9A%E5%88%B6%E5%8C%96%E9%83%A8%E5%88%86/%E5%AE%9A%E5%88%B6%E5%8C%96-%E5%AE%BD%E5%BA%A6.png) #### 导航栏 - 更换导航栏背景色为网站主题颜色：朱红；增大导航栏所占宽度，并对文字和icon进行了位置的调整 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%AE%9A%E5%88%B6%E5%8C%96%E9%83%A8%E5%88%86/%E5%AF%BC%E8%88%AA%E6%A0%8F%E4%BF%AE%E6%94%B9%E5%89%8D.png) - 导航栏修改前 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%AE%9A%E5%88%B6%E5%8C%96%E9%83%A8%E5%88%86/%E5%AF%BC%E8%88%AA%E6%A0%8F%E4%BF%AE%E6%94%B9%E5%90%8E%20css.png) - 第一步，更改颜色 ![](https://gitee.com/jiayichen/Web_Operations/raw/master/img/%E5%AE%9A%E5%88%B6%E5%8C%96%E9%83%A8%E5%88%86/%E5%AF%BC%E8%88%AA%E6%A0%8F%E4%BF%AE%E6%94%B9%E5%90%8E%20css2.png) - 第二步，更改字体和icon位置