V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
nzynzynzy
V2EX  ›  程序员

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

  •  
  •   nzynzynzy · 257 天前 · 2508 次点击
    这是一个创建于 257 天前的主题,其中的信息可能已经有所发展或是发生改变。
    前端的朋友赐教,这几个比较有特点的页面是用什么样的技术栈搭建的,或者如果看不出来他们的技术而自己想做一个,应该如何起步,谢谢。

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

    https://vicprop.com.au/

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

    https://vicprop.com.au/property/13-hanworth-avenue-williams-landing/
    19 条回复    2023-08-16 09:06:39 +08:00
    zhongerbing
        1
    zhongerbing  
       257 天前   ❤️ 1
    用的 gatsbyjs ,是基于 react+ graphQL 的
    poic
        2
    poic  
       257 天前   ❤️ 4
    用插件,比如 wappalyzer
    MrUser
        3
    MrUser  
       257 天前   ❤️ 1
    mtjxuanh
        4
    mtjxuanh  
       257 天前
    wappalyzer+1
    FFFFourwood
        5
    FFFFourwood  
       257 天前 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
        6
    FFFFourwood  
       257 天前 via iPhone
    第二个网站用户的根第一个是一样的
    FFFFourwood
        7
    FFFFourwood  
       257 天前 via iPhone
    用的
    Mutoo
        8
    Mutoo  
       257 天前   ❤️ 1
    老哥也来澳洲搞前端啦,我之前也是来澳洲转前端的,你需要的东西基本上这里都能找到 https://tympanus.net/codrops/
    他们家的周更前端大合集基本上是每周必看,然后他们的各种页面特效专题也非常棒。希望你用得上。
    nzynzynzy
        9
    nzynzynzy  
    OP
       257 天前
    感谢以上几位,有很大帮助。那些滑动产生的效果也可以用 gatsby 生成是吗?
    monologue520
        10
    monologue520  
       257 天前
    @nzynzynzy 感觉主要是设计和样式吧, 和静态生成方式关系不大
    Mutoo
        11
    Mutoo  
       257 天前
    @nzynzynzy gatsby 是静态网站生成器,负责管理内容的,责任类似 CMS 。动态特效主要还是要用 js 实现,实际上这个网站把 sourcemap 都提交了,你可以直接打开网页开发者工具,看到整个前端的源码,很方便你直接学习。
    nzynzynzy
        12
    nzynzynzy  
    OP
       257 天前
    @Mutoo 大佬我给你发了个邮件,等回墨尔本希望 network 一下。谢谢!
    Mutoo
        13
    Mutoo  
       257 天前
    @nzynzynzy 欢迎。

    稍候看了一下源码,这个网站主要是用 https://github.com/audal/audal-boilerplate 这个开源项目搭建的。
    dfkjgklfdjg
        14
    dfkjgklfdjg  
       257 天前
    直接用 Wappalyzer - Technology profiler 分析一下就好了。[分析截图]( https://imgur.com/a/x1BTG1g)
    看分析结果主要就是 React/Gatsby + Radix UI ,轮播部分是 Keen-Slider ?

    第二个问题里面的 house 里面的模板是指详情页中间的房间信息和指导价之类的布局?
    如果是的话,就是很基础的 `flex` 弹性布局做的。
    weishijun14
        15
    weishijun14  
       257 天前
    gatsby 不知道,wordpress 主题一抓一大把
    nzynzynzy
        16
    nzynzynzy  
    OP
       257 天前
    @weishijun14 我是被 WP 主题坑怕了,感觉印度作坊的这些东西很容易挂掉,插件不兼容,WP 版本不兼容,插件版本不兼容,以及奇奇怪怪的问题……哎也可能是我自己倒霉喝凉水都塞牙缝
    wednesdayco
        17
    wednesdayco  
       257 天前
    第二个地址这一进去是拉了多少图片,就离谱
    LittleXing
        18
    LittleXing  
       257 天前   ❤️ 1
    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
        19
    weishijun14  
       255 天前
    @nzynzynzy themeforest 认准大品牌
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2695 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 75ms · UTC 11:32 · PVG 19:32 · LAX 04:32 · JFK 07:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.