公司网站源码|公司小程序源码带手机版

　　世界正在变得非常数字化。其中，网站对任何初创公司、公司、企业或个人的重要性都有其重要性，我们都知道这一点。现在，并不是每个人都知道复杂的代码甚至拖放创作。每个人都没有时间、想要或精力来为自己创建一个网站。这就是网站设计师和网站开发专业人士的用武之地。在本文中，我将主要讨论我们使用的工具以及我们如何使用它们来创建我们的动态网站。这些是我们通常用于客户项目的工具。
　　
　　演示：m.jcedus.top
　　
　　设计：设计团队使用 figma 来创建网站的设计，初始版本的屏幕截图如下所示。设计经过四次迭代完成，第一次是低保真线框。几乎每个人都以某种方式为设计做出了贡献。
　　
　　内容：我们有专人负责网站材料的文案，他们与设计团队合作，确保他们所写的内容与设计一致。
　　
　　发展：在创建设计和内容后，我们继续构建网站。在我进入技术细节之前，让我列出一些网站所支持的东西。
　　
　　为 UI 做出反应
　　
　　用于 SSG/SSR/ISSG 的NextJS
　　
　　用于样式的Tailwind css
　　
　　没有类名冲突的CSS 模块样式
　　
　　GSAP JavaScript 动画
　　
　　邮件列表的Mailchimp
　　
　　Vercel CI/CD 和托管
　　
　　Framer 动作JavaScript 动画
　　
　　TypeScript为我们的代码库添加类型安全
　　
　　我可能会在这个阶段多花一点时间，因为开发是最迷人的阶段。Reactjs是网站的基础，所有组件都建立在它之上。下面是一个示例可重用Button组件及其样式。
　　
　　button.tsx

import {FC,forwardRef,ButtonHTMLAttributes,JSXElementConstructor,ReactElement,
} from 'react';
import Link from 'next/link';
import { motion } from 'framer-motion';
import cn from 'classnames';import s from './Button.module.scss';interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {href?: string;className?: string;disabled?: boolean;rightIcon?: ReactElement;leftIcon?: ReactElement;active?: boolean;target?: '_blank' | '_self' | '_parent' | '_top';size?: 'sm' | 'md' | 'lg';variant?:| 'primary'| 'secondary'| 'white'| 'black'| 'naked'| 'outlineBlack'| 'outlineWhite'| 'square';as?: 'button' | 'a' | JSXElementConstructor<any>;
}export const Button: FC<ButtonProps> = forwardRef((props, buttonRef) => {const {as: Tag = 'button',variant = 'primary',size = 'md',target = '_self',href,active,rightIcon,leftIcon,className,disabled,children,...rest} = props;const classes = cn(s.root,{[s.primary]: variant === 'primary',[s.outlineBlack]: variant === 'outlineBlack',[s.outlineWhite]: variant === 'outlineWhite',[s.secondary]: variant === 'secondary',[s.white]: variant === 'white',[s.naked]: variant === 'naked',[s.black]: variant === 'black',[s.square]: variant === 'square',[s.md]: size === 'md',[s.sm]: size === 'sm',[s.lg]: size === 'lg','flex items-center gap-3': (rightIcon || leftIcon) && size === 'md',[s.dFlex]: (rightIcon || leftIcon) && size === 'lg',[s.active]: active,},className);return (<motion.spanclassName='inline-block'initial={{ y: 10, opacity: 0 }}transition={{duration: 1,type: 'spring',damping: 5,}}whileInView={{ opacity: 1, y: 0 }}viewport={{ once: true, amount: 0.5 }}>{href ? (<Tag {...rest}><Link href={href}><a className={classes} target={target}>{leftIcon}<span>{children}</span>{rightIcon}</a></Link></Tag>) : (<Tag disabled={disabled} className={classes} {...rest}>{leftIcon}<span>{children}</span>{rightIcon}</Tag>)}</motion.span>);
});Button.displayName = 'Button';

　　module.scss

