MHQQysh.github.io/computerproject3.html at master · MHQQysh/MHQQysh.github.io · GitHub

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客项目：Hugo PaperMod 课程笔记站 | 袁诗鸿</title>
  <meta name="description" content="袁诗鸿的 Hugo PaperMod 博客基础设施项目记录。">
  <link rel="icon" href="static/picture/avator.jpg">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;600;700&family=Playfair+Display:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body
  data-page="projects"
  data-title-zh="博客项目：Hugo PaperMod 课程笔记站 | 袁诗鸿"
  data-title-en="Hugo PaperMod Course Notes Site | Shihong Yuan"
  data-description-zh="袁诗鸿的 Hugo PaperMod 博客基础设施项目记录。"
  data-description-en="Blog infrastructure case study for a Hugo PaperMod notes site by Shihong Yuan."
>
  <header class="site-header">
    <nav class="nav-shell container">
      <a class="brand" href="index.html" aria-label="Shihong Yuan home">
        <span class="brand-mark"><img src="static/picture/avator.jpg" alt="Shihong Yuan avatar"></span>
        <span class="brand-copy">
          <span class="brand-title" data-i18n-en="Shihong Yuan">袁诗鸿</span>
          <span class="brand-subtitle" data-i18n-en="Portfolio archive">作品集档案</span>
        </span>
      </a>
      <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="nav-menu" data-nav-toggle>
        <span></span><span></span><span></span>
      </button>
      <div class="nav-menu" id="nav-menu" data-nav-menu>
        <div class="nav-links">
          <a class="nav-link" href="index.html" data-page-link="home" data-i18n-en="Home">首页</a>
          <a class="nav-link" href="index.html#testi" data-i18n-en="Research">科研</a>
          <a class="nav-link" href="index.html#serv" data-page-link="projects" data-i18n-en="Projects">项目</a>
          <a class="nav-link" href="index.html#blogs" data-i18n-en="Life">生活</a>
          <a class="nav-link" href="index.html#education" data-i18n-en="Education">教育经历</a>

        </div>
        <div class="lang-toggle" aria-label="Language switcher">
          <button class="lang-toggle-btn" type="button" data-lang-option="zh">中文</button>
          <span>/</span>
          <button class="lang-toggle-btn" type="button" data-lang-option="en">EN</button>
        </div>
      </div>
    </nav>
  </header>

  <main>
    <section class="page-hero">
      <div class="project-dense-container page-heading">
        <p class="eyebrow" data-i18n-en="Computer Project / Blog Infrastructure">计算机项目 / 博客基础设施</p>
        <h1 class="page-title" data-i18n-en="Hugo PaperMod Course Notes Site">博客项目：Hugo PaperMod 课程笔记站</h1>
        <p class="page-summary" data-i18n-en="A lightweight note and blog system where the real goal was not technical complexity, but making publishing easy enough to sustain.">
          一个轻量的博客与课程笔记系统，重点不在于技术复杂度，而在于让发布和更新足够顺手、足够可持续。
        </p>
      </div>
    </section>

    <section class="page-shell">
      <div class="project-dense-container story-layout">
        <div class="story-text-column">
          <article class="story-card">
            <p class="mini-label" data-i18n-en="Overview">概述</p>
            <h2 data-i18n-en="Publishing as infrastructure">把发布这件事当作基础设施</h2>
            <p data-i18n-en="This project mattered less because of technical novelty and more because it reduced the friction of writing. The key idea was simple: if updating remains cumbersome, a notes site dies quickly; if the workflow becomes light enough, writing can continue.">
              这个项目的重要性不在于技术有多新，而在于它尽可能降低了写作和发布的阻力。逻辑其实很简单：如果更新过程太麻烦，笔记站很快就会失去生命力；如果流程足够轻，写作才能真正持续下去。
            </p>
            <p data-i18n-en="That is why the original note for this page was so concise: the meaning of a blog lies in updating it regularly, and the first step is making that habit easy.">
              这也正是为什么原始页面的总结非常短，却非常准：博客的意义在于持续更新，而第一步就是让更新成为一件简单的习惯。
            </p>
          </article>

          <article class="story-card">
            <p class="mini-label" data-i18n-en="What I learned">我学到了什么</p>
            <h2 data-i18n-en="Lightweight systems often last longer">轻量系统更容易真正被长期使用</h2>
            <p data-i18n-en="The project pushed me to care about domain setup, deployment workflow, and the practical path from local notes to public pages. In that sense, it sits between engineering and habit design.">
              这个项目让我开始真正关心域名配置、自动发布流程，以及从本地笔记到公开页面之间最实际的路径。从这个意义上说，它既是工程问题，也是习惯设计问题。
            </p>
            <div class="meta-links">
              <a class="text-link" href="https://mhqqysh.cn" target="_blank" rel="noreferrer" data-i18n-en="Open blog">打开博客</a>
            </div>
          </article>
        </div>

        <div class="story-media-column">
          <div class="story-media-card">
            <p class="story-media-title" data-i18n-en="Blog Home">首页截图</p>
            <img src="static/picture/boke1.png" alt="Blog project screenshot 1">
            <p class="story-media-caption" data-i18n-en="The public-facing homepage of the notes and blog system.">课程笔记与博客系统对外呈现的主页面。</p>
          </div>
          <div class="story-media-card">
            <p class="story-media-title" data-i18n-en="More Views">更多页面</p>
            <img src="static/picture/boke3.png" alt="Blog project screenshot 2">
            <img src="static/picture/boke4.png" alt="Blog project screenshot 3">
            <img src="static/picture/boke5.png" alt="Blog project screenshot 4">
            <img src="static/picture/boke2.png" alt="Blog project screenshot 5">
            <p class="story-media-caption" data-i18n-en="Additional screens showing how the site handles reading and note organization.">补充展示这个博客系统在阅读体验和内容组织上的状态。</p>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="container footer-grid">
      <div><p class="footer-brand" data-i18n-en="Shihong Yuan">袁诗鸿</p><p class="footer-copy" data-i18n-en="Case-study archive rebuilt from the original portfolio.">从原始作品集重建而来的项目档案页。</p></div>
      <div class="footer-links">
        <a href="index.html" data-i18n-en="Home">首页</a>
        <a href="index.html#testi" data-i18n-en="Research">科研</a>
        <a href="index.html#serv" data-i18n-en="Computer Projects">计算机项目</a>
        <a href="index.html#ports" data-i18n-en="Mechanical Projects">机械项目</a>
        <a href="index.html#blogs" data-i18n-en="Life">生活</a>
      </div>
      <div class="footer-meta"><span>Contact: shihong.23@intl.zju.edu.cn</span><span><span data-i18n-en="Year">年份</span>: <span data-year></span></span></div>
    </div>
  </footer>
  <script src="script.js"></script>
</body>
</html>