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

2023-08-14 11:07:31 +08:00
 nzynzynzy
前端的朋友赐教,这几个比较有特点的页面是用什么样的技术栈搭建的,或者如果看不出来他们的技术而自己想做一个,应该如何起步,谢谢。

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

https://vicprop.com.au/

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

https://vicprop.com.au/property/13-hanworth-avenue-williams-landing/
2770 次点击
所在节点    程序员
19 条回复
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
mtjgu
2023-08-14 11:22:25 +08:00
wappalyzer+1
FFFFourwood
2023-08-14 11:25:05 +08:00
第一个网站:
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
第二个网站用户的根第一个是一样的
FFFFourwood
2023-08-14 11:26:47 +08:00
用的
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 认准大品牌

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/965056

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX