X-lab2017/oss101

第四讲课后作业（截至时间4月3日）

TieWay59 opened this issue · 86 comments

TieWay59 commented

作业：部署一个静态网页博客。静态网页博客是一种不需要后端服务器和数据库支持的网站，只需要使用HTML、CSS和JavaScript等前端技术就可以实现。静态网页博客有很多优点，比如速度快、安全稳定、易于维护等。

可能用到的技术以及概念：

  • SSG框架
    • 一种常用的框架是 Jekyll ，它是一个Ruby编写的、快速、简洁且高效的静态网站生成引擎，它使用一个模板目录作为网站布局的基础框架，支持 Markdown、Textile 等标记语言的解析，提供了模板、变量、插件等功能，最终生成一个完整的静态 Web 站点。你可以在 GitHub Pages 上直接使用 Jekyll 来搭建博客，并且选择不同的主题来美化你的博客界面。
    • 另一种常用的框架是 Hexo，它也是一个快速、简洁且高效的静态网站生成引擎，它使用 Node.js 编写，并且提供了丰富的插件和主题来扩展和定制你的博客功能和外观。你可以在本地使用 Hexo 来编写和预览你的博客内容，并且通过简单的命令就能将生成的网页上传到 GitHub Pages 上。
    • 如果你想要更多选择或灵感，你可以参考以下链接中收集或推荐了一些基于 GitHub Pages 的各类开源项目模板 ，比如程序员个性化简历、程序员酷炫博客等等。这些模板都有相应的项目地址和预览地址，你可以根据自己喜欢或需要来选择或修改。Static Site Generators - Top Open Source SSGs | Jamstack
  • Github Actions
    • GitHub Actions 是一种在 GitHub 上自动化、定制和执行软件开发工作流程的功能。它可以帮助你在不同的事件（例如代码提交、拉取请求或标签创建）上触发不同的任务（例如构建、测试或部署）。
    • 在部署静态网页中，GitHub Actions 可以用来构建和发布 Jekyll 站点到 GitHub Pages。Jekyll 是一种简单、博客感知的静态网站生成器，它可以将 Markdown 或 AsciiDoc 等格式的文本转换为 HTML 页面，并提供各种主题和插件。
    • 使用 GitHub Actions 部署 Jekyll 站点有以下优点：
      • 控制 gemset 和 Jekyll 版本 — 你可以使用任何你想要的 Jekyll 版本，而不是受限于 GitHub Pages 默认支持的版本（目前是 3.9.0）。
      • 使用任意插件 — 你可以使用任何 Jekyll 插件，无论它们是否在 GitHub Pages 的白名单中，甚至是直接放在 _plugins 目录下的 *.rb 文件。
      • 自定义工作流管理 — 通过创建一个工作流文件来运行 Actions，你可以指定自定义的构建步骤，使用环境变量等。
  • Git
    • 分布式版本控制系统，用于管理你的代码和文件。你需要使用 Git 将你的静态网页上传到 GitHub 上，同步到 GitHub Pages。
  • Frontmatter
    • Frontmatter 是一种在 Markdown 文件中添加元数据的方法，它由三条虚线包围的有效的 YAML、JSON 或 TOML 格式的内容组成。
    • 在静态博客中，Frontmatter 可以用来指定一些页面的配置选项，例如标题、描述、布局、语言、标签、分类等。这些选项可以影响页面的生成和展示方式，也可以被其他组件或插件访问和使用。
  • Markdown
    • Markdown 语法的官方规范可以在 ruanyf/document-style-guide: 中文技术文档的写作规范 (github.com) 查看，其中包含了基本语法和扩展语法的说明和示例。
    • 检查 Markdown 的源代码是否规范排版正确，有以下几种方法：
      • 使用在线工具，如 Markdownlint，可以直接在网页上输入或粘贴 Markdown 源代码，然后查看是否有错误或警告提示，并按照建议进行修改。
      • 使用 VSCode 插件，如 Markdown All in One和 Markdownlin，可以在 VSCode 编辑器中实时检查和预览 Markdown 源代码，并提供一键修复的功能。

本次作业的具体内容和要求如下：

  • 作业内容：你需要选择一个自己感兴趣或擅长的主题来制作一个静态网页博客，比如个人介绍、爱好分享、技术总结等。你需要设计至少四个页面来展示博客内容，不限于首页、关于我、文章列表、文章详情等。
  • 作业要求：你需要遵循以下规范或标准来完成作业：
    • 代码风格：你需要使用合理的缩进和空格来格式化代码，并且使用有意义的变量名和函数名来提高代码可读性。
    • 注释规范：你需要在代码中添加必要的注释来说明代码逻辑和功能，并且使用统一的注释风格。
    • 文件命名：你需要使用有意义且符合规范的文件名来组织代码文件，并且使用小写字母和下划线分隔单词。
  • 作业提交：你需要在指定issue中给出博客链接，并附上自己对本次作业的总结或反思（可以把这部分内容放在博客页面中，给出对应链接即可）。总结或反思可以包括但不限于包括以下内容：
    • 博客主题及其选取原因
    • 博客页面布局及其设计思路
    • 博客功能实现及其技术选择
    • 博客样式设计及其美学考量
    • 博客制作过程中遇到的问题及其解决方法
  • 作业截止：本次作业将于3月20日开始，持续两周，请大家在截止日期（4月3日）上课之前完成并提交作业。请注意时间安排和进度控制，不要拖延到最后一刻。

