A Hexo Clock Component Inspired by TrymenT

428 字

2 分钟

A Hexo Clock Component Inspired by TrymenT

2025-03-10

前端

Hexo

/

JavaScript

/

时钟

/

游戏风格

中文版

TIP
This article is republished with authorization from a Fluid user. All rights reserved to the original author.
Author: Tokisaki_Galaxy Original: https://tski.uk/background-tryment-clock

WARNING
This project is specifically optimized for the Hexo-Fluid theme; other themes may require manually modifying theme code for the best experience. Hexo-Theme-Fluid project: https://github.com/fluid-dev/hexo-theme-fluid

Preview#

Project on GitHub Online preview on Hexo

The clock recreates the slightly mysterious interface design from the game, with rotating dual rings and special symbol markers creating a unique visual experience. Whether used as a blog decoration or a personal page flourish, it adds plenty of sci-fi atmosphere.

Introduction#

A web clock implementation imitating the clock interface design in the game TrymenT ―今を変えたいと願うあなたへ―. It provides a digital clock with a special visual style. I really love this game — when is RASK going to release OmegaA? Even if they split it into parts, don’t leave it unfinished! The leftmost pointer is the indicator; the pointer stays still while the inner and outer rings keep moving instead. The inner ring represents hours, the outer ring represents minutes.

Features#

Unique dual-ring clock design
Special fonts and symbol markers
Customizable date display format
Responsive design, adapts to different screen sizes
Semi-transparent background image effect

How to use#

Required files#

Using in Hexo#

(Recommended!) Hexo injection#

Hexo injector is a feature introduced after Hexo 5. To write the injection code, create a scripts folder in the root of your blog, then create a js file with any name inside it.

For example, create /blog/scripts/Tryment-Clock.js with the following content:

1
hexo.extend.injector.register('body_begin', '<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Tokisaki-Galaxy/TrymenT-ClocK/TrymenT-ClocK.min.css"><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Tokisaki-Galaxy/TrymenT-ClocK/TrymenT-ClocK.min.js"></script>', 'default');

(More troublesome) Modifying theme code#

Put the following code into the layout/layout.ejs file of the theme, then copy the corresponding files into the css, js, and img folders.

1
<% if (theme.background_trymentclock.enable) { %>
2
  <!--下面两行是核心内容-->
3
  <%- css_ex(theme.static_prefix.internal_css, 'TrymenT-ClocK.min.css') %>
4
  <%- js_ex(theme.static_prefix.internal_js, 'TrymenT-ClocK.min.js') %>
5
  <% } %>

1
# 背景的TrymenT时钟特效，如果需要切换背景图片请在主题目录下替换 /source/img/img.png
2
# See: https://github.com/Tokisaki-Galaxy/TrymenT-ClocK
3
background_trymentclock:
4
  enable: false

Using as a standalone page#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>TrymenT ClocK</title>
7
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Tokisaki-Galaxy/TrymenT-ClocK/TrymenT-ClocK.min.css">
8
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Tokisaki-Galaxy/TrymenT-ClocK/TrymenT-ClocK.min.js"></script>
9
</head>
10
</html>

Notes#

The clock effect may consume some system resources and can be slightly laggy on low-end devices
The background image is semi-transparent by default, which may conflict with some dark themes
On mobile devices, the clock automatically resizes to fit the screen
If you want to change the background image, it’s recommended to keep the dimensions above 1920×1080
It’s not recommended to add multiple clock instances on a page, as this may cause performance issues

A Hexo Clock Component Inspired by TrymenT

https://tski.uk/blog/en/background-tryment-clock/

作者

Tokisaki Galaxy

发布于

2025-03-10

许可协议

CC BY

(Recommended!) Hexo injection

(More troublesome) Modifying theme code

Using as a standalone page

5

Notes