hellogithub-team / geese

一款基于 Next.js 构建的开源爱好者社区。这里有丰富的开源项目、真实的评论、文章，希望你能在这里找到开源的乐趣。

介绍

Geese 译为「惊鸿」可理解为轻盈、快速的形态，希望它清爽、简约的界面可以带给你「惊鸿」一般的访问体验。

我想让玩开源的人有个“家”，所以就用 Next.js+Tailwind CSS 构建了一个轻量级的开源社区，也就是「HelloGitHub 社区」的源码。

该社区提供了不同 编程语言/类别/标签 有趣、入门级的开源项目，用户可以这里 发现/搜索/收藏/评论/分享 感兴趣的开源项目，还可以 点赞/提交/打分 开源项目，让优秀的开源项目脱颖而出。围绕开源项目，社区聚集了一群热爱开源的玩家、技术精湛的大牛、热衷分享的作者，感谢开源让我们相识，或许开源精神就是一种交朋友的方式吧！

目前，该社区 已上线 在线体验 如遇到问题或发现 BUG 可以一键反馈。

待认领

• 【复杂】减小项目打包的体积
• 【简单】待解决的问题

开发须知在这里，感谢每一位参与贡献的小伙伴，十分开心可以和各位一起做开源项目，这段经历让我受益匪浅。

要求

1. 拥有 热爱开源、有始有终、靠谱 的性格。
2. 完成时间：可根据自己的实际情况而定，参考：简单（7 天）、中等（14 天）、复杂（30 天）。
3. 有任何问题可在对应需求下的 issues 中进行沟通。

声明

联系我

本作品采用 署名-非商业性使用-禁止演绎 4.0 国际 进行许可。

geese's Issues

欢迎弹框：帮助用户熟悉新网站

背景

此需求来自于多用户反馈，新网站不熟悉很多常用功能的入口找不到了。

所以，计划增加一个类似欢迎页面的弹框，用来帮助用户熟悉新网站。

需求

当用户第一次访问 新版网站「Geese」的时候，弹出一个信封当用户点击后，跳转到 /help/weclome 页面（这个页面和内容我来写）。

详细

1. 是否显示弹窗的状态存到 localStorage，然后定个时间
2. 有“不再显示”的勾选框，用户勾选后不会再次弹框
3. 希望可以在信封处加上 HelloGitHub 的 logo（可选）

讨论

做成下面的交互效果，会不会更好呢？开发量如何

标签功能（复杂）

概述

标签功能是网站的核心功能之一，由后台维护前端多处展示。展示效果：

首页最上方“热门标签“按钮，实现首页标签过滤的功能。

接口

获取标签接口：https://local.api.hellogithub.com/docs#/tag/search_v1_tag_search__get

name：可选、sort_by 排序条件、page_size 每页条数

这里请求接口时，参数为：sort_by 为 'hot'，page_size 为 10

首页加载 items 的接口：https://local.api.hellogithub.com/docs#/home/home_v1__get

其它

2、首页 item 处
3、项目详情页

MDRender 渲染组件的代码高亮，无法切换黑暗模式

MDRender 渲染组件切换黑暗模式问题

我尝试让组件接收是否为黑暗模式状态的参数：

1. 组件无 localStorage、windows 对象
2. 无法判断当前是否处于黑暗模式

另外，我发现 MDRender 该组件无法渲染「无序列表」

评论模块（复杂）

需求

展示位置为项目详情页下方，功能类似于豆瓣的评论，功能包含：

打分组件：https://github.com/saadeghi/daisyui

1. 表单包括：用过/没用过+评分+评论（输入框不支持上传图片）
2. 客户端需缓存内容，防止误触导致未发布内容丢失（用户未发布时，缓存评论内容 localStorage）
3. 评论内容均需要通过后台审核后前端才可以显示，所以发布后不可修改
4. 支持最新、热门排序
5. 未登录提示登录后才可以发布
6. 点赞/取消点赞 评论