本次作业将按照以下几个维度对总结报告和网站内容给出评分：

  • 博客主题：评价学生选择了什么样的主题来展示自己的兴趣或专长，并且是否能够吸引读者关注，博客页面中存在实质性内容即可通过。
  • 页面数量：评价学生设计了什么样的页面结构来展示博客内容，并且是否有达到足够四个页面的内容，达标即可通过。
  • 技术汇报：评价学生利用了哪些技术或工具来实现博客功能，并且是否能够正常运行和并且足够了解相关技术。
TieWay59 commented

补充：

提交格式为 <学号> <姓名> <链接> 例如：

123456789 夏华献 https://xlab2017.yuque.com/staff-kbz9wp/ut3q7i/kf38uhpd6tl3otl0

DarkHighness commented

51255903048 廖浩宇 https://twiliness.cloud/

  • 👍18
  • 😄4
  • 🎉2
  • 🚀3
  • 👀8
will-ww commented

51255903048 廖浩宇 twiliness.cloud

Cool~

heroding77 commented

51255903096 丁子晨 https://heroding77.github.io/

  • 👍8
  • 🎉6
  • 🚀4
zzyzeyuan commented

51255903056 赵泽源 https://zzyzeyuan.github.io/

  • 👍11
  • 😄1
  • 🎉5
  • 🚀4
qqliang commented

52265903003 梁青青 https://qqliang.github.io/

  • 👍5
  • 🎉1
GiveMeAnApple99 commented

51255903097 崔里青 https://givemeanapple99.github.io/

  • 👍7
  • 😄2
  • 🎉3
  • 👀2
zhangbububu commented

51255903073 张布昂 https://zhangbububu.github.io/

  • 👍4
  • 😄1
  • 🎉3
  • ❤️1
  • 🚀1
  • 👀1
Tamiflu233 commented

51255903015 翁祯敏 https://tamiflu233.com
仓库地址
报告地址

  • 👍2
  • 🎉2
xwyzsn commented

51255903033 庄志豪 https://xwyzsn.github.io/
仓库地址
报告地址

  • 👍1
  • 🎉1
JackWeiw commented

51255903105 卫涛 博客链接
仓库地址
报告地址

  • 👍2
  • 🎉1
Hcque commented

51255903036 仇昊晨 https://hcque.github.io/

仓库地址
报告地址

  • 👍2
  • 🎉2
gqq1210 commented

51255903095 葛青青 https://gqq1210.github.io/
仓库地址
报告地址

  • 👍5
  • 😄1
  • 🎉2
  • ❤️1
  • 🚀1
Wind-Gone commented

52275903003 胡梓锐 https://wind-gone.github.io//

  • 👍2
  • 🎉1
  • 🚀1
RTEnzyme commented

52275903001 赵尉臣 https://RTEnzyme.github.io

  • 👍1
  • 🎉1
  • 🚀1
  • 👀2
rad9-13 commented

51255903061 沈英姿 https://rad9-13.github.io/
仓库地址
报告地址

  • 👍3
  • 😄2
  • 🎉3
  • ❤️2
  • 🚀2
  • 👀2
yyq08042 commented

51255903109 晏玉琴 https://yyq08042.github.io/
仓库地址
报告地址

  • 👍3
  • 🎉3
  • ❤️2
  • 🚀2
yz2022 commented

51255903083 周逸 https://yz2022.github.io/
仓库地址
报告地址

  • 👍2
  • 🎉3
  • ❤️1
  • 🚀2
  • 👀1
Yukiho1028 commented

51255903023 俞凯乐 https://yukiho1028.github.io/

  • 👍3
  • 🎉3
  • ❤️2
  • 🚀2
  • 👀2
TengLuoLuo commented

51255903021 腾龙 https://tengluoluo.github.io/

  • 👍2
  • 😄1
  • 🎉2
  • ❤️1
  • 🚀1
  • 👀1
tiertie commented

51255903104 罗瑶 https://tiertie.github.io/

仓库地址

报告地址

  • 👍3
  • 😄1
  • 🎉1
  • 🚀1
lxr599 commented

51255903012 凌向荣 https://lxr599.github.io/

  • 👍3
  • 😄1
  • 🎉1
  • 🚀1
l1tok commented

51255903030 李鸿斌 https://lhbvvvvv.github.io/

  • 👍1
  • 🎉1
See-r commented

51255903100 赵一格 https://see-r.github.io/
仓库地址
报告地址

  • 👍2
  • 😄1
  • 🎉1
andyhuang18 commented

