想要搭建个人网站？教你使用ChatGPT快速搭建私人网站

想要搭建个人网站？教你使用ChatGPT建站

​ 自从二月份以来，ChatGPT这个话题越来越火爆，与此同时关于ChatGPT在各个领域的应用的文章层出不穷。作为一名编程爱好者，该如何使用ChatGPT建立自己的个人网站呢？本文将以对话形式向各位展示如何快速建站。

​

下面是一个使用 Vue 3 编写的课程导航栏页面的示例代码：

<template>
  <div class="course-navigation">
    <Header /> <!-- Use the Header component -->
    <!-- 内容区域 -->
    <div class="content">
      <!-- 课程分类导航栏 -->
      <LeftSidebar />
      <!-- 轮播图 -->
      <RightSidebar :carouselData="carouselData" />
    </div>
    <div class="background-image">
      <img alt="" style="width: 1600px;height: 250px" :src="img" />
    </div>
    <div style="font-size: 30px; text-align: center; margin-top: 30px;">课程列表</div>
    <!-- 课程详情区域 -->
    <CourseList :courses="courses" />
    <Footer />
  </div>
</template>

<script>
import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import Header from './Header.vue'; // Import the Header component
import Footer from './Footer.vue'; // Import the Footer component
import CourseList from './CourseList.vue'; // Import the CourseList component
import LeftSidebar from './LeftSidebar.vue'; // Import the LeftSidebar component
import RightSidebar from './RightSidebar.vue'; // Import the RightSidebar component


export default {
  name: "CourseNavigation",
  components: {
    Header, // Register the Header component
    Footer, // Register the Footer component
    CourseList, // Register the CourseList component
    LeftSidebar,
    RightSidebar,
    // ... Rest of your components ...
  },
  data() {
    return {
      activeMenu: "home", // 默认选中首页
      courses: [], // 所有课程数据，从后端获取或静态定义
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        loop: true,
        autoplay: {
          delay: 3000,
        },
      },
      carouselData: [
        {
          id: 1,
          image: "https://csdn-blog-picture.oss-cn-guangzhou.aliyuncs.com/img/image-20230709183838817.png",
        },
        {
          id: 2,
          image: "https://via.placeholder.com/800x300?text=Slide%202",
        },
        {
          id: 3,
          image: "https://via.placeholder.com/800x300?text=Slide%203",
        },
        // 更多轮播图数据
      ],
      img: require("@/assets/background.jpg"),
    };
  },
  computed: {
    courseRows() {
      // 将所有课程按每行4个进行分组
      const rows = [];
      for (let i = 0; i < this.courses.length; i += 4) {
        rows.push(this.courses.slice(i, i + 4));
      }
      return rows;
    },
  },
  created() {
    this.getCourses();
    this.getFiveCourse();
  },
  methods: {
    handleMenuSelect(index) {
      this.activeMenu = index; // 更新选中的菜单项
      // 可根据不同的菜单项进行相应的页面跳转或其他操作
    },
    getCourses() {
      this.$axios.get('/sourceCourse/list'
        // ,
        //     {
        //         headers: {
        //             "Authorization": this.$store.getters.getToken
        //         }
        //     }
      ).then(response => {
        const courses = response.data.result;
        console.log(response)
        this.courses = courses;
        // this.$message({
        //     type: 'success',
        //     message: response.data.message
        // });
        console.log(this.courses)
      })
    },
    getFiveCourse() {
      this.$axios.get('/sourceCourse/getFiveCourse'
        // ,
        //     {
        //         headers: {
        //             "Authorization": this.$store.getters.getToken
        //         }
        //     }
      ).then(response => {
        const courses = response.data.result;
        console.log(response)
        this.carouselData = courses;
        // this.$message({
        //     type: 'success',
        //     message: response.data.message
        // });
        console.log(this.courses)
      })
    },
  },
  mounted() {
    // Initialize Swiper
    const swiper = new Swiper('.swiper', {
      modules: [Navigation, Pagination],
      direction: 'horizontal', // Change back to horizontal
      loop: true,
      autoplay: {
        delay: 3000, // Set the delay between slide transitions in milliseconds (3 seconds in this example)
        disableOnInteraction: false, // Allow auto play to continue even when the user interacts with Swiper
      },

      // If we need pagination
      pagination: {
        el: '.swiper-pagination',
        clickable: true, // Allow pagination bullets to be clickable
      },

      // Navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // And if we need scrollbar
      scrollbar: {
        el: '.swiper-scrollbar',
      },

      // Add the loopedSlides option to control how many slides are looped
      loopedSlides: this.carouselData.length, // Set it to the total number of slides

      // Add the slideChange event handler for looping
      on: {
        slideChange: () => {
          if (swiper.realIndex === swiper.slides.length - 1) {
            // If it reaches the last slide, manually go to the first slide
            swiper.slideTo(0, 0, true); // Set the third parameter (boolean) to false for instant transition
          }
        },
      },
    });

    // Now you can use the 'swiper' variable to interact with the Swiper instance if needed
    // swiper.slideNext(); // Example: Go to the next slide programmatically
  },


};
</script>

<style>
.index {
  background-color: #E9EEF3;
}

/* 添加样式 */
.course-navigation {
  max-width: 1600px;
  margin: 0 auto;
}

.menu {
  display: flex;
  justify-content: center;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  display: inline-block;
  padding: 0 20px;
  cursor: pointer;
}

.menu li.active {
  color: #ffd04b;
  border-bottom: 2px solid #ffd04b;
}

.content {
  display: flex;
  flex-wrap: wrap;
  /* Wrap the sidebar and swiper to next row if necessary */
}

.left-sidebar {
  width: 20%;
  padding: 20px;
  background-color: #f0f0f0;
}

.left-sidebar h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.left-sidebar ul {
  list-style: none;
  padding: 0;
}

.left-sidebar li {
  margin-bottom: 10px;
  cursor: pointer;
}

.right-sidebar {
  flex: 1;
  padding: 20px;
  min-width: 300px;
  /* Set a minimum width for the sidebar */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Add the following CSS styles */

.swiper-pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  /* Add some margin between carousel and pagination */
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  margin: 0 5px;
  /* Adjust the space between bullets as needed */
}

.swiper-pagination-bullet-active {
  background-color: #555;
}
  /* 背景图片样式 */
.background-image {
  width: 1600px;
  height: 250px;
  margin-top: 50px;
}


.swiper-container {
  width: 100%;
  height: 300px;
  margin-bottom: 20px;
  position: relative;
  /* 添加以下样式以实现水平排列 */
  display: flex;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
}


</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305

在上述示例代码中，我们创建了一个名为 CourseNavigation 的组件，其中包含了头部菜单栏、左侧课程分类导航栏、右侧轮播图以及课程详情区域。课程详情区域采用每行5个课程框的方式展示，可以根据实际情况调整课程数据和样式。

需要注意的是，该示例代码只是一个简单的示例，实际项目中可能涉及到更复杂的业务逻辑和样式设计。你可以根据项目的需求进一步完善和定制该页面。

下面就是生成的网站效果图啦，欢迎各位欣赏由ChatGPT编写的网站。