原型图

接口

评论：

1、获取评论列表：https://local.api.hellogithub.com/docs#/comment/index_v1_comment__belong___belong_id__get

请求参数：
- belong：隶属于那个实体，有限集（repository、article）
- belong_id：隶属的实体 id
响应：
- is_voted：当前访问页面的用户，是否对该条评论点过赞（由此判断点赞按钮触发点赞还是取消赞）

2、发表项目的评论：https://local.api.hellogithub.com/docs#/comment/repo_create_v1_comment_repository__belong_id__post

请求参数：
- comment：评论的内容
- score：评分（整数）
- is_used：是否用过

点赞：

1、点赞：https://local.api.hellogithub.com/docs#/vote/create_vote_v1_vote__belong___belong_id__post

请求参数：
- belong：隶属于的实体（文章、项目、评论）
- belong：隶属于实体的 ID
- item_id：主要用于评论的点赞

文章、项目、评论的点赞用的都是这个接口。如果是项目的评论点赞场景，请求参数则为：belong_id（repo_id)、belong（comment）、item_id（comment_id)

2、取消点赞：https://local.api.hellogithub.com/docs#/vote/delete_vote_v1_vote__delete

[产品优化] 建议优化项目展示

月刊部分

• 月刊增加评分按钮

背景：月刊目前项目名为一个跳转链接，点击即跳转到 GitHub。

思考：HG 目前的网站我理解是想要用户来对用过的进行点评。

建议方案：这块的话需要增加入口，建议可以在目前月刊旁边一个评分项目，点击可跳转到对应的 repo 点评页面。

参考如下：

可能潜在的问题：一期月刊这个图标过多。

• 移动端浏览月刊增加目录
• 增加项目详情入口

用户个人首页部分

• 用户动态显示具体的项目和评论（过审且已展示的项目），点击项目名和评论可跳转；

项目

• 新增项目收藏夹
• 【文案】评论—>精选评论
• 增加评论置顶图标（项目和文章同理）

网站明/暗模式切换

需求

1. PC 端右边栏用户头像边上，增加一个明亮/黑暗的主题的 switch 按钮
2. 移动端上述功能入口在 header「右上角点击头像后的悬浮框内」
3. 如果浏览器或手机主题是暗色调，是不是网站可以自动切换到「暗」主题。tailwindcss 官网会根据浏览器主题自动切换 明/暗

相关资料

• https://tailwindcss.com/docs/dark-mode

搜索组件（中等）

搜索组件支持：输入联想（suggest）、搜索

接口：https://local.api.hellogithub.com/docs#/search

搜索组件在页面上展示的位置：在 header 上 logo 的右边一点

注意：需考虑兼容不同屏幕尺寸，既 tailwind 的 md、lg 等可参考已有代码

用户等级

背景

显示用户等级以及还需多少贡献值等级

需求

样式：

图片仅供参考，实现效果以你的想法为准。

位置：

PC 端右侧用户头像下面的 Lv1 右边：

移动端 还没想好放在哪，你看着来。实在没地儿放，就算了。

级别对应的贡献值：

• Lv1：0-99
• Lv2：100-199
• ...
• Lv10：900-999
• Max：>=1000

接口

需要登录状态下访问，可找我拿 token。

地址：https://local.api.hellogithub.com/docs#/user/user_me_v1_user_me__get

响应参数：

• level（str）：等级
• next_level_score（int）：到达下一级别所需的总贡献值
  例如：
  当前等级为 1，则 next_level_score 为 100；
  当前等级为 2，则 next_level_score 为 200；

注意：Max 级别对应的 level 为：Max，next_level_score 为 None

优化：分享项目对话框（检查项目是否推荐过）

背景

防止用户在提交项目时，写了半天项目描述，提交时才发现项目已存在。

需求

