世界正在变得非常数字化。其中，网站对任何初创公司、公司、企业或个人的重要性都有其重要性，我们都知道这一点。现在，并不是每个人都知道复杂的代码甚至拖放创作。每个人都没有时间、想要或精力来为自己创建一个网站。这就是网站设计师和网站开发专业人士的用武之地。在本文中，我将主要讨论我们使用的工具以及我们如何使用它们来创建我们的动态网站。这些是我们通常用于客户项目的工具。
演示：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 等免费平台的兴起使任何人都可以为他们创建网站，但只有当你有足够的时间和设计诀窍时，这些平台才会有效。此外，即使在创建网站之后付出了很多努力，如果使用这些应用程序，结果可能不会像预期的那样出现。网络开发公司是专业的，并确保创建的网站是用户友好的，并符合人群和客户的期望。
