Skip to content
master
Switch branches/tags
Code

Latest commit

Bumps [tar](https://github.com/npm/node-tar) from 6.1.3 to 6.1.11.
- [Release notes](https://github.com/npm/node-tar/releases)
- [Changelog](https://github.com/npm/node-tar/blob/main/CHANGELOG.md)
- [Commits](npm/node-tar@v6.1.3...v6.1.11)

---
updated-dependencies:
- dependency-name: tar
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
3506d8c

Git stats

Files

Permalink
Failed to load latest commit information.

Luogu Blog Frontend

这里是洛谷博客的主题仓库。洛谷博客主题以 AGPL 协议开源,并欢迎大家贡献。

开始开发

git clone https://github.com/luogu-dev/luogu-blog-frontend
cd luogu-blog-frontend
yarn install # 安装依赖、配置 debug 主题所用的 Semantic UI
THEME=<YOUR_THEME_NAME> yarn build # 编译产生指定主题的 Javascript 生产环境归档
THEME=<YOUR_THEME_NAME> yarn build-dev # 编译产生指定主题的 Javascript 测试环境归档(无压缩、优化)
yarn dev-server # 启动用于调试的 API Mock 服务器。可以通过指定 PORT 环境变量修改监听端口。
yarn dev # yarn build-dev && yarn dev-server 的简写。
yarn lint # 使用 ESLint 检查 Javascript 代码风格。

API Mock 调试服务器启动后,可以访问 http://localhost:<PORT>/<YOUR_THEME_NAME>/ 来浏览该主题的预览。

需要事先运行 THEME=<YOUR_THEME_NAME> yarn build 来产生对应的 JS 和 CSS 才能工作。

需要说明的是,在 Windows 环境下,前置指定 THEME 环境变量无效,但可以在 PowerShell 中使用以下代码来替代:

$env:THEME="<YOUR_THEME_NAME>" # 指定环境变量
yarn build # 编译产生指定主题的 Javascript 生产环境归档

主题审核标准

贡献的主题必须符合以下几条标准:

  1. 必须符合正常人的审美。
  2. 必须不侵犯他人的知识产权。
  3. 必须不包含任何的恶意代码,包括试图读取 Cookies 或 CSRF 等。
  4. 必须符合架构、代码规范,包括通过 ESLint 等。
  5. 同时也不保证一定接受符合以上四条条件的主题。

架构

洛谷博客是混合渲染架构。

页面整体框架、以及博客的博文内容由服务器直出,此部分使用 Handlebars 模版引擎。

服务器部分可访问到一些全局变量:

blogUID: 博客主的 UID
blogName: 博客标题
blogSubtitle: 博客副标题
currentUser: 当前用户 UID,可能为 null
isBlogAdmin = (currentUser === blogUID)
luoguAddress: 洛谷网站地址(用于在子域名下创建到洛谷的链接)
picAddress: 洛谷图片 CDN 地址
------
文章页:
postID: 博文 ID
postTitle: 博文标题
postThumbUp: 博文点赞数
postTime: 已格式化过的发布时间
postContent: 已转化为HTML的博文内容
userVote: 用户对本文的评价,1 = 赞,-1 = 踩,0 = 没评价

页面中部分结构,例如文章列表、评论、点赞功能,由 Vue 在客户端动态渲染。

此部分允许由服务器向客户端传递一个名为 BlogGlobals 的全局变量,建议的结构如下:

var BlogGlobals = {
   blogName: document.querySelector('meta[name=blog-name]').getAttribute('content'),
   blogUID: parseInt(document.querySelector('meta[name=blog-uid]').getAttribute('content')),
   currentUser: parseInt(document.querySelector('meta[name=current-user]').getAttribute('content')),
   luoguAddress: '{{ luoguAddress }}',
   picAddress: '{{ picAddress }}'
}
// 博文页面
var blogContainer = document.getElementById("blog-container");
BlogGlobals.blogID = parseInt(blogContainer.getAttribute("data-blogid"));
BlogGlobals.vote = parseInt(blogContainer.getAttribute("data-vote"));
BlogGlobals.thumbUp = parseInt(blogContainer.getAttribute("data-thumbUp"));

About

Frontend Theme Packs for Luogu Blog.

Resources

License

Releases

No releases published

Packages

No packages published