在分享项目的对话框中，增加一个「检查项目是否存在的按钮」，交互上做成“按钮”或者“离开地址输入框后，自动检查”，具体交互方式由开发者自行决定。

最后，展示请求接口检查结果的给用户，展示样式带 icon 和颜色（醒目）。

（可选）加一个 描述本地缓存吧，防止用户误触没有提交，导致未提交的内容消失不见。

接口

地址：https://local.api.hellogithub.com/docs#/repository/check_repo_v1_repository_check__get

方法：GET

参数：
- url（必填）：项目地址

响应：
- 400：项目地址错误
- 200：
{ "success": true, "data": { "is_exist": true }, "message": "项目已存在，无法再次提交。" }
{ "success": true, "data": { "is_exist": false } }

翻页组件（简单）

首页 items 末尾增加翻页功能，我还没想好用那种翻页组件，索性由开发者决定吧！

1. 无触发到底自动触发或手动点击“加载更多”实现加载更内容
2. 下一页、上一页翻页组件

实现那种由认领者决定。

接口：https://local.api.hellogithub.com/docs#/home/home_v1__get

主题切换按钮手机端点击后一直处于选中状态

SSR 渲染速度优化或加载状态调研

背景

点击跳转 SSR 的页面时有明显的等待。

下拉组件

提交项目功能（中等）

需求

用户可以分享发现的 GitHub 上的开源项目地址。

效果图

大屏幕：

小屏幕：

分享项目的流程

用户点击“提交” -> 弹出表单 -> 保单包含中包含输入项：

• url（必须是由 https://github.com 开头）
• 提示（“仅接受 GitHub 上的开源项目，只需输入项目链接和描述即可”）
• 项目特点（非必需）：多行输入框
  -> 提交后根据接口返回结果，显示成功与否以及：
• 成功则提示还可以提交几个项目
• 失败提示失败原因

接口

提交项目接口

返回数据示例：

{
  "posted": 7,  // 今日已提交的项目数
  "remaining": 0, // 还可以提交几个
  "success": false, // 提交是否成功
  "message": "失败原因" // 失败原因
}

普通用户每天最多提交 5 个项目，管理员则无此限制。

注意：用户分为登录和未登录状态，未登录状态提示登录跳转到登录页面，登录的话点击右上角扫码即可登录。

[新功能]开源协议

背景

开源协议是创建开源项目和项目走向正规化的必经之路，但是国内针对这部分的内容少之又少，导致大部分的开源作者对这部分不是很了解。

需求

HelloGitHub 网站开设一个开源协议的专栏，用来进行开源协议的介绍、特点说明、浏览明细（中文），为用户选择开源提供中文、可行性建议。

因为开源协议原版均为英文，大约翻译 100 份，这是个浩大的工程，需要发挥开源共建精神，大家一起协作翻译。

所以，第一版的主要功能为认领和翻译。

功能

1. 用户可以选择、浏览不同状态（待认领、翻译中、完成）的协议
2. 用户认领协议进行翻译
3. 提交翻译好的协议
4. 后台审核和校对后，网站可浏览

MD 内容渲染

背景

月刊的内容都是采用 Markdown 语法进行编写，所以需要前端进行 md 内容的渲染。

用到的地方比如：项目详情中包含的字段 summary、code，月刊的 description

需求

1. 调研一个 md 渲染的组件，引入项目
2. 完成月刊页面，并包含该页面内的 md 内容渲染
   • 每个项目带锚点，当用户点击项目链接跳转时，异步请求记录访问次数的接口
   • 自动生成月刊中分类的目录（小屏幕移动端不需要）
   • 图片展示和点击预览（以引入现成的组件：components/ImageWithPre）
   • 页面样式可自由优化，注意小屏幕的适配。可参考：https://hellogithub.com/periodical/volume/75/
   • 分页，需要一个分页组件包含：上一页、下一页、跳转（可选）。参考样式
3. 详情页中的 summary、code 你引入组件后，我来开发

