image.png
AI Code 時代早已開啟，自己才行動。上手一試，讓人驚嘆。借助這感嘆的情緒，把今天操作Cursor的步驟記錄下來，也分享給大家。
推薦大家上手一試，讓你改變！
準備階段
- 下載 Cursor(https://www.cursor.com/)，點擊右上角“Download”下載exe安裝文件。
-
安裝后，桌面會有一個Cursor圖表。雙擊啟動！
image.png
登錄階段
登錄使用 github 賬號，可以試用兩周，上手試一試，了解AI Code的時間是完全充足的。
image.png
*** 登錄過程不必細說，根據(jù)軟件提示即可！*
開始使用
第一步：確定一個文件夾后，點擊Cursor工作區(qū) (File --> New text File) 創(chuàng)建一個新文件,名稱為 index.html
第二步：直接在index.html的文件內容中，輸入 “開始創(chuàng)建一個模板，主要介紹個人的作品信息，項目案例，聯(lián)系方式，加上一些動態(tài)廣告詞”。 然后回車，頁面中就會出現(xiàn)“ Ctrl + L to chat, Ctrl + K to generate”， 根據(jù)提示，同時案例Ctrl鍵和L鍵，出現(xiàn)有右邊的CHAT窗口。
image.png
第三步：開始輸入自己想要的模板，最開始可以很簡單一句話，然后等待它的生成。在生成的代碼片段中，右邊有“Apply”按鈕，點擊后就可以生成 html 文件內容，
image.png
保存后，雙擊打開文件查看效果。很簡單，太淡，不好。。。
image.png
第四步：層層深入的進行對話，讓Cursor一次有一次的修改。
第二次對話： 布局太簡單，沒有樣式，沒有設計感，需要有現(xiàn)代風格的顏色。并且內容不豐富，需要填充內容
第三次對話： 為了讓手機用戶也能查看頁面，請幫忙做出適應性頁面展示。并且在作品展示上也添加6個示例， 在項目案例上，添加50個案例。
第四次對話： 作品展示減少到9個，然后把聯(lián)系方式放到第二位去。并且在聯(lián)系方式中添加微信二維碼和圖片
第五次對話： 同樣，也是在聯(lián)系方式欄中，增加個人照片，工作地址信息，公眾號的二維碼。外加個人的座右銘。
第六次對話： 請把個人照片部分移動到關于我的部分中，然后個人的座右銘需要單獨一行來表示，并且有引用樣式進行突出顯示。
第七次對話： 關于我的照片，放在右邊去，并且把文字描述加多，使得它占用的高度和照片一樣。
動圖展示：
cursor demo sm.gif
最后，附帶上生成的HTML模板內容，喜歡的朋友們可以直接填充內容并部署到Azure App Service上(PS: VS Code 支持一鍵部署)。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>張三的個人主頁</title>
<style>
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--text-color: #333;
--bg-color: #f4f4f4;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--bg-color);
margin: 0;
padding: 0;
}
header {
background-color: var(--primary-color);
color: white;
text-align: center;
padding: 2rem 0;
}
nav {
background-color: #333;
padding: 1rem;
overflow-x: auto;
}
nav ul {
list-style-type: none;
padding: 0;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 1rem;
white-space: nowrap;
}
nav ul li a {
color: white;
text-decoration: none;
transition: color 0.3s;
}
nav ul li a:hover {
color: var(--secondary-color);
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}
section {
margin-bottom: 3rem;
}
h2 {
color: var(--primary-color);
border-bottom: 2px solid var(--secondary-color);
padding-bottom: 0.5rem;
}
.works-grid, .projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
.work-item, .project-item {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.work-item:hover, .project-item:hover {
transform: translateY(-5px);
}
.work-item img, .project-item img {
width: 100%;
height: 200px;
object-fit: cover;
}
.work-item h3, .project-item h3 {
padding: 1rem;
margin: 0;
font-size: 1rem;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1rem 0;
}
@media (max-width: 768px) {
.works-grid, .projects-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.work-item img, .project-item img {
height: 150px;
}
.work-item h3, .project-item h3 {
font-size: 0.9rem;
}
}
.about-content {
display: flex;
align-items: flex-start;
gap: 2rem;
}
.profile-photo {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
order: 2;
}
.about-text {
flex: 1;
order: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 200px;
}
.contact-info {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.contact-details {
flex: 1;
min-width: 250px;
}
.qr-codes {
display: flex;
justify-content: space-around;
margin-top: 1rem;
}
.qr-code {
width: 120px;
height: 120px;
margin: 0.5rem;
}
.motto {
font-style: italic;
color: var(--primary-color);
text-align: center;
margin: 2rem 0;
padding: 1rem;
border-left: 4px solid var(--secondary-color);
background-color: rgba(46, 204, 113, 0.1);
}
@media (max-width: 768px) {
.about-content {
flex-direction: column-reverse;
align-items: center;
}
.about-text {
height: auto;
}
.profile-photo {
margin-bottom: 1rem;
}
.contact-info {
flex-direction: column;
align-items: center;
}
.contact-details {
text-align: center;
}
}
</style>
</head>
<body>
<header>
<h1>張三的個人主頁</h1>
<p id="dynamic-slogan">創(chuàng)新、專業(yè)、高效</p>
</header>
<nav>
<ul>
<li><a href="#about">關于我</a></li>
<li><a href="#contact">聯(lián)系方式</a></li>
<li><a href="#works">作品展示</a></li>
<li><a href="#projects">項目案例</a></li>
</ul>
</nav>
<main>
<section id="about">
<h2>關于我</h2>
<div class="about-content">
<img src="https://via.placeholder.com/200" alt="個人照片" class="profile-photo">
<div class="about-text">
<p>我是張三,一名充滿激情的全棧開發(fā)者。我擅長前端和后端開發(fā),有5年的工作經驗。我熱愛創(chuàng)新,善于解決復雜問題,并且樂于學習新技術。在工作中,我注重團隊協(xié)作,善于溝通,能夠高效地完成項目。</p>
<p>我畢業(yè)于北京大學計算機科學與技術專業(yè),在校期間就參與了多個開源項目的開發(fā)。畢業(yè)后,我先后在幾家知名互聯(lián)網(wǎng)公司工作,積累了豐富的實戰(zhàn)經驗。</p>
<p>除了編程,我還熱愛閱讀和旅行。我相信這些愛好能夠拓寬我的視野,激發(fā)我的創(chuàng)造力。我的目標是成為一名優(yōu)秀的技術領導者,為推動技術創(chuàng)新貢獻自己的力量。</p>
</div>
</div>
</section>
<blockquote class="motto">"用代碼改變世界,用創(chuàng)新引領未來"</blockquote>
<section id="contact">
<h2>聯(lián)系方式</h2>
<div class="contact-info">
<div class="contact-details">
<p>郵箱: zhangsan@example.com</p>
<p>電話: 123-456-7890</p>
<p>LinkedIn: linkedin.com/in/zhangsan</p>
<p>GitHub: github.com/zhangsan</p>
<p>工作地址: 北京市朝陽區(qū)xxx街道xxx大廈</p>
</div>
<div class="qr-codes">
<img src="https://via.placeholder.com/120" alt="微信二維碼" class="qr-code">
<img src="https://via.placeholder.com/120" alt="公眾號二維碼" class="qr-code">
</div>
</div>
</section>
<section id="works">
<h2>作品展示</h2>
<div class="works-grid">
<div class="work-item">
<img src="https://via.placeholder.com/300x200" alt="作品4">
<h3>數(shù)據(jù)可視化項目</h3>
</div>
<div class="work-item">
<img src="https://via.placeholder.com/300x200" alt="作品5">
<h3>企業(yè)官網(wǎng)重構</h3>
</div>
<div class="work-item">
<img src="https://via.placeholder.com/300x200" alt="作品6">
<h3>AI助手開發(fā)</h3>
</div>
<div class="work-item">
<img src="https://via.placeholder.com/300x200" alt="作品7">
<h3>社交媒體應用</h3>
</div>
</div>
</section>
<section id="projects">
<h2>項目案例</h2>
<div class="projects-grid">
<!-- 這里添加5個項目案例 -->
</div>
</section>
</main>
<footer>
<p>? 2023 張三的個人主頁. 保留所有權利.</p>
</footer>
<script>
const slogans = [
"創(chuàng)新、專業(yè)、高效",
"用心做好每一個項目",
"為客戶創(chuàng)造最大價值",
"技術改變世界",
"追求卓越,永不止步"
];
let currentSlogan = 0;
setInterval(() => {
currentSlogan = (currentSlogan + 1) % slogans.length;
document.getElementById('dynamic-slogan').textContent = slogans[currentSlogan];
}, 3000);
// 生成50個項目案例
const projectsGrid = document.querySelector('.projects-grid');
for (let i = 1; i <= 8; i++) {
const projectItem = document.createElement('div');
projectItem.className = 'project-item';
projectItem.innerHTML = `
<img src="https://via.placeholder.com/300x200" alt="項目${i}">
<h3>項目案例 ${i}</h3>
`;
projectsGrid.appendChild(projectItem);
}
</script>
</body>
</html>
參考資料：
Cursor: https://www.cursor.com/
當在復雜的環(huán)境中面臨問題，格物之道需：濁而靜之徐清，安以動之徐生。 云中，恰是如此!