51255903058 黄温瑞 https://andyhuang18.github.io/

  • 👍4
  • 😄1
  • 🎉3
  • ❤️1
  • 🚀1
  • 👀1
wj23027 commented

51255903013 王婕 wj23027.github.io

  • 👍4
  • 😄1
  • 🎉2
  • ❤️1
  • 🚀1
  • 👀1
JinkaiXu commented

51255903018 徐金凯 https://jinkaixu.github.io/

  • 👍3
  • 😄1
  • 🎉1
  • ❤️1
  • 🚀1
  • 👀1
tennnx commented

51255903039 佘霖琳 https://tennnx.github.io
仓库地址
报告地址

  • 👍1
  • 🎉1
wujwyi commented

52275903004 吴家仪 https://wujwyi.github.io/

  • 👍1
  • 🎉1
wypsz commented

51255903010 王一平 https://wypsz.github.io/
仓库地址
报告地址

  • 👍2
  • 🎉1
Skydzl commented

51255903042 张博宇 https://skydzl.github.io/
仓库地址
报告地址

  • 👍1
  • 🎉1
TieWay59 commented

获取本页评论列表（edges）：

query {
  repository(owner: "X-lab2017", name: "oss101") {
    issue(number: 33) {
      title
      comments(first: 100) {
        edges {
          node {
            author {
              login
            }
            body
          }
        }
      }
    }
  }
}

通过浏览器解析打印列表：

// 定义一个正则表达式，用来匹配学号和姓名
const regex = /(\d{11})\s+(\S+)/;

// 定义一个空数组，用来存放结果
const resultArray = [];

// 使用for...of循环遍历对象数组
for (const obj of objArray) {
  // 获取login属性
  const login = obj.node.author.login;
  // 获取body属性
  const body = obj.node.body;
  // 使用正则表达式匹配学号和姓名
  const match = regex.exec(body);
  if (match) {
    // 获取第一个分组（学号）
    const id = match[1];
    // 获取第二个分组（姓名）
    const name = match[2];
    // 把结果添加到数组中
    resultArray.push(`${login}\t${id}\t${name}`);
  } else {
    resultArray.push(`${login}\t${body}`);
  }
}
console.log(resultArray.join('\n'))

共计 81 人次完成本作业：

id 学号
594Surefour 51255903005
Missjust 51255903008
YinZheng-Sun 51255903009
wypsz 51255903010
lxr599 51255903012
wj23027 51255903013
WuDi329 51255903014
Tamiflu233 51255903015
yygs-yyss 51255903017
JinkaiXu 51255903018
TengLuoLuo 51255903021
momentNi 51255903022
Yukiho1028 51255903023
springyulu 51255903026
lhbvvvvv 51255903030
HEHEhe00 51255903031
xwyzsn 51255903033
pourquoi-1130 51255903035
Hcque 51255903036
JinaoLiu 51255903038
tennnx 51255903039
LinRS1999 51255903040
yfsn666 51255903041
Skydzl 51255903042
Goinggoinggoing 51255903044
ifshine 51255903045
Chastelovee 51255903047
DarkHighness 51255903048
TW-githubs 51255903053
EIPsilly 51255903055
zzyzeyuan 51255903056
Freejww 51255903057
andyhuang18 51255903058
rad9-13 51255903061
renrenyouyuyu 51255903062
tang-small-flower 51255903065
gdbaixuefeng 51255903066
zhangbububu 51255903073
RainforestC 51255903074
lh123cha 51255903075
Zzzzzhuzhiwei 51255903077
HaoyangShi 51255903079
EiJuynah 51255903081
zhouchenyi2000 51255903082
yz2022 51255903083
hsy77 51255903085
xiaoyujinghe 51255903086
hyDududu 51255903089
Ashura5 51255903090
xunx911 51255903091
xiaofeichong123 51255903092
hzhang4433 51255903093
gqq1210 51255903095
heroding77 51255903096
GiveMeAnApple99 51255903097
gongchenghua 51255903098
bensonzxs 51255903099
See-r 51255903100
nicole01101101zke 51255903101
iclovemiku 51255903102
HunterHan 51255903103
tiertie 51255903104
JackWeiw 51255903105
JasonZhujp 51255903106
qkgoalkeeper 51255903107
Philosober 51255903108
yyq08042 51255903109
Breaddsmall 51255903111
iWYZ-666 51255903112
Liuyushiii 51255903113
lroethan 52265903002
qqliang 52265903003
Jalingpp 52265903004
itsKevin-lgy 52265903005
abcdabcd3899 52265903006
tyxtyxtyxtyx 52265903007
Kongbaimoon 52265903009
RTEnzyme 52275903001
wengsy150943 52275903002
Wind-Gone 52275903003
wujwyi 52275903004

UPD：

由于格式问题，match遗漏的两位：

caiwanli 52265903008
KAlbert2333 51255903020

UPD2：

由于未知原因，对我不可见的评论： #33 (comment)

yangjie407 51255903076 杨杰

  • 👍2
  • ❤️1