接口

获取全部期数：https://local.api.hellogithub.com/docs#/periodical/all_volumes_v1_volume_all__get

追踪访问 github url 的接口：https://local.api.hellogithub.com/docs#/repository/go_github_v1_repository_go_github__get

按照期数获取数据：https://local.api.hellogithub.com/docs#/periodical/volume_v1_volume__get
- 默认为最新一期
- 注意 volume_name 和 num 的区别为 01 和 1
- 是否有下一页后端已实现

按照分类获取数据：暂停开发

移动端访问文章，无 prose 样式

我用 nextjs 的 typography-plugin 插件，为渲染好的 md 内容增加样式，代码片段：

<MDRender className='prose mobile:prose-sm prose-blue max-w-none dark:invert'>
    {article.content}
</MDRender>

自行封装的 MDRender 组件源码

PC 上内容样式按照预期展示，但是移动端无 prose 插件的样式。PC 端浏览器开发者模式，切换 mobile 模式显示正常：

但是手机端真机访问无 prose 样式，异常：

问题地址：https://hellogithub.com/article/9d73ebcfe98f4d478f55057ec4e942aa （手机访问可以复现）

我现在是毫无头绪～

RSS

采用后端生成+Nginx 提供访问，地址：https://hellogithub.com/rss

移动端 Header 优化

Header 部分因为加入了 排行榜、切换主题的按钮，移动端因为宽度有限无法正常平铺展示。

想要优化成类掘金移动端的样式：

任务和 BUG 的汇总

优化

• 现在用的是 echart 有些过重，能不能换成动态生成 svg。#112
• #101
• 搜索功能优化，支持搜索文章并打通公众号

新功能

• #93
• #110
• #119
• #124
• 根据操作系统自动切换主题
• 高 Star 项目的推荐
• 开源项目相关的在线实用工具，Star 趋势图、增长数据、生成 logo 等

Tips：详细描述可点击查看对应的 Issue，后续沟通在对应的 issues 里留言。

---

已完成

• #118
• 对话框弹出后背景页面可滚动
• #106
• #117
• 项目头像因未知原因，为一张空白图
• 登陆异常的问题
• 评论昵称长度过长显示不全的问题
• 用户空头像的问题
• #88
• #74
• #70
• PC 访问网站，发现底部有个左右滑动的进度条（没块）
• 发布评论后，评论的用户头像为默认头像，且无昵称
• 首页的项目主语言，加类似 GitHub 上不同语言不同颜色的圆圈
• 首页无限加载改成翻页
• 优化首页标签样式和交互
• Token 过期不展示登录入口的问题
• 评论内容溢出的 BUG
• 首页翻页优化（现在有请求两次接口的 BUG）
• 从“月刊”返回到“首页”时会失去登录状态
• 加载项目到底的提示
• #49
• #51
• #45
• #40
• #48
• #46
• #47
• #50
• 切换下拉框没有反应（排行榜页面）
• #57
• #62
• #66
• #56
• #60
• #61
• #65
• #63
• #55

异常处理和提醒（中等）

请求接口异常跳转的页面，可能需要优化下 项目中现有的请求方法

异常的 alert 可以参考：https://www.hyperui.dev/components/marketing/alerts

待优化的点

一、样式

1.1、PC 访问网站，发现底部有个左右滑动的进度条（没块）

很影响美感，需要隐藏

二、评论

2.1、发布评论后，评论的用户头像为默认头像

三、首页

3.1、首页的项目主语言，加类似 GitHub 上不同语言不同颜色的圆圈

3.2 优化首页无限加载

改成翻页还是继续无限加载？（还没想好）

大小优化

项目 build 时的压缩详情：

我看了下那个几个大的页面：/periodical/category/[name]、/article/[aid]、/help/ 引入了 tailwind 的 typography 插件的 prose 美化 md 渲染后内容的样式，不知道和这块有没有关系。