.root {@apply mb-1 transition duration-200 ease-linear;
}.dFlex {@apply flex items-center gap-5;
}.primary {@apply relative overflow-hidden border border-primary bg-primary text-white;span,svg {@apply relative z-[2];}&::after {content: '';@apply absolute top-0 left-0 block h-full w-0 bg-white transition-[width] duration-300 ease-linear;}&:hover {@apply text-primary;}&:hover::after {@apply w-full;}
}.naked {@apply bg-transparent;
}.black {@apply relative border border-black bg-black text-white;&::after {content: '';@apply absolute top-0 left-0 block h-full w-0 bg-white mix-blend-difference transition-[width] duration-300 ease-linear;}&:hover::after {@apply w-full;}
}.white {@apply border border-white bg-white text-primary;
}.secondary {@apply border border-secondary bg-secondary text-white;
}.outlineBlack {@apply relative border border-black;&::after {content: '';@apply absolute top-0 left-0 block h-full w-0 bg-white mix-blend-difference transition-[width] duration-300 ease-linear;}&:hover::after {@apply w-full;}
}.square {@apply relative flex h-12 w-12 items-center justify-center rounded-full border border-black p-0 hover:scale-110 3xl:h-20 3xl:w-20 3xl:border-2 #{!important};
}.outlineWhite {@apply relative border border-white text-white;&::before {content: '';@apply absolute left-[20%] -bottom-[1px] h-[1px] w-7 bg-black transition-[left];}&::after {content: '';@apply absolute right-[20%] -top-[1px] h-[1px] w-7 bg-black transition-[right];}&:hover::before {@apply left-[30%];}&:hover::after {@apply right-[30%];}&:hover {@apply opacity-100;}
}.sm {@apply px-4 py-2;
}.md {@apply px-4 py-[10px] xl:px-6;
}.lg {@apply px-5 py-4 text-sm font-medium xl:py-[1.1rem] xl:px-8 xl:text-base 3xl:px-16 3xl:py-6 3xl:text-lg;
}

　　组件是使用 TypeScript 的代码以确保类型安全。TypeScript 还有助于编写自我记录的代码。对于样式，我们使用了，tailwindcss但请注意，我们的反应组件中的类是干净的，因为 tailwind 实用程序类位于一个单独的 css 文件中，该文件是CSS module. CSS 模块有助于避免 CSS 类的命名空间冲突。下面将介绍如何Button使用。

<Buttonvariant='black'size='lg'href='/contact'className='relative ml-2'rightIcon={<Line />}
>Get in touch
</Button>

　　我们所有的可重用组件都是这样编码的。
　　
　　这些小组件（如Button、和）位于文件夹中Text，并使用单个文件导出，以便可以像这样导入LinkBoxcomponents/ui/index.ts
　　
　　import { Text, Box, Container, Link, Button } from '@components/ui';
　　
　　Navigation和等常见元素Footer位于components/shared/文件夹中，特定于页面的元素位于components/pages/[page-name]文件夹中。
　　
　　搜索引擎优化
　　
　　我们必须确保我们的网站对搜索引擎友好，因此我们创建了一个Page组件，该组件将一些 SEO 数据作为道具，并且网站上的每个页面都将其用作父级。
　　
　　html.tsx

import type { NextPage } from 'next';
import { Page, HowMuch } from '@components/shared';
import { Hero, Intro, Team } from '@components/pages/about';const Home: NextPage = () => {return (<Pagetitle='About | Complexus Technologies'description='Complexus helps you achieve your business goals through effective planning, design, and development.'image='https://complexus.tech/images/banner.jpg'url='https://complexus.tech/about/'canonicalURL='https://complexus.tech/about/'keywords='complexus, complexus technologies, complex, zimbabwe sofware company, mobile development, it consultancy'><Hero /><Intro /><Team /><HowMuch /></Page>);
};export default Home;

　　示例页面使用

import { FC } from 'react';
import Head from 'next/head';interface Props {title: string;description: string;image: string;canonicalURL?: string;
}export const Page: FC<Props> = ({children,title,description,image,canonicalURL,
}) => {return (<><Head><title>{title}</title><meta name='description' content={description} /><meta name='author' content='Complexus Technologies' /><meta name='image' content={image} /><meta name='og:title' content={title} /><meta name='og:description' content={description} /><meta name='og:image' content={image} /><meta name='og:url' content='https://complexus.tech' /><meta name='og:site_name' content='Complexus Technologies' /><meta name='og:type' content='website' /><meta name='twitter:card' content='summary_large_image' /><meta name='twitter:title' content={title} /><meta name='twitter:alt' content={title} /><meta name='twitter:description' content={description} /><meta name='twitter:image' content={image} /><meta name='theme-color' content='#f43f5e' /><meta name='twitter:site' content='@complexus_tech' /><meta name='twitter:creator' content='@complexus_tech' />{canonicalURL && <link rel='canonical' href={canonicalURL} />}</Head><main>{children}</main></>);
};

　　网站开发公司由不同的专业人士组成，如网站设计师、平面设计师、编码员、IT 专业人士、创意负责人等，他们根据帮助客户创建应用程序或网站满足他们的需求、需求和利基市场。
　　
　　这些公司为其客户创建的网站类型通常基于以下因素：
　　
　　1.客户的预算
　　
　　2.他们的利基
　　
　　3.他们的品味或营销理念
　　
　　4.他们想要合并的一些特定功能
　　
　　5.类型
　　
　　6.目标和所需的行动号召类型
　　
　　该过程首先与客户讨论需求，讨论预算，然后合并计划。然后创建它，如果需要，经过几次修改和更改后，最终产品就准备好了。然后对客户进行某种培训，以有效地使用他们新创建的网站，然后该过程结束。这些公司的一个好处是他们也提供维护服务，因此他们的客户支持不仅仅是创建网站。
　　
　　确保我们在使用网站开发公司的人才的过程中得到最充分的、清晰的沟通和接触是非常关键的。

