Markdown 代码技术博客

应用场景

本代码用于构建一个社交媒体平台上的个人资料页面，展示用户的个人信息、关注者和被关注者数量，以及最近的帖子。

基本功能

• 显示用户的个人信息，包括姓名、简介和个人资料图片。
• 显示用户的关注者和被关注者数量。
• 列出用户最近发布的帖子，包括标题、内容和发布时间。

功能实现步骤及关键代码分析

1. 构建个人信息部分

<div class="bg-white shadow overflow-hidden sm:rounded-lg">
  <div class="px-4 py-5 sm:px-6">
    <h3 class="text-lg leading-6 font-medium text-gray-900">Your Profile</h3>
    <p class="mt-1 max-w-2xl text-sm text-gray-500">A happy living in NYC. Writing about healthy lifestyle, self-improvement and personal growth.</p>
  </div>
  <div class="border-t border-gray-200">
    <dl>
      <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
        <dt class="text-sm font-medium text-gray-500">Following</dt>
        <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">18</dd>
      </div>
      <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
        <dt class="text-sm font-medium text-gray-500">Followers</dt>
        <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">3,444</dd>
      </div>
      <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
        <dt class="text-sm font-medium text-gray-500">Likes</dt>
        <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">793</dd>
      </div>
    </dl>
  </div>
</div>

• 使用 HTML div 和 dl 元素构建布局。
• 使用 CSS 类定义样式，如 bg-white、shadow 和 overflow-hidden。
• 使用 h3、p 和 dt、dd 元素显示文本内容。

2. 构建最近帖子部分

<div class="bg-white shadow overflow-hidden sm:rounded-lg">
  <div class="px-4 py-5 sm:px-6">
    <h3 class="text-lg leading-6 font-medium text-gray-900">Recent Posts</h3>
    <p class="mt-1 max-w-2xl text-sm text-gray-500">A sample post about healthy lifestyle.</p>
  </div>
  <div class="border-t border-gray-200">
    <ul role="list" class="divide-y divide-gray-200">
      <li class="py-4 sm:py-5">
        <div class="flex items-center space-x-4">
          <div class="flex-shrink-0">
            <img
              class="h-10 w-10 rounded-full"
              src="https://source.unsplash.com/random/100x100"
              alt=""
            />
          </div>
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium text-gray-900 truncate">The Purpose of Your Life is to Choose a Lifestyle</p>
            <p class="text-sm text-gray-500 truncate">A sample post about healthy lifestyle.</p>
          </div>
          <div class="flex-shrink-0">
            <svg
              class="h-5 w-5 text-gray-400"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              aria-hidden="true"
            >
              <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
              <path
                fill-rule="evenodd"
                d="M.458 10C1.183 6.596 3.545 4 6.785 4h6.43a2.291 2.291 0 011.831 1.213l3.724 3.723A1 1 0 0117.563 10H10a2.291 2.291 0 01-1.831-1.213l-3.724-3.723A1 1 0 01.458 10zM15.458 10a1 1 0 100-2 1 1 0 000 2z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
        </div>
      </li>
      <!-- ... (other posts) -->
    </ul>
  </div>
</div>

• 使用 Vue.js 循环渲染帖子数据。
• 使用 flex 和 space-x-4 类定义帖子布局。
• 使用 truncate 类截断帖子标题和内容。

3. 设置动态数据

<script lang="tsx" setup>
import { ref } from 'vue'

const posts = ref([
  {
    title: 'The Purpose of Your Life is to Choose a Lifestyle',
    content: 'A sample post about healthy lifestyle.',
  },
  // ... (other posts)
])
</script>

• 使用 Vue.js ref 响应式变量来存储帖子数据。
• 在模板中使用 v-for 指令循环渲染帖子。

总结与展望

开发这段代码让我深入了解了 Vue.js 的响应式系统和数据绑定功能。它还让我练习了使用 HTML 和 CSS 构建用户界面。

未来拓展与优化

• 添加用户头像上传功能。
• 实现帖子点赞和评论功能。
• 优化帖子列表的加载性能。