Skip to content

Commit 807044f

Browse files
CodeGlimpseCodeGlimpse
committed
feat(tools): 添加多语言 BMI 计算器工具
- 新增工具页面结构，包含中英文内容页面 - 添加工具短代码以支持动态加载 JavaScript 工具 - 实现响应式 BMI 计算器界面，支持中英文阈值标准 - 在导航菜单中添加工具入口，支持多语言显示 - 添加相关图标资源（tool、link、settings）
1 parent 3a36fd7 commit 807044f

12 files changed

Lines changed: 225 additions & 4 deletions

File tree

‎assets/icons/link.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/icons/settings.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/icons/tool.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/js/tools/bmi.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
(function() {
2+
const container = document.getElementById('tool-bmi');
3+
if (!container) return;
4+
5+
const lang = container.getAttribute('data-lang') || 'zh-cn';
6+
7+
const i18n = {
8+
'zh-cn': {
9+
labelHeight: '身高 (cm)',
10+
labelWeight: '体重 (kg)',
11+
placeholderHeight: '例如: 175',
12+
placeholderWeight: '例如: 70',
13+
btnCalc: '开始计算',
14+
statusUnderweight: '偏瘦',
15+
statusNormal: '正常',
16+
statusOverweight: '过重',
17+
statusObese: '肥胖',
18+
thresholds: { normal: 24, overweight: 28 }
19+
},
20+
'en': {
21+
labelHeight: 'Height (cm)',
22+
labelWeight: 'Weight (kg)',
23+
placeholderHeight: 'e.g., 175',
24+
placeholderWeight: 'e.g., 70',
25+
btnCalc: 'Calculate',
26+
statusUnderweight: 'Underweight',
27+
statusNormal: 'Normal',
28+
statusOverweight: 'Overweight',
29+
statusObese: 'Obese',
30+
thresholds: { normal: 25, overweight: 30 }
31+
}
32+
};
33+
34+
const t = i18n[lang] || i18n['en'];
35+
36+
container.innerHTML = `
37+
<div class="tool-container">
38+
<div class="input-group">
39+
<label>${t.labelHeight}</label>
40+
<input type="number" id="bmi-height" placeholder="${t.placeholderHeight}">
41+
</div>
42+
<div class="input-group">
43+
<label>${t.labelWeight}</label>
44+
<input type="number" id="bmi-weight" placeholder="${t.placeholderWeight}">
45+
</div>
46+
<button class="btn-calc" id="bmi-calc">${t.btnCalc}</button>
47+
<div class="result-box" id="bmi-result" style="display: none;">
48+
<span class="bmi-value"></span>
49+
<span class="bmi-status"></span>
50+
</div>
51+
</div>
52+
`;
53+
54+
const btn = document.getElementById('bmi-calc');
55+
const resBox = document.getElementById('bmi-result');
56+
const valSpan = resBox.querySelector('.bmi-value');
57+
const statSpan = resBox.querySelector('.bmi-status');
58+
59+
btn.onclick = () => {
60+
const h = parseFloat(document.getElementById('bmi-height').value) / 100;
61+
const w = parseFloat(document.getElementById('bmi-weight').value);
62+
63+
if (h > 0 && w > 0) {
64+
const bmi = (w / (h * h)).toFixed(1);
65+
let status = '';
66+
let color = '';
67+
68+
// BMI 判定标准 (根据语言切换中国标准/国际标准)
69+
if (bmi < 18.5) {
70+
status = t.statusUnderweight; color = '#3498db';
71+
} else if (bmi < t.thresholds.normal) {
72+
status = t.statusNormal; color = '#2ecc71';
73+
} else if (bmi < t.thresholds.overweight) {
74+
status = t.statusOverweight; color = '#f1c40f';
75+
} else {
76+
status = t.statusObese; color = '#e74c3c';
77+
}
78+
79+
resBox.style.display = 'block';
80+
valSpan.innerText = `BMI: ${bmi}`;
81+
statSpan.innerText = status;
82+
statSpan.style.backgroundColor = color;
83+
}
84+
};
85+
})();

‎assets/scss/custom.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
/*
22
You can add your own custom styles here.
3-
*/
3+
*/
4+
@import "tools.scss";

