搜索
首页web前端html教程如何优雅地共享Header和Footer_html/css_WEB-ITnose

偶然在微博看到在SegmentFault上的一个共享Header和Footer的问题,而正好我们也解决了这个问题。在这里,就分享一下我们的经验咯。

业务场景

我们的业务环境和58同城、搜房网这一类站点差不多。我们维护的站点主要有三个页面:

  • 一个用于搜索的首页
  • 一个搜索结果页
  • 一个用于显示商品信息的详细页。

总体上和Google类似,有一个简洁的首页,一个搜索结果页,以及目标网站页。在旧有的系统中,这三个不同的页面都是同一个代码库中。

而对于我们的新系统来说,这些都是独立的项目。因为我们需要同Google一样可以快速打开首页,首页就变成了一个部分内容是动态的,但是大部分时间是静态网站。这一点可以参考我之前的另外一篇文章《编辑-发布-开发分离》,仅仅只在编辑更新内容的时候,才生成新的首页(静态页面)。在这时,由于能限制用户的访问速度,莫过于CDN了。

同时,我们还有几个不同的博客及十几个引流站点,这些都需要使用同样的Header和Footer。对应于我们的其他页面,我们使用React来构建,这意味着我们需要不同的模板。

并且当我们在设计新的系统的时候,我们有了一个更新网站UI的计划。这意味着我们在替换旧有的系统完成之前,我们需要更新所有网站的UI,WTF!

So,在这时我们设计了第一个Share Header和Footer的架构。

基于包与模板的共享

接着,由于Release时间的限制,我们并没有在一开始的时候实现基于脚本的共享方式。因此我们使用了内部的UI框架,同时这个UI框架将会在我们的所有站点上使用——我们可以使用同样的HTML和CSS。

因此在我们的新站点上,我们使用基于Bower与GitHub的Release方案——我们使用Grunt作为构建工具。每次在本地启动Server的时候,我们都会更新依赖。因此,在我们的站点上,我们只需要更新bower.json中的版本号即可。

而对于我们的旧有站点上,因为是一个遗留系统,没有这么先进的工具。并且从理论上来说,不应该会太多的时间和精力在上面,于是我们选择了手动复制的方案。

对于博客和其他站点,一部分使用手动复制,一部分使用iFrame加载。因此在Release新版本的时候,我们会上传新的Header和Footer到AWS S3上。

对于iFrame的站点来说,他们就实现了动态更新。对于其他站点来说,就需要手动更新。虽是如此,但是对于业务已经固定的网站来说,Header和Footer只会一年更新一两次。不过,如果发生收购和被收购时,会多更新一两次。

那么,对于那些使用的不是基于HTML,而是使用模板的站点怎么办?

脚本生成的共享方式

最明显的一个问题就是使用React的站点。因为大部分的模板引擎都是可以支持class="",而React你只能用className=""。所以要么,我们将HTML写在基本的模板文件里,如base.html;要么我们将class替换成className。架构变换成如下所示的结构:

所以,在这时理想的方式就是通过某种类型的模板来生成对应的模板。即我们只需要有一个JSX的模板文件,然后替换其中的相应内容即可。

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

如何高效地在网页中为PNG图片添加描边效果?如何高效地在网页中为PNG图片添加描边效果?Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

< datalist>的目的是什么。 元素?< datalist>的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html< datalist>元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

< meter>的目的是什么。 元素?< meter>的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML< meter>元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了< meter>从< progress>和前

> gt;的目的是什么 元素?> gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML< Progress>元素,其目的,样式和与< meter>元素。主要重点是使用< progress>为了完成任务和LT;仪表>对于stati

我如何使用html5< time> 元素以语义表示日期和时间?我如何使用html5< time> 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

本文解释了HTML5< time>语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境