如果可以的话，希望 First Load JS shared by all 可以精简到 100 KB以下，从而提高页面加载速度

用户首页（复杂）

1、基本信息和动态

• 接口：https://local.api.hellogithub.com/docs#/user/user_profile_v1_user__uid__get

userInfo：中的 in_person 为 True 才显示 收藏 和 评论 入口，同时：右上角增加一个“登出”的按钮

动态：包含用户头像（看样式难堪的话可取消）、贡献动态、点赞（未实现），不支持翻页，所有人（非登录状态）均可浏览，

2、收藏

• 接口：https://local.api.hellogithub.com/docs#/user/user_collection_v1_user__uid__collection__get

需要带翻页，item 的样式可以自由调整和优化

3、评论

• 接口：https://local.api.hellogithub.com/docs#/user/user_comment_v1_user__uid__comment__get

需要带翻页，item 的样式可以自由调整和优化

申诉接口暂未实现，暂时用语雀表单收集代替。

地址：https://hellogithub.yuque.com/forms/share/d268c0c0-283f-482a-9ac8-939aa8027dfb

加载组件（简单）

显示加载状态的组件，可以使用 svg 实现：https://github.com/n3r4zzurr0/svg-spinners

sitemap

定时更新、动态生成 sitemap 利于 SEO

项目详情页（复杂）

为开源项目贴标：

我觉得 GitHub 项目的原始信息过于单薄，所以 HG 详情页想把用户在寻找项目时最关心的元素提取并醒目地展示出来，比如：Star 数、代码语言、是否包含中文、是否活跃、许可类型。

同时项目的分类过于模糊，月刊那种单一的分类十分宽泛，所以我为每个项目增加了标签，方便用户寻找同标签的项目（水平）

最后，“HG 评分”是我们的核心，它会根据 GitHub 上的各种数据以及我们用户的评分、点击、点赞、分享、收藏，计算出来一个综合评估项目受喜爱程度的数值。

原型图：

接口：https://local.api.hellogithub.com/docs#/repository/detail_v1_repository_detail__rid___get

示例：https://local.api.hellogithub.com/v1/repository/detail/a4279670afea4b6987dc3d045876316a/

注意：图上标记了元素对应的接口字段，没有的字段可暂时先实现展示效果。

首页 items 四个角有圆弧 border（黑暗模式下明显）

favicon ico

通过 Nginx 配置，设置访问静态资源

移动端点击后样式一直为 hover 下的样式

上述问题出现在移动端访问时，问题的页面和具体位置如下：

• 月刊的上一页、下一页，点击后一直处于 hover 状态下的样式

• 项目详情的 moreInfo 组件点击“展开”，收缩一直处于 hover 状态下的样式

月刊分类访问

增加月刊分类访问的页面，入口为「月刊-分类」

自适应优化

优先级 ： Header > 广告组件 > 下拉框

大宽屏

1. 宽屏 header 没有等比拉伸，logo 应该多出内容一些
2. 右边栏的广告组件，图片展示不完整

3. 宽屏下月刊的目录太宽了

小窄屏幕

1. header 上的搜索框没有自动伸缩，需保证 左下拉框的和头像的完整

2. 项目详情右侧 score、评论按钮 顶出屏幕了

3. 排行榜，中间 logo 部分伸缩（文字部分可以省略），保证两个下拉框的正常展示

下来选项的内容不用换行

右边栏广告栏

背景

第一期右边栏广告栏，仅有两个赞助商：

1. 网站云服务赞助商：ucloud 素材
2. 网站云存储赞助商：upyun 素材

所以无需接口获取先实现样式即可，主要是我想下周五上线来不及开发了。

样式

参考掘金的右边栏广告样式：

细节：

