Skip to content

Commit 66b1a38

Browse files
changkunchangkun
committed
website: show one language at a time on the homepage
Replace the stacked Chinese+English heroes on the root page with a single hero plus a 中文/English toggle. The language is auto-detected from the browser on first visit and remembered in localStorage; the non-active language is hidden by default to avoid a flash of both.
1 parent 6629382 commit 66b1a38

2 files changed

Lines changed: 82 additions & 9 deletions

File tree

‎website/themes/moderncpp/layout/index.ejs‎

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,21 @@
1010
</div>
1111
</div>
1212

13-
<div id="hero">
13+
<div id="lang-switch">
14+
<button type="button" class="lang-btn" data-set="zh">
15+
<span class="flag" style="content: url(/modern-cpp/assets/lang/cn.svg);"></span>中文
16+
</button>
17+
<button type="button" class="lang-btn" data-set="en">
18+
<span class="flag" style="content: url(/modern-cpp/assets/lang/en.svg);"></span>English
19+
</button>
20+
</div>
21+
22+
<div id="hero" class="lang" data-lang="zh">
1423
<div class="inner">
1524
<div class="left">
1625
<img class="hero-logo" src="<%- url_for("/modern-cpp/assets/cover-2nd.png") %>">
1726
</div><div class="right">
18-
<h4>欧长坤 著</h4>
27+
<h4>欧长坤 著</h4>
1928
<h1>
2029
现代 C++ 教程<br>
2130
</h1>
@@ -29,12 +38,12 @@
2938
</div>
3039
</div>
3140

32-
<div id="hero">
41+
<div id="hero" class="lang" data-lang="en">
3342
<div class="inner">
3443
<div class="left">
3544
<img class="hero-logo" src="<%- url_for("/modern-cpp/assets/cover-2nd-en.png") %>">
3645
</div><div class="right">
37-
<h4>Changkun Ou</h4>
46+
<h4>Changkun Ou</h4>
3847
<h1>
3948
Modern C++ Tutorial
4049
</h1>
@@ -49,14 +58,43 @@
4958
</div>
5059

5160
<div id="footer">
52-
<p>
61+
<p class="lang" data-lang="zh">
5362
<a href="https://changkun.de">欧长坤</a> &copy; 2016-<%- new Date().getFullYear() %> 版权所有，
5463
采用<a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议许可</a>，代码使用 <a href="https://opensource.org/licenses/MIT" target="_blank">MIT</a> 协议开源。</a>
5564
</p>
56-
<p>
65+
<p class="lang" data-lang="en">
5766
<a href="https://changkun.de">Changkun Ou</a> &copy; 2016-<%- new Date().getFullYear() %>.
5867
The book is licensed under <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0</a>, code is open sourced under the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT</a> License. </a>
5968
</p>
6069
</div>
70+
71+
<script>
72+
(function () {
73+
var sections = document.querySelectorAll('.lang');
74+
var buttons = document.querySelectorAll('.lang-btn');
75+
function apply(lang) {
76+
for (var i = 0; i < sections.length; i++) {
77+
sections[i].style.display = sections[i].getAttribute('data-lang') === lang ? '' : 'none';
78+
}
79+
for (var j = 0; j < buttons.length; j++) {
80+
var on = buttons[j].getAttribute('data-set') === lang;
81+
buttons[j].className = on ? 'lang-btn active' : 'lang-btn';
82+
}
83+
document.documentElement.lang = lang === 'zh' ? 'zh-CN' : 'en';
84+
}
85+
var stored = null;
86+
try { stored = localStorage.getItem('mcpp-lang'); } catch (e) {}
87+
var nav = (navigator.language || navigator.userLanguage || 'en').toLowerCase();
88+
var lang = stored || (nav.indexOf('zh') === 0 ? 'zh' : 'en');
89+
apply(lang);
90+
for (var k = 0; k < buttons.length; k++) {
91+
buttons[k].addEventListener('click', function () {
92+
var l = this.getAttribute('data-set');
93+
try { localStorage.setItem('mcpp-lang', l); } catch (e) {}
94+
apply(l);
95+
});
96+
}
97+
})();
98+
</script>
6199
<script src="https://cdn.rawgit.com/wnda/pivot/master/pivot.js"></script>
62-
<script>pivot.init({ selector: ".hero-logo", shine: true, shadow: true, scale: true});</script>
100+
<script>pivot.init({ selector: ".hero-logo", shine: true, shadow: true, scale: true});</script>

‎website/themes/moderncpp/source/modern-cpp/css/index.styl‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,41 @@ body
2323
.logo
2424
display: none
2525

26+
// Before JS runs, show only the Chinese sections to avoid a flash of both
27+
// languages; the toggle script reveals the right one on load.
28+
.lang[data-lang="en"]
29+
display: none
30+
31+
#lang-switch
32+
text-align: center
33+
padding: 90px 40px 0 200px
34+
button.lang-btn
35+
background: transparent
36+
border: 1px solid rgba(126, 45, 54, 0.4)
37+
color: $theme
38+
font-size: 0.95em
39+
font-weight: 600
40+
letter-spacing: .05em
41+
padding: 6px 16px
42+
margin: 0 4px
43+
border-radius: 4px
44+
cursor: pointer
45+
transition: all .2s ease
46+
&:hover
47+
border-color: $theme
48+
&.active
49+
background: $theme
50+
color: #fff
51+
border-color: $theme
52+
.flag
53+
width: 15px
54+
height: 15px
55+
margin-right: 6px
56+
vertical-align: middle
57+
margin-bottom: 2px
58+
2659
#hero
27-
padding: 100px 40px 40px 200px
60+
padding: 60px 40px 40px 200px
2861
background-color: #fff
2962
.inner
3063
max-width: $width
@@ -120,8 +153,10 @@ body
120153
display: none
121154
#mobile-bar
122155
display: block
156+
#lang-switch
157+
padding: 70px 40px 0
123158
#hero
124-
padding: 70px 40px 50px
159+
padding: 20px 40px 50px
125160
.hero-logo
126161
float: none
127162
margin: 30px 0 30px

0 commit comments

Comments
 (0)