Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chengcheng0v0/acg-home

一个二次元风格的个人网站/个人主页！
https://github.com/chengcheng0v0/acg-home

personal-website web website

Last synced: about 19 hours ago
JSON representation

一个二次元风格的个人网站/个人主页！

Host: GitHub
URL: https://github.com/chengcheng0v0/acg-home
Owner: ChengCheng0v0
License: gpl-3.0
Created: 2022-05-17T13:42:59.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2024-11-16T08:37:37.000Z (about 1 month ago)
Last Synced: 2024-12-22T06:58:32.939Z (6 days ago)
Topics: personal-website, web, website
Language: JavaScript
Homepage: https://acg-home.pages.dev
Size: 31.4 MB
Stars: 15
Watchers: 1
Forks: 9
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

## ACG Home

一个二次元风格的个人主页！

## 预览

![预览](https://s2.loli.net/2024/11/10/nHRUIDs6pjLfkBz.png)

> [!TIP]
> 此预览使用 [Liora](https://github.com/ChengCheng0v0/Liora) 主题，它是 ACG-Home 的官方推荐主题。
> 强烈建议在安装完本项目后立刻配置一个主题样式，因为默认主题实在是不太好看~~

---

项目的开发工作会在 `develop` 分支中进行，对于最新的改动预览请查看：[https://develop.acg-home.pages.dev](https://develop.acg-home.pages.dev)。

## 介绍

这是一个简单的个人网站，没有太多花里花哨的东西。
其设计理念为简洁至上，拥有较为现代的 UI 风格和合理的页面布局。

你是否因为在修改网站模板时需要仔细查找代码并进行文本替换而感到烦恼？本项目的模块化设计很好地解决了这个问题！对于网站标题、站长信息、社交链接、备案信息等在使用前必定需要进行修改的内容，我将它们放在了“网站配置”中，而不是直接硬编码在代码里。如果你对于网站的内容和样式没有特殊需求的话，只需要简单地对 JSON 配置文件进行修改就可以使用了！
使用配置文件还有一个好处就是你可以非常轻松地进行版本升级，每次更新的时候只需要对配置文件进行手动修改就可以做到基本内容的无缝切换。
关于如何修改网站配置，请参见下面的 [如何使用/修改网站配置](#修改网站配置) 章节。

网站的内容和公告区域是使用 [markdown-it](https://github.com/markdown-it/markdown-it) 将 Markdown 渲染为 HTML 的（就像 GitHub 主页的 README 一样），这么做的好处是大大降低了网站编写的复杂性，并且这个渲染器不会过滤掉 HTML 内容（这意味着你只需要编写简短的 Markdown 文档就可以做出复杂的页面内容！）。

项目的代码有着较高的可读性，加上其内容与 HTML 样式分离的设计使得你可以轻松地将它修改成你想要的样子！
网站只有一个简单的最小化框架，你可以在这个基础上增加任何你喜欢的内容，而不会被大型项目的局限性和复杂性所影响。

这个项目目前正处在重构后的第一个大版本！所以未来还会在保留当前设计理念的情况下增加很多模块化的功能，如果感兴趣的话欢迎点个 Star 和关注，谢谢！\(>▽

有任何问题欢迎提 Issue！有希望添加的功能或者有任何建议的话请发起讨论！

### 使用的项目

- 语言: 前端三件套 (HTML, CSS, JavaScript)
- Markdown 渲染器: [markdown-it.js](https://github.com/markdown-it/markdown-it)
- 文本打字效果: [Typed.js](https://github.com/mattboldt/typed.js)
- 字体图标: FontAwesome
- 字体: Linotte + 汉仪正圆

### 你知道吗？

这个项目原本是基于 [wexuo/home](https://github.com/wexuo/home) 的修改版，现在因为各种问题我完全重写了整个项目。现在本项目的页面排版布局仍然使用了原作者的设计，但代码和设计理念是完全不同的~

## 如何使用？

本项目没有什么复杂的地方，但是有些东西最好可以了解一下！

### 修改网站配置

网站的配置文件名为 `config.json`，位于项目的根目录（`/`）。它的格式为 JSON，因此在修改时必须遵循 JSON 格式的语法规范。
项目文件中已经包含了这个配置文件，其内容为所有可用配置及其默认值，只需要根据你的需求修改它们的值即可。网站会在每次加载时获取、解析并根据需要使用这个配置文件。

> [!CAUTION]
> 注意！不要删除配置文件中的任何项（即使你十分确定你不会使用到它），否则恭喜你获得“空指针”错误。
> 如果你真的认为你不需要使用到某项配置，可以将其设为 `""`。
> 在升级版本时也需要同步更新配置文件，你可以在 [这里](https://github.com/ChengCheng0v0/ACG-Home/compare) 选择你目前使用版本的标签和最新版本的标签并选择 `config.json` 文件来查看这两个版本之间配置文件的差异，然后手动将你的旧版本配置迁移到新版本。

### 在网页中的任意位置插入 Markdown 内容

其实非常简单，只需要一个 class 为 `markdown-content` 的任意元素就行了！例如：

```html

```

这段代码使用了一个纯净的 `div` 元素来包裹内容，markdown-it 解析后的 HTML 元素都将插入到这个 `div` 中。
其 `src` 属性定义了需要渲染的源 `.md` 文件的相对或绝对路径。这个路径指向的可以是一个本地 URL 也可以是一个远程 URL，渲染器会通过 `fetch` 获取 Markdown 源文件并进行渲染。

因为渲染器会在页面 DOM 加载完成的时候查找页面内的所有 `.markdown-content` 元素并将其指定的内容渲染出来，所以你可以在页面内任何地方插入这样的元素！

项目中自带了两个需要渲染的 Markdown 文件：`/assets/markdown/content-page.md` 和 `/assets/markdown/announcement.md`，它们分别存放了网页主要内容区域和侧边栏公告卡片的 Markdown 内容。

关于渲染器的更多可自定义选项，请查看 [markdown-it.js](https://github.com/markdown-it/markdown-it) 的官方文档！

### 编写主要内容区域的 Markdown 文档时的最佳实践

因为网站排版的问题，在编辑内容时最好在每个标题前的内容后使用 `---` 分割线进行分段，自定义的 CSS 分割线样式会使页面看起来更加协调（当然如果你喜欢的话也可以不用就是啦）。

## 参与贡献

直接提 PR 就行啦！
\(真的会有人对这个小破项目感兴趣吗 Σ(っ °Д °;)っ \)