请前端的朋友帮忙分析一下这个网站的前端技术

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 505 天前的主题，其中的信息可能已经有所发展或是发生改变。

前端的朋友赐教，这几个比较有特点的页面是用什么样的技术栈搭建的，或者如果看不出来他们的技术而自己想做一个，应该如何起步，谢谢。

1. 这个主页是如何搭建的

https://vicprop.com.au/

2. 这个具体的 house 里面的模板是如何搭建的

https://vicprop.com.au/property/13-hanworth-avenue-williams-landing/

搭建

赐教

前端

house

19 条回复 • 2023-08-16 09:06:39 +08:00

zhongerbing

2023-08-14 11:15:01 +08:00

用的 gatsbyjs ，是基于 react+ graphQL 的

poic

2023-08-14 11:18:41 +08:00

用插件，比如 wappalyzer

MrUser

2023-08-14 11:20:14 +08:00

https://vicprop.com.au/framework-ce438331f514f199b2ce.js.LICENSE.txt
里边有些 Reacct 的信息

mtjgu

2023-08-14 11:22:25 +08:00

wappalyzer+1

FFFFourwood

2023-08-14 11:25:05 +08:00 via iPhone

第一个网站：
Analytics：Hotjar, Google Analytics GA4

JavaScript frameworks: React, Gatsby(4.24.8)

Video players: Plyr

Miscellaneous: Webpack( 50% sure), Open Graph, Module Federation (50% sure)

Web servers: Apache Traffic Server

Caching: Varnish

Tag managers: Google Tag Manager

Static site generators: Gatsby (4.24.8)

JavaScript libraries: Keen-Slider, web-vitals, core-js

UI frameworks: Radix UI

RUM: web-vitals

FFFFourwood

2023-08-14 11:26:34 +08:00 via iPhone

第二个网站用户的根第一个是一样的

FFFFourwood

2023-08-14 11:26:47 +08:00 via iPhone

用的

Mutoo

2023-08-14 11:29:15 +08:00

老哥也来澳洲搞前端啦，我之前也是来澳洲转前端的，你需要的东西基本上这里都能找到 https://tympanus.net/codrops/
他们家的周更前端大合集基本上是每周必看，然后他们的各种页面特效专题也非常棒。希望你用得上。

nzynzynzy

2023-08-14 11:32:38 +08:00

感谢以上几位，有很大帮助。那些滑动产生的效果也可以用 gatsby 生成是吗？

monologue520

2023-08-14 11:36:22 +08:00

@nzynzynzy 感觉主要是设计和样式吧, 和静态生成方式关系不大

Mutoo

2023-08-14 11:37:06 +08:00

@nzynzynzy gatsby 是静态网站生成器，负责管理内容的，责任类似 CMS 。动态特效主要还是要用 js 实现，实际上这个网站把 sourcemap 都提交了，你可以直接打开网页开发者工具，看到整个前端的源码，很方便你直接学习。

nzynzynzy

2023-08-14 11:39:40 +08:00

@Mutoo 大佬我给你发了个邮件，等回墨尔本希望 network 一下。谢谢！

Mutoo

2023-08-14 11:41:57 +08:00

@nzynzynzy 欢迎。

稍候看了一下源码，这个网站主要是用 https://github.com/audal/audal-boilerplate 这个开源项目搭建的。

dfkjgklfdjg

2023-08-14 11:50:24 +08:00

直接用 Wappalyzer - Technology profiler 分析一下就好了。[分析截图]( https://imgur.com/a/x1BTG1g)
看分析结果主要就是 React/Gatsby + Radix UI ，轮播部分是 Keen-Slider ？

第二个问题里面的 house 里面的模板是指详情页中间的房间信息和指导价之类的布局？
如果是的话，就是很基础的 `flex` 弹性布局做的。

weishijun14

2023-08-14 15:12:46 +08:00

gatsby 不知道，wordpress 主题一抓一大把

nzynzynzy

2023-08-14 15:16:26 +08:00

@weishijun14 我是被 WP 主题坑怕了，感觉印度作坊的这些东西很容易挂掉，插件不兼容，WP 版本不兼容，插件版本不兼容，以及奇奇怪怪的问题……哎也可能是我自己倒霉喝凉水都塞牙缝

wednesdayco

2023-08-14 16:18:45 +08:00

第二个地址这一进去是拉了多少图片，就离谱

LittleXing

2023-08-14 16:30:14 +08:00

JavaScript 框架：React Gatsby4.24.8
视频播放器：Plyr
其他：Webpack50%sure Open Graph Module Federation50%sure
Web 服务器：Apache Traffic Server
缓存：Varnish
标签管理器 Google Tag Manager
静态站点生成器 Gatsby4.24.8
JavaScript 库 Keen-Slider web-vitals core-js3.26.0
RUM：web-vitals

weishijun14

2023-08-16 09:06:39 +08:00

@nzynzynzy themeforest 认准大品牌