1. 右下角有广告字样的提醒和border
2. 当鼠标放到右下角“广告”字样上，“广告”改为“投放广告”，点击新开一个 tab 商务合作意向表单：https://hellogithub.yuque.com/forms/share/ecbba03f-3e35-44db-99af-a664d24b539f
3. 鼠标移动到整个广告组件上时，右上角出现关闭图标

位置和高度

1. 位置在 UserStatus 组件下面，Status 上面
2. 高度为：h-18 ~ h-20（可调整），每个广告位高度一样
3. 需要适配 ipad mini 等平板设备

Nextjs 的 Image 如何关闭本地缓存

Nextjs 的 image 会缓存 src 地址的图片，但是这样

1. 不好控制 nginx 的访问频率限制
2. 服务器压力有点大

我看了 next 的文档没找到怎么关闭这个缓存。😢

项目结构和代码优化（复杂）

项目代码风格、类型优化，让它可以过 action 和 git hook，并且编写文档进行说明。

页面双击 console 偶现异常

前端 console 偶现异常

VM238817:50 Uncaught TypeError: (event.target.className || "").indexOf is not a function
    at onDoubleClick (eval at success (kernel.js:233:37), <anonymous>:50:48)
    at dispatch (jquery.js:5237:49)
    at elemData.handle (jquery.js:5044:47)

排序组件：热门和最新切换的问题（简单）

状态切换的选中状态有问题

Onefile

开源协议专栏

背景

开源协议是创建开源项目和项目走向正规化的必经之路，但是国内针对这部分的内容少之又少，导致大部分的开源作者对这部分不是很了解。

需求

HelloGitHub 网站开设一个开源协议的专栏，用来进行开源协议的介绍、特点说明、浏览明细（中文），为用户选择开源提供中文的可行性建议，第一版的主要功能为展示。

功能

首页：

1. 展示权限（permissions）类型的标签
2. 按照最新（last）和最热（hot）排序
3. 可以多选不同权限的（商用、分发、修改、专利）协议，过滤查看项目
4. 简单的翻页功能

原型和接口

优先完成详情页

首页

每行展示几个，可根据实际情况调整

接口：

• 首页：https://local.api.hellogithub.com/docs#/license/index_v1_license__get
  • tid：标签id，可多选例如：?tid=xxx&tid=xxx
• 标签：https://local.api.hellogithub.com/docs#/license/tag_v1_license_tags__get
  • tag_type：默认获取 permissions 类型的标签

详情

接口：https://local.api.hellogithub.com/docs#/license/license_detail_v1_license__lid__get

参数：

• lid：通过项目详情接口获取，对应 license_id 字段

细节：

• 标签在 hover 和 点击 的状态下，显示 tag 的 description
• 侧边栏获取指定开源协议的项目，接口 请求参数为 spdx_id（开源协议详情接口有这个字段）

认领翻译协议

接口：https://local.api.hellogithub.com/docs#/license/claim_license_v1_license__lid__claim__post

【优化】Header 处的按钮交互

为防止用户重复点击 header 处的 首页、月刊、排行榜、文章 等按钮，所以需要优化 header 的交互：

1. hover 状态，有一个 blue-500 的横条
2. active 和 当前所在页面下，按钮的文字为 text-blue-500
3. 处于当前页面和已点击状态下，不会被重复点击发起任何请求或中断之前的请求

注意：以上均为 PC 端，移动端可适当统一 header 上按钮的选中或 active 状态下的样式。

示意图：

更加详细的交互，可参考掘金和知乎 header 部分。

Modal 框有交互问题

meeting_01.mp4

文章

原本网站有的文章模块需要尽快恢复，这次将 OneFile 编程挑战整合进文章，统一成一个入口。

排行榜

这个需求主要是为了让新网站能够继续提供：编程语言、服务器、数据库排行榜的功能。

旧网站排行榜地址（PC 访问）：https://hellogithub.com/report/tiobe/

要求：

• 排行榜入口在 header 月刊的右侧，需要优化搜索框的手机端的适配
• path 延续之前的不变
• SSR
• 另外下图中的查询按钮，可改成月份数字变化自动刷新