‎assets/scss/tools.scss‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
.tool-wrapper {
2+
width: 80%;
3+
margin: 2rem 10%;
4+
padding: 5rem;
5+
background: var(--card-background);
6+
border-radius: var(--card-border-radius);
7+
box-shadow: var(--shadow-l1);
8+
9+
.tool-container {
10+
display: flex;
11+
flex-direction: column;
12+
gap: 1rem;
13+
max-width: 400px;
14+
margin: 0 auto;
15+
16+
.input-group {
17+
display: flex;
18+
flex-direction: column;
19+
gap: 0.5rem;
20+
21+
label { font-weight: bold; font-size: 1.8rem; color: var(--card-text-color-main); }
22+
input {
23+
padding: 1.5rem;
24+
border: 1px solid var(--border-color);
25+
border-radius: 4px;
26+
background: var(--body-background);
27+
color: var(--card-text-color-main);
28+
font-size: 1.2rem;
29+
outline: none;
30+
&:focus { border-color: var(--accent-color); }
31+
}
32+
}
33+
34+
.btn-calc {
35+
margin-top: 1rem;
36+
padding: 0.8rem;
37+
background: var(--accent-color);
38+
color: #fff;
39+
border: none;
40+
border-radius: 4px;
41+
cursor: pointer;
42+
font-weight: bold;
43+
font-size: 2rem;
44+
transition: opacity 0.2s;
45+
&:hover { opacity: 0.9; }
46+
}
47+
48+
.result-box {
49+
margin-top: 1rem;
50+
padding: 1.5rem;
51+
text-align: center;
52+
border-radius: 8px;
53+
background: var(--body-background);
54+
border: 1px dashed var(--border-color);
55+
56+
.bmi-value {
57+
font-size: 2rem;
58+
font-weight: bold;
59+
display: block;
60+
color: var(--accent-color);
61+
}
62+
.bmi-status {
63+
display: inline-block;
64+
margin-top: 0.8rem;
65+
padding: 0.3rem 1.2rem;
66+
border-radius: 20px;
67+
color: #fff;
68+
font-size: 1.5rem;
69+
font-weight: bold;
70+
}
71+
}
72+
}
73+
}

‎config/_default/menu.en.toml‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,14 @@
3030
[main.params]
3131
icon = "link"
3232

33+
[[main]]
34+
identifier = "tools"
35+
name = "Tools"
36+
url = "/en/tools/"
37+
weight = 5
38+
[main.params]
39+
icon = "tool"
40+
3341
[[social]]
3442
identifier = "github"
3543
name = "GitHub"
@@ -40,6 +48,6 @@
4048
[[social]]
4149
identifier = "email"
4250
name = "Email"
43-
url = "/en/links/"
51+
url = "mailto:libochen@codeglimpse.top"
4452
[social.params]
45-
icon = "mail"
53+
icon = "mail"

‎config/_default/menu.toml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Social 菜单项已迁移至 menu.zh-cn.toml 和 menu.en.toml 以支持多语言

‎config/_default/menu.zh-cn.toml‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,14 @@
3030
[main.params]
3131
icon = "link"
3232

33+
[[main]]
34+
identifier = "tools"
35+
name = "工具"
36+
url = "/tools/"
37+
weight = 5
38+
[main.params]
39+
icon = "tool"
40+
3341
[[social]]
3442
identifier = "github"
3543
name = "GitHub"
@@ -42,4 +50,4 @@
4250
name = "Email"
4351
url = "mailto:libochen@codeglimpse.top"
4452
[social.params]
45-
icon = "mail"
53+
icon = "mail"

‎content/en/tools/bmi/index.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
title: "BMI Calculator"
3+
description: "Calculate your Body Mass Index (BMI) online"
4+
date: 2026-03-14
5+
layout: "page"
6+
---
7+
8+
Body Mass Index (BMI) is a simple index of weight-for-height that is commonly used to classify underweight, overweight and obesity in adults.
9+
10+
{{< tool id="bmi" >}}
11+
12+
### BMI Categories (WHO Standard)
13+
- **Underweight**: < 18.5
14+
- **Normal weight**: 18.5 - 24.9
15+
- **Overweight**: 25.0 - 29.9
16+
- **Obesity**: >= 30.0
17+
18+
> Note: BMI is a useful measure of overweight and obesity. It is calculated from your height and weight. BMI is an estimate of body fat and a good gauge of your risk for diseases that can occur with more body fat.

0 commit comments

Comments
 (0)