认识全新的VillageVoice.com

射灯与传奇人物合作 乡村之声 重新构想，重新设计和重建他们的网站。这种合作的成果才得以实现。立即查看 villagevoice.com!

当我们开始时，我们看到Voice的现有网站正在展示它的年代，但是它托管了数十年的精彩内容-原始报告和写作，照片画廊和活动列表。在此重建过程中，Postlight承担了一些任务：使网站的美学和用户体验现代化，展示Voice的大胆摄影和故事，并为编辑人员提供发布和展示各种内容所需的工具，可定制的方式。

射灯通过三种主要方式解决了这些挑战。我们设计了一个模块化的页面布局系统，定制了一个内容管理系统以支持该模块化设计，并将现有内容从旧的CMS过渡到了新的CMS。

做了 Modular

乡村之声 每周出版一本新的纸质印刷品。该网站以印刷版发布所有作品，并以网络独家形式发布。这有很多新内容，尤其是在纸张的每周打印时间表上。

但是该网站不是每周一次，而是24小时运营。 Voice的编辑人员需要一种方法，以每小时一次的新鲜方式在网站上刊登文章，并能够强调特定主题并即时关联单个故事。

早些时候，我们知道我们不想创建刚性模板来定义固定空间，而固定空间恰好是某种事物的去向。 “哦，在这里插入英雄图像，那里的画廊，那里的链接列表。”这将使该网站看起来像是静态的，并且固定于读者。这将迫使编辑者使内容在页面布局中起作用，而不是使页面布局对内容起作用。

我们希望Voice的新网站能够随着出版物的增长而发展。我们希望其页面能够容纳各种布局和安排，包括，尤其是！ -有些人我们可能不考虑自己。同时，这些可能的布局中的每一个都必须在每种尺寸的屏幕上看起来都很棒。

为解决此问题，Postlight的高级产品设计师 Skyler Balbus 她提出了一个模块化的页面设计系统，她使用此处显示的纸质原型进行了演示。

每张纸都代表一个模块：一些内容或一组具有特定目的或主题的故事。假设只修复了顶部导航，Skyler重新整理了纸条以说明问题。这些构建块可以以编辑人员认为最有意义的任何方式组合在一起，以呈现当时对语音阅读器最重要的故事，照片和功能。

一些模块类型的例子 villagevoice.com 推出包括：

• 自动，实时更新网站上最受欢迎的故事，列表由 Chartbeat.
• 带有字幕的英雄文章，两侧或后面是两个较小的支撑柱。
• 在特定行业中的最新发布内容的自动列表。该卡有两种样式：水平卡列表（您可以在移动设备上从左向右滑动）或带有内联“加载更多”按钮的网格。
• 一个由四个大小相等（因此在视觉上加权相同）的文章组成的精选网格。
• Voice工作人员梦up以求的任何自定义标记。

每个模块也必须很聪明。他们需要知道它们在页面上的放置位置，所有需要渲染的数据点点滴滴， 和 什么故事出现在它们前面的模块中，这样当访客向下滚动时，不会看到一个模块到另一个模块的重复内容。

一旦Voice 和 射灯就该设计系统达成一致并充实了一些模块，就该开始构建了。

建立 CMS

我们选择了 WordPress的 为新动力 villagevoice.com 出于以下几个原因：我们的时间表很短，需要站出来一个alpha 尽快，WordPress易于使用和出租，并且有成熟的托管WordPress托管服务，这意味着Voice不需要内部网络运营人员来运行该网站。 （PSA： 里面没有耻辱）

WordPress的开箱即用，不支持我们为该站点定义的模块化设计系统，因此，即使从功能齐全的CMS开始，也有很多工作要做。使用功能强大的插件 高级自定义字段，Postlight的首席工程师 尘土飞扬的马修斯 创建了一个软件层，使项目中的其他工程师（包括我和我们的产品经理） 阿里·沙佩尔）在代码中定义新模块，并观看它们神奇地出现在WordPress管理员中，准备添加到页面中。

这是WordPress管理员中页面的模块集合的外观：

使用此系统，编辑人员可以在网站的首页和垂直页面上以任何特定顺序起草，预览，发布和安排自定义模块的集合。

增加20年的内容（和 Stir)

用户也完全看不到该项目中一些最繁琐，耗时且重要的工作。 射灯必须将已经在villagevoice.com上发布的二十年的故事，照片，类别和作者转移到新的WordPress实例上。旧系统将所有数据导出为自定义文件格式，因此现成的导入工具无济于事。

进口要求包括：

• 阅读20年的故事，关于 125,000个帖子， 以1GB的XML的形式-将其写入WordPress的数据结构
• 清理这些文章中用于1.0时代浏览器的旧标记
• 导入约 275,000张图片 （大约80GB）放入WordPress媒体库，并更新帖子正文以反映这些图片的新位置
• 将传统分类法（例如类别和标签）导入并整理到新结构中
• 将旧版网址映射到其新的WordPress永久链接

由于存档的深度，在此自定义导入器上进行构建，测试和迭代的开发周期需要使用电动工具。尘土飞扬的解释：

一次完整的导入可能需要10个小时或更长时间，因此我们需要构建工具，使我们可以任意缩小或扩展测试导入的范围，以便我们可以进行更改并在较小的帖子组中进行测试。当我们觉得足以将导入运行发布到常规测试时，我们需要将结果（数据库和资产）推送到我们的登台服务器。使用类似的工具 WP-CLI, 机器人和 WP迁移数据库 使我们能够自动执行许多任务。

现在，网站访问者可以完全访问Voice的丰富工作档案，该档案可以追溯到20年前。继续：回忆一下当 格林威治村的一居室公寓以不到20万美元的价格售出，享受90年代后期的这篇评论 弗利特伍德麦克表演在花园，或者看看您是否认识到以下任何一位创始人 1997年的十家“硅胡同”科技创业公司.

的 villagevoice.com 我们上周发货的是一种最小可行产品，旨在不断发展。现在，该网站的发布平台已准备好支持快速功能开发， 许多 还有更多。

射灯很荣幸有机会与纽约的标志性品牌如Voice合作，我们也很乐意与您合作。在您的网站，应用程序或平台上需要帮助吗？ 给我们下一行。