在 30 分钟内使用 Svelte 构建一个响应式网站。

在本教程中，我们将使用 svelte 在 30 分钟内构建一个美观的响应式应用。
让我们先来看看我们要构建的设计。

我将页面分为 7 个组件，这 7 个组件是 App 组件的子组件，如下所示。

让我们设置一个名为digital_agency_using_svelte的项目。转到终端，您可以通过运行以下命令立即创建一个新项目。



npx degit sveltejs/template digital_agency_using_svelte
cd digital_agency_using_svelte
npm install

将 Bootstrap 和 fontawesome 添加到项目中

对于此演示，我使用以下 CDN 并将这些文件添加到index.html公共文件夹下可用的文件中。



<!--Bootstrap.css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous">

<!--fontawesome.js-->
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<!--Slim.js-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>

<!--bootstrap.js-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

向项目添加全局样式。

您可以将以下 css 添加到global.css公共文件夹下可用的。



/**public/global.css**/
:root {
  --gradient: linear-gradient(90deg, #0072ff 0%, #00d4ff 100%);
  --light: #fff;
  --grey: #f8f9fa;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  scroll-behavior: smooth;
}
.main-bgcolor {
  background-image: var(--gradient);
}
.light-color {
  color: var(--light) !important;
}
.grey-bgcolor {
  background: var(--grey);
}
.company_brand {
  font-size: x-large;
  font-family: cursive;
}

.section {
  padding: 50px 0;
}

.section-body {
  padding: 20px 0;
}

向项目添加静态数据。

我已经创建了一个用于项目的静态数据 JSON。在文件夹Data内创建一个文件夹src，并在该Data文件夹下创建一个文件data.js。向其中添加以下静态数据。



/**src/Data/data.js**/
const HEADER = "Nixalar";

const NAVBAR_DATA = [
  { id: 1, url: "/", label: "Home" },
  { id: 2, url: "#services", label: "Services" },
  { id: 3, url: "#about-us", label: "About us" },
  { id: 4, url: "#testimonials", label: "Testimonials" },
  { id: 5, url: "#footer", label: "Contacts" }
];
const BANNER_DATA = {
  HEADING: "Go digital with nixalar",
  DECRIPTION:
    "Nixalar can help you skyrocket the ROI of your marketing campaign without having to spend tons of money or time to assemble an in-house team.",
  TUTORIAL_URL:
    "https://www.thinkwithgoogle.com/intl/en-gb/marketing-resources/programmatic/google-digital-academy/",
  WATCH_TUTORIAL: "Watch Tutorials"
};
const SERVICE_DATA = {
  HEADING: "Our Services",
  ALL_SERVICES: "All Services",
  SERVICE_LIST: [
    {
      LABEL: "Search Engine Optimisation",
      DESCRIPTION:
        "To customise the content, technical functionality and scope of your website so that your pages show for a specific set of keyword at the top of a search engine list. In the end, the goal is to attract traffic to your website when they are searching for goods, services or business-related information.",
      URL: "images/service1.png"
    },
    {
      LABEL: "Content Marketing Strategy",
      DESCRIPTION:
        "It is tough but well worth the effort to create clever material that is not promotional in nature, but rather educates and inspires. It lets them see you as a reliable source of information by delivering content that is meaningful to your audience.",
      URL: "images/service2.png"
    },
    {
      LABEL: "Develop Social Media Strategy",
      DESCRIPTION:
        "Many People rely on social networks to discover, research, and educate themselves about a brand before engaging with that organization. The more your audience wants to engage with your content, the more likely it is that they will want to share it.",
      URL: "images/service3.png"
    }
  ]
};

const ABOUT_DATA = {
  HEADING: "Why choose us?",
  TITLE: "Why we're different",
  IMAGE_URL: "images/network.png",
  WHY_CHOOSE_US_LIST: [
    "We provides Cost-Effective Digital Marketing than Others.",
    "High customer statisfaction and experience.",
    "Marketing efficiency and quick time to value.",
    "Clear & transparent fee structure.",
    "We provides Marketing automation which is an integral platform that ties all of your digital marketing together.",
    "A strong desire to establish long lasting business partnerships.",
    "Provide digital marketing to mobile consumer.",
    "We provides wide range to services in reasonable prices"
  ]
};
const TESTIMONIAL_DATA = {
  HEADING: "What clients say?",
  TESTIMONIAL_LIST: [
    {
      DESCRIPTION:
        "Nixalar has made a huge difference to our business with his good work and knowledge of SEO and business to business marketing techniques. Our search engine rankings are better than ever and we are getting more people contacting us thanks to Jomer’s knowledge and hard work.",
      IMAGE_URL: "images/user1.jpg",
      NAME: "Julia hawkins",
      DESIGNATION: "Co-founder at ABC"
    },
    {
      DESCRIPTION:
        "Nixalar and his team have provided us with a comprehensive, fast and well planned digital marketing strategy that has yielded great results in terms of content, SEO, Social Media. His team are a pleasure to work with, as well as being fast to respond and adapt to the needs of your brand.",
      IMAGE_URL: "images/user2.jpg",
      NAME: "John Smith",
      DESIGNATION: "Co-founder at xyz"
    }
  ]
};

const SOCIAL_DATA = {
  HEADING: "Find us on social media",
  IMAGES_LIST: [
    "images/facebook-icon.png",
    "images/instagram-icon.png",
    "images/whatsapp-icon.png",
    "images/twitter-icon.png",
    "images/linkedin-icon.png",
    "images/snapchat-icon.png"
  ]
};

const FOOTER_DATA = {
  DESCRIPTION:
    "We are typically focused on result-based maketing in the digital world. Also, we evaluate your brand’s needs and develop a powerful strategy that maximizes profits.",
  CONTACT_DETAILS: {
    HEADING: "Contact us",
    ADDRESS: "La trobe street docklands, Melbourne",
    MOBILE: "+1 61234567890",
    EMAIL: "nixalar@gmail.com"
  },
  SUBSCRIBE_NEWSLETTER: "Subscribe newsletter",
  SUBSCRIBE: "Subscribe"
};

const MOCK_DATA = {
  HEADER,
  NAVBAR_DATA,
  BANNER_DATA,
  SERVICE_DATA,
  ABOUT_DATA,
  TESTIMONIAL_DATA,
  SOCIAL_DATA,
  FOOTER_DATA
};
export default MOCK_DATA;

将图像添加到项目。

在这个项目中，我们使用了许多图像。因此，首先在文件夹images下创建一个文件夹public，然后从以下链接下载图像，并将图像添加到images文件夹图像链接中

*在创建组件之前，请在文件夹Components内创建一个文件夹src。*

导航栏组件

Navbar在 components 文件夹内创建一个文件夹，并在其中创建一个文件Navbar.svelte。向其中添加以下代码。



<!--src/Components/Navbar/Navbar.svelte-->

<script>
  export let navlists = [];
  export let header;
</script>
<!------------------------------------------->
<!----------------MARKUP----------------------->
<!------------------------------------------->
<section id="nav-bar">
  <nav class="navbar main-bgcolor navbar-expand-md navbar-dark">
    <a class="navbar-brand company_brand" href="/">
      {header}
    </a>
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarNav"
      aria-controls="navbarNav"
      aria-expanded="false"
      aria-label="Toggle navigation">
      <span class="navbar-toggler-icon" />
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        {#each navlists as list}
          <li class="nav-item">
            <a class="nav-link light-color" href={list.url}>{list.label}</a>
          </li>
        {/each}
      </ul>
    </div>
  </nav>
</section>
<!------------------------------------------->
<!----------------STYLE----------------------->
<!------------------------------------------->
<style>
  #nav-bar {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .navbar {
    padding: 0 20px !important;
  }

  .navbar-nav li {
    padding: 0 0 0 20px;
  }

  .navbar-nav li a {
    font-weight: 600;
    text-transform: uppercase;
    float: right;
    text-align: left;
  }
</style>

在Navbar组件中，我们使用navlists并将header传递到父组件（App.svelte）。

横幅组件

Banner在 components 文件夹内创建一个文件夹，并在其中创建一个文件Banner.svelte。向其中添加以下代码。



<!--src/Components/Banner/Banner.svelte-->

<script>
  export let bannerData = {};
  const { HEADING, DECRIPTION, TUTORIAL_URL, WATCH_TUTORIAL } = bannerData;
</script>
<!------------------------------------------->
<!----------------MARKUP----------------------->
<!------------------------------------------->
<section class="main-bgcolor light-color" id="banner">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1>{HEADING}</h1>
        <p>{DECRIPTION}</p>
        <a href={TUTORIAL_URL} target="_blank" class="light-color">
          <i class="far fa-play-circle fa-2x watch-btn" />
          {WATCH_TUTORIAL}
        </a>
      </div>
      <div class="col-md-6">
        <img src="images/home.png" alt="" class="img-fluid" />
      </div>
    </div>
  </div>
  <img src="images/wave1.png" alt="" class="wave-img" />
</section>
<!------------------------------------------->
<!----------------STYLE----------------------->
<!------------------------------------------->
<style>
  section {
    padding-top: 5%;
  }

  h1 {
    font-size: 40px;
    font-weight: 600;
    margin-top: 100px;
    text-transform: uppercase;
  }

  .watch-btn {
    margin: auto 20px;
    position: relative;
    top: 8px;
  }

  section a {
    text-decoration: none;
  }

  .wave-img {
    width: 100%;
    height: auto;
  }
</style>

在Banner组件中，我们使用bannerData将通过父组件（App.svelte）传递的内容。

服务组件

Services在 components 文件夹内创建一个文件夹，并在其中创建一个文件Services.svelte。向其中添加以下代码。



<!--src/Components/Services/Services.svelte-->

<script>
  export let serviceData = {};
  const { HEADING, ALL_SERVICES, SERVICE_LIST } = serviceData;
</script>

<!------------------------------------------->
<!----------------MARKUP----------------------->
<!------------------------------------------->
<section id="services" class="section">
  <div class="container text-center">
    <h2 class="title">{HEADING}</h2>
    <div class="row section-body">
      {#each SERVICE_LIST as list}
        <div class="col-md-4 service">
          <img src={list.URL} alt={list.LABEL} class="service-img" />
          <h4>{list.LABEL}</h4>
          <p>{list.DESCRIPTION}</p>
        </div>
      {/each}
    </div>
    <buttom class="btn btn-primary round-border main-bgcolor">
      {ALL_SERVICES}
    </buttom>
  </div>
</section>
<!------------------------------------------->
<!----------------STYLE----------------------->
<!------------------------------------------->
<style>
  .service-img {
    width: 200px;
    height: 200px;
    margin-top: 20px;
  }

  .service h4 {
    padding: 5px;
    margin-top: 25px;
    text-transform: uppercase;
  }

  .title {
    text-transform: uppercase;
  }

  .title::before {
    content: "";
    background: linear-gradient(90deg, #0072ff 0%, #00d4ff 100%);
    height: 5px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    transform: translateY(60px);
  }

  .title::after {
    content: "";
    background: linear-gradient(90deg, #0072ff 0%, #00d4ff 100%);
    height: 10px;
    width: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    display: block;
    transform: translateY(14px);
  }

  section .btn-primary {
    box-shadow: none;
    padding: 8px 25px;
    border: none;
  }
</style>

在Services组件中，我们使用serviceData将通过父组件（App.svelte）传递的内容。

关于组件

About在 components 文件夹内创建一个文件夹，并在其中创建一个文件About.svelte。向其中添加以下代码。



<!--src/Components/About/About.svelte-->

<script>
  export let aboutData = {};
  const { HEADING, TITLE, IMAGE_URL, WHY_CHOOSE_US_LIST } = aboutData;
</script>
<!------------------------------------------->
<!----------------MARKUP----------------------->
<!------------------------------------------->
<section id="about-us" class="section grey-bgcolor">
  <div class="container">
    <h2 class="title text-center">{HEADING}</h2>
    <div class="row section-body">
      <div class="col-md-6">
        <h3 class="about-title">{TITLE}</h3>
        <ul>
          {#each WHY_CHOOSE_US_LIST as list}
            <li>{list}</li>
          {/each}
        </ul>
      </div>
      <div class="col-md-6">
        <img src={IMAGE_URL} alt="" class="img-fluid" />
      </div>
    </div>
  </div>
</section>

<!------------------------------------------->
<!----------------STYLE----------------------->
<!------------------------------------------->
<style>
  .about-title {
    margin-top: 8%;
    margin-bottom: 20px;
  }

  section ul li {
    margin: 10px 0;
  }

  section ul {
    padding-left: 23px;
  }
</style>

在About组件中，我们使用aboutData将通过父组件（App.svelte）传递的内容。

社交组件

Social在 components 文件夹内创建一个文件夹，并在其中创建一个文件Social.svelte。向其中添加以下代码。



<!--src/Components/Social/Social.svelte-->

<script>
  export let socialData = {};
  const { IMAGES_LIST, HEADING } = socialData;
</script>
<!------------------------------------------->
<!----------------MARKUP----------------------->
<!------------------------------------------->
<section id="social-media" class="section grey-bgcolor">
  <div class="container text-center">
    <h2 class="title text-center">{HEADING}</h2>
    <div class="social-icons section-body">
      {#each IMAGES_LIST as list}
        <a
          href="https://www.linkedin.com/in/nikhil-karkra-73a15319/"
          target="_blank">
          <img src={list} alt="Social media {list}" />
        </a>
      {/each}
    </div>
  </div>
</section>
<!------------------------------------------->
<!----------------STYLE----------------------->
<!------------------------------------------->
<style>
  .social-icons img {
    width: 75px;
    transition: 0.5s;
  }
  .social-icons a:hover img {
    transform: translateY(-10px);
  }
  a:hover {
    text-decoration: none;
  }
</style>

在Social组件中，我们使用socialData将通过父组件（App.svelte）传递的内容。

页脚组件

Footer在 components 文件夹内创建一个文件夹，并在其中创建一个文件Footer.svelte。向其中添加以下代码。



<!--src/Components/Footer/Footer.svelte-->

<script>
  export let footerData = {};
  export let header = "";
  const {
    DESCRIPTION,
    CONTACT_DETAILS,
    SUBSCRIBE_NEWSLETTER,
    SUBSCRIBE
  } = footerData;
  const { HEADING, ADDRESS, MOBILE, EMAIL } = CONTACT_DETAILS;
</script>

<!------------------------------------------->
<!----------------MARKUP----------------------->
<!------------------------------------------->
<section class="main-bgcolor light-color" id="footer">
  <img src="images/wave2.png" alt="" class="wave-img" />
  <div class="container">
    <div class="row section-body">
      <div class="col-md-4 footer-box">
        <div class="company_brand">{header}</div>
        <p>{DESCRIPTION}</p>
      </div>
      <div class="col-md-4 footer-box">
        <p class="footer-title">{HEADING}</p>
        <p>
          <i class="fas fa-map-marker-alt" />
          {ADDRESS}
        </p>
        <p>
          <i class="fas fa-phone" />
          {MOBILE}
        </p>
        <p>
          <i class="fas fa-envelope" />
          {EMAIL}
        </p>
      </div>
      <div class="col-md-4 footer-box">
        <p class="footer-title">{SUBSCRIBE_NEWSLETTER}</p>
        <input
          type="email"
          class="form-control round-border"
          placeholder="Your Email" />
        <button type="button" class="btn btn-outline-light round-border">
          {SUBSCRIBE}
        </button>
      </div>
    </div>
  </div>
</section>
<!------------------------------------------->
<!----------------Style----------------------->
<!------------------------------------------->
<style>
  .footer-title {
    font-weight: bold;
    text-transform: uppercase;
  }

  .footer-box button {
    margin-top: 30px;
  }

  .round-border {
    border-radius: 20px !important;
  }
  .wave-img {
    width: 100%;
    height: auto;
  }
</style>

在Footer组件中，我们使用将通过父组件（App.svelte）传递的内容footerData。header

将子组件添加到父组件（App.svelte）

到目前为止，我们已经准备好了子组件。让我们将它们添加到App.Svelte。用下面的代码替换现有代码
。App.Svelte



<!--src/App.svelte-->
<script>
  import Navbar from "./Components/Navbar/Navbar.svelte";
  import Banner from "./Components/Banner/Banner.svelte";
  import Services from "./Components/Services/Services.svelte";
  import About from "./Components/About/About.svelte";
  import Testimonials from "./Components/Testimonials/Testimonials.svelte";
  import Social from "./Components/Social/Social.svelte";
  import Footer from "./Components/Footer/Footer.svelte";
  import DATA from "./Data/data";
</script>

<!-- Navbar -->
<Navbar navlists={DATA.NAVBAR_DATA} header={DATA.HEADER} />
<!-- Banner -->
<Banner bannerData={DATA.BANNER_DATA} } />
<!-- Services -->
<Services serviceData={DATA.SERVICE_DATA} />
<!-- About -->
<About aboutData={DATA.ABOUT_DATA} />
<!-- Testimonials -->
<Testimonials testimonialData={DATA.TESTIMONIAL_DATA} />
<!-- Social Media -->
<Social socialData={DATA.SOCIAL_DATA} />
<!-- Footer -->
<Footer footerData={DATA.FOOTER_DATA} header={DATA.HEADER} />

如果你看一下上面的代码。我们将 props 传递给每个需要的组件。理想情况下，我们传递的是我们在中创建的静态数据Data/data.js。

运行项目

现在我们的项目已经准备好了。让我们使用以下命令运行该项目。


 run dev

前往 http://localhost:5000/。您将看到以下输出

代码和参考

我已经将其部署到now https://nixalar-digital-agency.now.sh/

Github https://github.com/karkranikhil/Digital-Agency-using-svelte

文章来源：https://dev.to/karkranikhil/build-responsive-website-using-svelte-in-30-minutes-l9

在 30 分钟内使用 Svelte 构建一个响应式网站。

在 30 分钟内使用 Svelte 构建一个响应式网站。

将 Bootstrap 和 fontawesome 添加到项目中

向项目添加全局样式。

向项目添加静态数据。

将图像添加到项目。

导航栏组件

横幅组件

服务组件

关于组件

推荐组件

社交组件

页脚组件

将子组件添加到父组件（App.svelte）

运行项目

代码和参考