　　那么，这些公司实际上为他们的客户做了什么？
　　
　　1.构思和执行网站的设计和结构
　　
　　2.使用代码创建网站
　　
　　3.设计和整合各种媒体、插件和必要的功能
　　
　　4.发布和维护网站的内容
　　
　　5.测试用户界面、导航、用户、设备和浏览器的友好性6.测试
　　
　　速度和其他对用户友好的网站至关重要的因素7.Beta
　　
　　测试
　　
　　8.他们有时还会查看搜索引擎优化
　　
　　9.如果需要，修复网站/应用程序中的错误和错误
　　
　　10.以及其他功能范围
　　
　　虽然有些人可能会争辩说，WordPress 和 Squarespace 等免费平台的兴起使任何人都可以为他们创建网站，但只有当你有足够的时间和设计诀窍时，这些平台才会有效。此外，即使在创建网站之后付出了很多努力，如果使用这些应用程序，结果可能不会像预期的那样出现。网络开发公司是专业的，并确保创建的网站是用户友好的，并符合人群和客户的期望。

公司网站源码|公司小程序源码带手机版相关推荐

教育培训学校源码微信小程序源码下载，带课件/习题/活动插件，支持小程序与公众号双版本
这是一款超强大教育培训学校源码内含超强大超多的功能大家看文章末的后台管理就能知道到底有多强大了比如功能有以下等等功能课程功能,商城管理,多人团购,限时抢购,接龙团,砍价功能,课程团购,课程包 ...
云开发祖传七星彩等梦码微信小程序源码
简介: 祖传七星彩等梦码微信小程序源码,安装搭建简单,云开发无后台这个小程序的内容对于一般的小伙伴来说可能是一脸懵逼但是对于海南和广东地区的小伙伴来说应该是不陌生因为这两个地区的人可能都打七星彩 ...
最新祖传七星彩等梦码微信小程序源码+云开发
正文: 祖传七星彩等梦码微信小程序源码,安装搭建简单,云开发无后台,这个小程序的内容对于一般的小伙伴来说可能是一脸懵逼. 但是对于海南和广东地区的小伙伴来说应该是不陌生,因为这两个地区的人可能都打七星 ...
转码机器人（微信转码，小程序转码）
转码机器人(微信转码,小程序转码) 小程序不能生成二维码,就无法将小程序分享到更多的地方,只能分享给微信好友,不能转发到朋友圈.不能转发到其它平台,现在只需要将小程序分享给机器人,即可自动转码!这样你 ...
微信小程序客服系统手机版五大功能介绍
很多朋友小程序上线后,客服消息这块一直没得到解决.小程序客服消息只能在PC端回复,是让众多小程序运营商及商家头疼的问题,因为一个再牛逼的客服,也不可能随时随地都抱着电脑,这就导致很多用户的留言不能及时 ...
一套Java 小区物业管理系统源码物业管理小程序源码+安装视频+文档
Java物业管理小程序源码物业管理系统源码+安装视频+文档语言:Java 页面:HTML 项目构建:maven 前端技术:layui 后端:springboot+ssm+shiro+layu ...
600多个微信小程序源码_C2CQQ小程序源码
C2CQQ小程序源码 rtgds5f C2CQQ小程序源码的人都知道,建设需要有域名..源码,站建设成功,所以,,站时,有的自己会备有域名和,来购买,这两者都可以的,看自己的选择,当然,站选择一个好 ...
织梦模板php代码诸城房,Thinkphp开源房产程序源码（多城市版房产系统+带手机版模板）...
源码介绍请注意:该源码来源网友分享,素材虎不提供技术支持,没有技术能力的小白勿拍.(如需安装服务费用另算) 这套TPfang房产今天看到了就拿出来测试无奈里面没教程只能自己摸索,搞来搞去吧页面显示出 ...
知识付费源码|知识付费网站搭建|知识付费小程序源码
设计一个在线教育知识付费源码系统(面向对象设计). 解决方案:假设我们想要设计一个基本的内容付费阅读系统并带小程序,提供以下功能: •查找知识数据库并阅读付费内容: •用户成员的创建和扩展: •基于用 ...
PHP仓库进销存ERP管理系统源码 Uniapp小程序源码
一套PHP带小程序端的进销存系统源码商品管理销售管理库存管理采购打印带手机小程序版源码私信了解更多! 功能特点: 1.支持采购单录入.审核.入库.退货等采购过程中的记录追踪 2.支持销售 ...

公司网站源码|公司小程序源码带手机版

公司网站源码|公司小程序源码带手机版相关推荐

最新文章

热门文章