需要延续就网站的地址，所以 path 如上。具体样式可以参考 GitHub Trending：https://github.com/trending/python?since=daily

接口：

• tiobe：https://local.api.hellogithub.com/docs#/report/tiobe_rank_v1_report_tiobe__get
• netcraft：https://local.api.hellogithub.com/docs#/report/netcraft_rank_v1_report_netcraft__get
• db：https://local.api.hellogithub.com/docs#/report/db_rank_v1_report_db__get

month(可选参数)：请求的月份，不传则返回最新一期排行榜的数据。

month_list：返回的数据，代表有排行榜数据的月份。

Logo：

• tiobe：https://img.hellogithub.com/logo/tiobe.jpg
• netcraft：https://img.hellogithub.com/logo/netcraft.jpg
• db：https://img.hellogithub.com/logo/db.jpg

搜索框交互优化

1. 输入状态，右边 🔍 改为 close 关闭 图标
2. 搜索建议增加停顿时再请求后段 suggest 接口，否则每输入一个字母就请求接口，服务器压力较大

[产品优化] 首页文章内容标题跳转github等项目地址区域辨识度增强

建议增强该区域的辨识度，虽然有hover效果，但是在鼠标不悬停的前提下无法区分或能够快速找到项目地址

[体验优化] 主站 post 所有人建议采用项目作者，而非分享人

项目前期的话，应该是蛋蛋分享为主（超过 99.99%），所以一旦采用分享人作为主页的显示，会降低主站的人气感，造成这个网站没人活跃在上面除了发起人。

建议先以作者作为主页显示，以及主站后期有人进行评论可以以最后评论人进行主页展示（根据运营需求来）

热门算法

优化：点击链接交互（区别对待 PC 和移动端）

我为 link 增加了 标签，然后我想区别对待移动端和客户端，点击链接的交互。

移动端：不新建tab，PC端：新建 tab

因为 SSR 无法获取 windwos 之类的，我就写了一个 client 的方法 checkMobile 用来判断是否是为客户端，当点击的时候判断设备，然后修改 target 变量，但是 checkMobile 这个方法我写了几个页面，求 review 看看有没有更好的办法：

4488735

我还发现 Link 标签下有/无 <a> 标签，还会影响 window.history 的长度。

右边栏：用户和网站状态（中等）

右边栏包含模块：

1. 用户状态（头像、级别、积分、签到？）
2. 网站状态（项目总数、用户总数）
3. 考虑设计赞助商栏
4. footer

主要开发工作：右边栏不随中心内容的滚动而滚动、展示占位方便后续接入数据。

接口：
1、用户状态：https://local.api.hellogithub.com/docs#/user/user_me_v1_user_me__get

nickname：昵称
avatar：头像
积分和等级先写死占位

2、网站状态：https://local.api.hellogithub.com/docs#/home/stats_v1_stats__get

repo_total：项目总数
user_total：用户总数
period_total：月刊总数

3、赞助位前端静态占个位即可，我得先去拉赞助拉不到，就不用这个功能了
4、静态

手机端交互优化（用户登录）

手机端优化

1、登录后用户操作

手机端右上角登录有，显示用户头像，点击头像有一个菜单，包含：

• 我的首页
• 退出

2、点击按钮不应该显示高亮边框

• Header：登录、月刊 按钮
• 项目：更多、点赞、收藏、分享、访问
• 评论：发布、点赞、最新/最热、

3、手机端下拉松开，即刷新当前页面

这个功能是不是浏览器支持的，我看有的手机浏览器自带支持（夸克），有的不支持（微信内的浏览器）

4、评论

填评论内容，点击“发布” 需要弹出一个确认框，提示：

评论一经提交后无法修改和删除，请误发布灌水、广告、恶意等内容。

下面有两个按钮：确认发布，取消