Coder Social home page Coder Social logo

ravelloh / rtheme Goto Github PK

View Code? Open in Web Editor NEW
243.0 2.0 9.0 23.28 MB

新一代现代化极客风多功能横版博客系统 - 基于Nextjs // Next-gen modern geeky versatile horizontal blog system - Powered by Nextjs. //

Home Page: https://ravelloh.top/

CSS 18.29% JavaScript 81.54% MDX 0.17%
animation auto-feeder automation codehighlight compatibility customizable functionalization html5-framework javascipt javascript-applications

rtheme's Introduction

RTheme - v4

新一代现代化极客风多功能横版博客系统 - 基于Nextjs

// Next-gen modern geeky versatile horizontal blog system - Powered by Nextjs. //

GitHub last commit GitHub repo size GitHub Repo stars

特点

  • 现代化:采用现代Web技术,如React、Next.js,提供快速、响应式的用户体验。
  • 多功能:支持多种博客功能,如文章分类、标签、搜索、评论、访问量统计(正在开发)等。
  • 极客风格:设计简洁、优雅,适合极客和开发者。
  • 跨平台:支持在多种设备上运行,包括桌面、移动设备等。
  • 响应式:自适应不同屏幕尺寸,提供一致的用户体验。
  • 可定制:提供丰富的自定义选项,满足个性化需求。
  • 易于操作:日常文稿增删改查均在站点内操作即可,无需写代码,自带Markdown编辑器。
  • 易于部署:可使用vercel快速部署,也可使用其他云平台或VPS。
  • 持续更新:主题将不断更新,以提供更好的功能和体验。
  • 自带后台:此博客自带管理后台,游客也可注册并登录账户。
  • 低成本:使用vercel或neon提供的免费postgres数据库可免费部署。
  • 过渡自然:元素切换使用自研淡入淡出函数处理,过渡自然流畅。
  • SEO友好:自带RSS与Sitemap,SEO友好。

预览

预览: RavelloH's Blog

homepage signin editor menu categories user-dashboard user post-index

Screenshot_20230819_163309_com android chrome Screenshot_20230819_163340_com android chrome Screenshot_20230819_163447_com android chrome Screenshot_20230819_163646_com android chrome Screenshot_20230819_163712_com android chrome Screenshot_20230819_163426_com android chrome

特性

高性能

得益于重新设计的主题框架,主题现在在性能方面已经登峰造极,在Google PageSpeed Insights测试中取得了400/400的满分成绩。测试结果 Screenshot_20230819_162842_com android chrome
在实际体验中,RTheme使用Web Worker异步处理高负载任务,异步加载/执行渲染,避免阻塞页面;其主动预加载也降低了页面的加载延迟。 在v3版本的全面升级中,主题已经改造为单页应用程序,加之顺畅的内容过渡,流畅性大大提升。

自动化

RTheme使用Github Actions在云端自动部署,无需本地干预,即可自动完成索引更新、自动订阅更新、站点地图更新、文章旁路推荐等功能。
此外,RTheme优化了自身的架构,使得其编写文章十分简单----仅需要了解HTML语法即可。你也可以选择使用Markdown编辑。之后,其组件将在渲染时自动无感添加。
Screenshot_20230817_200552_com android chrome

响应式

主题使用响应式设计,基准元素均使用flex/grid布局,在各尺寸屏幕上表现出色。 Screenshot_20230819_165401_com kiwibrowser browser Screenshot_20230819_165820_com android chrome_edit_386275673794257

功能丰富

主题功能丰富,内置设置/分享/在线音乐播放/多站点测速/自动全站搜索/文章自定义排序/文章标签&分类自动索引/站点地图/RSS/Atom自动生成/文章自动推荐/内置高级下载器/主动型预加载/用户登录接口/外链截图API等等一系列功能,创造出属于极客的极致主题框架。

函数化

主题中除了用于管控初始化加载的loading.js,其余脚本均将各功能包装为函数,以保证其可复用性及可免依赖乱序加载。
Screenshot_20230819_170439_com android chrome
这使得二次开发十分简单,可直接复用主题框架中的功能。

SEO友好

主题自动根据页面内容生成两种格式的sitemap,优化搜索引擎抓取。

全站搜索

主题与可持续集成的RPageSearch深度集成,以提供静态站的全站高级搜索功能。 详见RavelloH/RPageSearch。高性能/实时搜索/正则语法支持/异步/web worker/自动持续构建/可拓展数据格式,提供丰富的搜索功能。
Screenshot_20230812_214218_com android chrome

自动订阅更新

主题基于页面内容自动生成RSSAtomJSON Feed三种格式的订阅信息。

高兼容性

主题最早支持到Chrome58(2017年4月19日),Firefox52(2017年3月7日),Opera45(2017年5月10日),Safari,能够提供兼容性的保障。
注:IE已死,不支持IE。

单页应用程序

主题使用PJAX技术进行页面加载,并在页面加载切换之间加入过渡动画。
另外,主题也会在页面加载时更新左下角的进度条,以展示正在加载/加载超时/加载完成/加载失败等不同场景。 Screenshot_20230819_175635_com android chrome

原生音乐播放器

主题内置原生音乐播放器,支持播放/切换/跳转/循环等功能,且可进行在线搜索以使用在线资源。
Screenshot_20230819_163646_com android chrome 也支持在文章内部加入音乐播放器,来调用主题的播放器进行播放。
Screenshot_20230819_180221_com android chrome

过渡自然

主题内置顺滑的元素切换函数switchElementContext(),以保证元素切换的顺滑自然。

轻量化&原生实现

主题本体大小小于600KB,无任何框架,保证了其高速的加载性能。 Screenshot_20230819_182143_com kiwibrowser browser

代码高亮

主题使用highlight.js代码高亮,并在其基础上使用Web Worker并行加载,防止页面阻塞。
Screenshot_20230819_182502_com android chrome

标签&分类自动索引

主题能自动根据文章信息索引具有相应标签/分类的文章,无需干预。 Screenshot_20230819_182651_com android chrome

语言自定义

主题的语言文件包单独成文件,你可以根据自己的需要更改模板,也可实现其国际化。 Screenshot_20230819_182834_com android chrome

设置自定义

主题可进行各式设置,以提供个性化体验。
设置项使用cookie存储,并且使用列表快速创建,保证其易用性。
Screenshot_20230819_183116_com android chrome Screenshot_20230819_183151_com android chrome

自动目录索引

主题可根据文章内标题自动生成目录,并高亮阅读项,以提高阅读体验。 Screenshot_20230819_183406_com android chrome

文章旁路推荐

文章结尾自动推荐上一篇/下一篇文章,无需手动设置。效果见上方图片。

内置高级下载器

主题内置下载器,提高整体感。你可以在文章中使用。
详阅#箱式下载盒 Screenshot_20230819_183617_com kiwibrowser browser


使用

你可以直接使用vercle部署,也可以使用vps等部署方式。

参阅https://ravelloh.top/posts/rthemev4-deployment-complete-guide

开发

欢迎改进/修复/增加主题的功能。你可以使用nodejs在本地查看更改。

git clone https://github.com/RavelloH/RTheme
cd RTheme
pnpm install
pnpm dev

Licence

MIT

rtheme's People

Contributors

ravello-h avatar ravelloh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

rtheme's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.