:mountain_bicyclist: Landing Pages of Ant Design System

Overview

Ant Design Landing

Landing Pages of Ant Design System

Dependencies DevDependencies

English | 简体中文

What is Landing?

Landing is a template built by Ant Motion's motion components. It has a rich homepage template, downloads the template code package, and can be used quickly. You can also use the editor to quickly build your own dedicated page.

Features

Templates

Has a wealth of various page templates to provide downloads.

Modules

Diverse modules, you can quickly and flexibly configure the page template you want.

Example in scaffolding

Comments
  • ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

    ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

    完全根据文档做下来的,试的新建好几个项目了,还是不行。有大神指导一下什么原因吗?

    报错信息如下: Failed to compile ./src/Home/less/antMotionStyle.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-7-3!./src/Home/less/antMotionStyle.less) ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

    • options has an unknown property 'source'. These properties are valid: object { lessOptions?, prependData?, appendData?, sourceMap? } This error occurred during the build time and cannot be dismissed. 截屏2020-05-03 上午12 05 19
    opened by jaybolee 15
  • Only certain images and text are loading

    Only certain images and text are loading

    Hi, Thanks for such a wonderful repo. I tried using your editor, downloaded the components and integrated in my react app built using create react app. However, only a few images and text are loading and the rest of the app is not loading. Can you please check on why this is happening. Please check the repo and let me know where I am going wrong. Thanks so much.

    https://github.com/venkat-raghulan/pcosDoc-frontend.git

    I am trying to build this.

    https://landing.ant.design/edit/#uid=5ded54dc8a84ab0068299078

    opened by venkat-raghulan 13
  • refactor: redux and helper fns

    refactor: redux and helper fns

    前言

    前几天用 landing 来做一个项目的 landing page 的时候发现没有撤销功能,原本打算加上,结果发现 3.0 版已经包含了这个功能。因为我个人非常喜欢这个项目,所以还是希望能参与贡献。如果有机会的话,希望能跟作者聊聊,了解更多项目里面的设计细节。

    因为是第一次给 landing 贡献代码,也没有看到项目的 roadmap,所以这次主要是根据我读源码时的一些感受做的一点调整,并没有任何功能性的改动。希望对未来的开发有帮助,尤其是想要参与贡献的其他开发者。

    调整

    主要是将一些函数解耦和提取公共函数。

    1. redux-saga 替换了 redux-thunk,以提高异步副作用流程、逻辑的清晰度。
    2. 新建了 shared 文件夹
      • redux/: redux 相关内容
      • localStorage: localStorage 相关公共函数
      • url:url 相关公共函数
      • leancloud:leancloud 初始化
      • utils:其他的一些公共函数
      • constants:一些常量

    其他想法

    之后可以继续将所有的组件和辅助函数重新梳理一遍,看看是否有更多的调整优化空间(解耦,公共函数提取,更富语义的变量名、函数名);添加测试;引入 TypeScript。

    另一方面,个人也很想参与到新功能开发中,比如 issue 里面提到的多页面导出,或者在编辑器里面可以自己制作 motion 的模板 🤔

    opened by cheng-kang 12
  • ValidationError报错

    ValidationError报错

    错误信息:./src/Home/less/antMotionStyle.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-7-3!./src/Home/less/antMotionStyle.less) ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

    • options has an unknown property 'source'. These properties are valid: object { lessOptions?, prependData?, appendData?, sourceMap? }

    使用的node版本:V10.16.1

    在https://landing.ant.design/ 官网编辑的模版,下载后按照文档操作后报出的错误

    opened by Ricky-dgs 9
  • Can not see anything in the stage in Chrome!

    Can not see anything in the stage in Chrome!

    Log error: TypeError: Cannot read property 'template' of undefined Try to load the js at: https://as.alipayobjects.com/g/component/??react/16.3.0/react.production.min.js,react/16.3.0/react-dom.production.min.js

    Why there is /??react ?

    opened by longyangxi 9
  • https://landing.ant.design/edit not working

    https://landing.ant.design/edit not working

    The antd landing editor is not working https://landing.ant.design/edit . SharedScreenshot Please make it work. I tried it on Chrome, Firefox, Edge, Internet Explorer also.

    opened by abhinavpanse 8
  • editor not work in chrome 74

    editor not work in chrome 74

    editor not work in Chrome 74

    TypeError: Cannot read property 'template' of undefined
        at t.getDataToChildren (templates.js:34)
        at t.getTemplatesToChildren (templates.js:34)
        at t.value (templates.js:34)
        at m (??react/16.3.0/react.production.min.js,react/16.3.0/react-dom.production.min.js:150)
        at beginWork (??react/16.3.0/react.production.min.js,react/16.3.0/react-dom.production.min.js:157)
        at e (??react/16.3.0/react.production.min.js,react/16.3.0/react-dom.production.min.js:189)
        at f (??react/16.3.0/react.production.min.js,react/16.3.0/react-dom.production.min.js:190)
        at y (??react/16.3.0/react.production.min.js,react/16.3.0/react-dom.production.min.js:195)
        at q (??react/16.3.0/react.production.min.js,react/16.3.0/react-dom.production.min.js:194)
        at x (??react/16.3.0/react.production.min.js,react/16.3.0/react-dom.production.min.js:194)
    
    opened by kagawagao 8
  • umi dev 报错了,用了ANTD4.0.2 @import

    umi dev 报错了,用了ANTD4.0.2 @import "~antd/lib/style/v2-compatible-reset.less"; ^ Can't resolve

    ` Failed to compile with 1 errors 4:47:47 PM

    error in ./global.less

    Module build failed (from /usr/local/lib/node_modules/umi/node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from /usr/local/lib/node_modules/umi/node_modules/less-loader/dist/cjs.js):

    @import "~antd/lib/style/v2-compatible-reset.less"; ^ Can't resolve 'antd/lib/style/v2-compatible-reset.less' in '/Users/kane/Downloads/En_Site/en_site/src/Home/less' in /Users/kane/Downloads/En_Site/en_site/src/Home/less/common.less (line 2, column 0) at runLoaders (/usr/local/lib/node_modules/umi/node_modules/webpack/lib/NormalModule.js:316:20) at /usr/local/lib/node_modules/umi/node_modules/loader-runner/lib/LoaderRunner.js:367:11 at /usr/local/lib/node_modules/umi/node_modules/loader-runner/lib/LoaderRunner.js:233:18 at context.callback (/usr/local/lib/node_modules/umi/node_modules/loader-runner/lib/LoaderRunner.js:111:13)

    @ ./.umi/umi.ts 6:0-25 @ multi /usr/local/lib/node_modules/umi/node_modules/@umijs/bundler-webpack/lib/webpackHotDevClient/webpackHotDevClient.js ./.umi/umi.ts `

    opened by szkane 6
  • 新版生成的Nav0代码与demo不一样

    新版生成的Nav0代码与demo不一样

    你好,使用ant-design-landing的在线编辑器生成文件,参照https://landing.ant.design/docs/use/create-react-app-cn#%E9%A2%9D%E5%A4%96%E5%86%85%E5%AE%B9 文档配置多页面路由时,生成的Nav0代码与文档中描述的不一样,请问该怎么修改?

    在线编辑器生成的代码如下:

    const navChildren = navData.map((item) => {
          const { children: a, subItem, ...itemProps } = item;
          if (subItem) {
            return (
              <SubMenu
                key={item.name}
                {...itemProps}
                title={
                  <div
                    {...a}
                    className={`header3-item-block ${a.className}`.trim()}
                  >
                    {a.children.map(getChildrenToRender)}
                  </div>
                }
                popupClassName="header3-item-child"
              >
                {subItem.map(($item, ii) => {
                  const { children: childItem } = $item;
                  const child = childItem.href ? (
                    <a {...childItem}>
                      {childItem.children.map(getChildrenToRender)}
                    </a>
                  ) : (
                    <div {...childItem}>
                      {childItem.children.map(getChildrenToRender)}
                    </div>
                  );
                  return (
                    <Item key={$item.name || ii.toString()} {...$item}>
                      {child}
                    </Item>
                  );
                })}
              </SubMenu>
            );
          }
          return (
            <Item key={item.name} {...itemProps}>
              <a {...a} className={`header3-item-block ${a.className}`.trim()}>
                {a.children.map(getChildrenToRender)}
              </a>
            </Item>
          );
        });
    

    在线文档中demo的代码如下:

    class Header extends React.Component {
      ....
        const navChildren = Object.keys(navData).map((key, i) => (
          <Item key={i.toString()} {...navData[key]}>
    -       <a
    +       <Link
              {...navData[key].a}
    +         href={navData[key].a.href}
    +         to={navData[key].a.href}
              target={navData[key].a.target}
            >
              {navData[key].a.children}
    -       </a>
    +       </Link>
          </Item>
      ...
    }
    
    opened by Ricky-dgs 5
  • 多页面如何进行rewrite?

    多页面如何进行rewrite?

    也许这个问题和当前项目无关。但是landing大部分都是用来做官网了,所以应该不少人会碰到类似问题。 https://landing.ant.design/docs/use/umi-cn#%E6%B7%BB%E5%8A%A0%E9%9D%A2%E9%A1%B5 我基于此教程,做了多页面,没有太大问题。 现在主要问题是在react-router-dom的BrowserRouter模式下。我将项目放到OSS上,无法重定向,导致用户直接访问后续页面无法访问的问题(无法从\page1重定向为\index.html#page1)。 求助一下,在config-overrides.js里应该如何设置呢?

    谢谢。

    opened by shevaxp 5
  • "Error formatting code" when trying to download a template

    image

    I get the error

    Error formatting code.
    EDITCSS: SyntaxError: (postcss) CssSyntaxError Missed semicolon (13:14) 11 | -align: center; 12 | overflow: auto; > 13 | position: text-align: center; | ^ 14 | overflow: auto; 15 | position: static; 16 | }
    

    When trying to download my template - is there a way I can fix this and still download?

    opened by RusseII 5
  • 请问怎么导入Ant Design Pro - typescript?

    请问怎么导入Ant Design Pro - typescript?

    landing 下载下来的 .js 跟 我用的 typescript 兼容的好像有问题, 一直报错

    找不到: @import "~antd/lib/style/themes/default.less";

    以及 Error: Module "./rc-queue-anim" does not exist in container. while loading "./rc-queue-anim" from webpack/container/reference/mf

    opened by daviscyl 0
  • config-overrides.js err

    config-overrides.js err

    Compiled with problems:X

    ERROR in ./src/Home/less/antMotionStyle.less (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[9].use[3]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[4]!./src/Home/less/antMotionStyle.less)

    Module build failed (from ./node_modules/less-loader/dist/cjs.js):

    @import "~antd/lib/style/themes/default.less"; ^ Less resolver error: '~antd/lib/style/themes/default.less' wasn't found. Tried - C:\Users\84979\Desktop\NextSolLandingPage\ns-landingpage\src\Home\less~antd\lib\style\themes\default.less,npm://~antd\lib\style\themes\default.less,~antd\lib\style\themes\default.less

    Webpack resolver error details: resolve '~antd/lib/style/themes/default.less' in 'C:\Users\84979\Desktop\NextSolLandingPage\ns-landingpage\src\Home\less' Parsed request is a module using description file: C:\Users\84979\Desktop\NextSolLandingPage\ns-landingpage\package.json (relative path: ./src/Home/less) Field 'browser' doesn't contain a valid alias configuration resolve as module C:\Users\84979\Desktop\NextSolLandingPage\ns-landingpage\src\Home\less\node_modules doesn't exist or is not a directory C:\Users\84979\Desktop\NextSolLandingPage\ns-landingpage\src\Home\node_modules doesn't exist or is not a directory C:\Users\84979\Desktop\NextSolLandingPage\ns-landingpage\src\node_modules doesn't exist or is not a directory looking for modules in C:\Users\84979\Desktop\NextSolLandingPage\ns-landingpage\node_modules C:\Users\84979\Desktop\NextSolLandingPage\ns-landingpage\node_modules~antd doesn't exist C:\Users\84979\Desktop\NextSolLandingPage\node_modules doesn't exist or is not a directory C:\Users\84979\Desktop\node_modules doesn't exist or is not a directory looking for modules in C:\Users\84979\node_modules C:\Users\84979\node_modules~antd doesn't exist C:\Users\node_modules doesn't exist or is not a directory C:\node_modules doesn't exist or is not a directory looking for modules in C:\Users\84979\Desktop\NextSolLandingPage\ns-landingpage\node_modules C:\Users\84979\Desktop\NextSolLandingPage\ns-landingpage\node_modules~antd doesn't exist

    Webpack resolver error missing: undefined

      Error in C:\Users\84979\Desktop\NextSolLandingPage\ns-landingpage\src\Home\less\custom.less (line 1, column 0)
    
    opened by phanquanDHTB 3
  • 导航栏不显示 滑动后的图片与描述文字空白

    导航栏不显示 滑动后的图片与描述文字空白

    image image

    下载官网示例 直接放到create-react-app中

    运行效果如下 image image image

    package.json { "name": "demo", "version": "0.1.0", "private": true, "dependencies": { "@ant-design/compatible": "^5.0.0-alpha.2", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "antd": "^4.23.6", "customize-cra": "^1.0.0", "enquire-js": "^0.2.1", "less": "^4.1.3", "less-loader": "^11.1.0", "rc-banner-anim": "^2.4.5", "rc-queue-anim": "^2.0.0", "rc-scroll-anim": "^2.7.6", "rc-tween-one": "^3.0.6", "react": "^18.2.0", "react-app-rewired": "^2.2.1", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "babel-plugin-import": "^1.13.5" } }

    opened by jartins 2
Releases(3.0.2)
  • 3.0.2(Mar 20, 2020)

  • 3.0.1(Nov 20, 2019)

  • 3.0.0(Aug 21, 2019)

    Editor Features

    • 增加撤消重做功能,只支持 30 步操作。
    • 收纳导航,以图标形式。
    • editor-list 增加功能, https://github.com/ant-motion/editor-list/issues/6
    • 导航支持 linkA
    • 导航支持下拉菜单
    • 更新编辑 JSON 数据,删除重置,保存后关闭弹框。
    • refactor: redux and helper fns #103

    Design and Templates

    • 增加 《统计类、使用流程, 卡片功能介绍 》三个模块。
    • 调整 footer2 内容,可添加图片。。
    • pricing2 增加 mobile #66 。
    • 更新 nav0,支持下拉菜单,去除 nav1。。。
    • 增加浅色导航。
    • 增加左右布局 Banner
    • 更新 content0 的子级添加

    Doc

    • 增加一个中台产品页面模板。
    Source code(tar.gz)
    Source code(zip)
  • 2.0.0(Apr 19, 2019)

    Design and Templates

    • ant design 源文件增加
    • ant design landing 源文件增加
    • 模板分类, 目前分类有 Navs、Banners、Contents、Contacts、Features、Pricings、Teams、Footers
    • 基础模板源文件增加
      • Banners - 新增应用 banner
      • Teams - 新增四个
      • Pricing - 新增三个。

    Editor Features

    • 增加在线 build 系统,可直接在线发布,目前暂时只开放发布到 now.sh 上。
    • 增加 childAll 功能,在 titleWrapper 上增加了 button 增删的功能。
    • 修复 #55 导航编辑后,二次点击样式丢失。

    Doc

    • use in create-react-app
    • 额外内容,在 umi 和 create-react-app 脚架手架使用 route 添加 landing.
    Source code(tar.gz)
    Source code(zip)
  • 1.1.0(Jan 30, 2019)

    编辑器功能更新 #18

    • 编辑器页面国际化增加英文版。
    • 导航里增加清除全部缓存。
    • 新建文件下拉菜单里的删除不再删除数据库里的数据,已免误删。
    • 更新样式编辑器:
      • 样式编辑里的名称用 icon 替换,hover 时名称提示。
      • 样式选择里提供一个专属的随机样式和标签上的样式,标签上的样式改变将改变所有带有这样式的元素。
      • 样式选择后生成带有父级名称的 id 的 style 标签,每个编辑的样式都有独自的 style, 修复编辑样式后不能保存,自身编辑样式消失的问题。 #12
    • 导航模板无线端展开不了。
    • seeconf 的模板数据更新。
    • 增加预览页的数据刷新功能。
    • 修复侧边小点 - switch 生成代码无效。 #24

    由于编辑数据的变更,如有任何编辑的问题,请提供你的编辑 uid.

    Source code(tar.gz)
    Source code(zip)
Owner
Ant Design Team
A UI Design Language
Ant Design Team
Automatic GatsbyJS App Landing Page - Automatically generate iOS app landing page using GatsbyJS

Automatic GatsbyJS App Landing Page Create and deploy an iOS app landing page on GitHub Pages and Netlify in a couple of minutes ?? Fork this repo ??

Imed Adel 173 Jan 1, 2023
coala Landing Page - https://gitlab.com/coala/landing is needed as backend

landing-frontend coala Landing Page - https://gitlab.com/coala/landing is needed as backend Usage To run locally: $ git clone https://github.com/coala

coala development group 31 Oct 30, 2022
Standalone keycloak theme using Système de Design de l'État (french government design system)

keycloak-dsfr This template has been made thanks to keycloakify. It follows the french design system Système de Design de l'État. You can find guideli

Fabrique numérique des Ministères Sociaux 4 May 25, 2022
The CSS design system that powers GitHub

Primer CSS The CSS implementation of GitHub's Primer Design System Migrating ?? If you currently use the primer or primer--prefixed npm packages, plea

Primer 11.6k Jan 3, 2023
Salesforce Lightning Design System

Salesforce Lightning Design System Welcome to the source code repository for Salesforce Lightning Design System, brought to you by Salesforce UX. SLDS

Salesforce UX 3.4k Dec 29, 2022
Orange Design System theme for Storybook

ODS Storybook Theme Orange Design System Storybook Theme provides a Storybook theme for Orange. Quick start Install with npm: npm install ods-storyboo

Orange 3 Jan 10, 2022
A responsive, Bootstrap landing page template created by Start Bootstrap

Start Bootstrap - Landing Page Landing Page is a multipurpose landing page template for Bootstrap created by Start Bootstrap. Preview View Live Previe

Start Bootstrap 1.4k Jan 3, 2023
Minimal landing page for developers

Dev Landing Page Minimal landing page for developers. Developers don't talk much. Their code does all the talking. So here's a minimal landing page fo

Dinesh Pandiyan 1.2k Jan 4, 2023
Increase your landing page conversion rates.

Ouibounce Originally created by Carl Sednaoui from MailCharts. Maintained and improved by generous contributors. Ouibounce: A small library enabling y

Carl Sednaoui 2.3k Dec 9, 2022
Esri GitHub landing page

esri.github.io Landing page for Esri open source projects. Both the project categories and search suggestions in http://esri.github.io are powered by

Esri 470 Dec 31, 2022
Tailwind CSS Starter Template - Landing Page

Tailwind Toolbox - Landing Page Template Landing Page is an open source, generic landing page template for Tailwind CSS created by Tailwind Toolbox. G

Tailwind Toolbox 908 Jan 8, 2023
A web app landing page theme created by Start Bootstrap

Start Bootstrap - New Age New Age is a web app landing page theme for Bootstrap created by Start Bootstrap. Preview View Live Preview Status Download

Start Bootstrap 996 Dec 26, 2022
Landing page starter

?? Fresh Fresh is a free landing page starter built by cssninjaStudio. ✌️ preview Check out the live demo by clicking here. Fresh is built with Bulma

cssninja 486 Dec 23, 2022
Startup Landing Page Components for React.js

neal-react neal-react is a collection of reactjs components to quickly build landing pages. I found that using hosted services like Launchrock doesn't

Denny Britz 1.4k Nov 30, 2022
🖼 A pure client-side landing page template that you can fork, customize and host freely. Relies on Mailchimp and Google Analytics.

landing-page-boilerplate A pure client-side landing page template that you can freely fork, customize, host and link to your own domain name (e.g. usi

Adrien Joly 129 Dec 24, 2022
Serverless Pre-Rendering Landing Page

Serverless Pre-Rendering Demo Read the blog post Checkout the demo Developing By default, the content on the site is based off our public Notion page.

Vercel 389 Dec 21, 2022
🎉 Personal landing page template

Landing Page Personal landing page template. Designed to keep simplicity in mind in both setup and UI. Stack HTML CSS Font Awesome Themes Couple custo

Madza 77 Dec 22, 2022
FREE Bootstrap Landing Page Template for Developers and Startups

Theme Details & Demo Details: https://themes.3rdwavemedia.com/bootstrap-templates/startup/appkit-landing-free-bootstrap-theme-for-developers-and-start

Xiaoying Riley 158 Nov 30, 2022
a Plex landing page that redirects you to various sites.

PlexRedirect a Plex landing page that redirects you to various sites. Blank spaces are where your server name goes. If you don't have a server name yo

null 222 Dec 29, 2022