hashirama/kun-galgame-vue
1
0
Fork 0
Code Issues Pull requests Actions Projects Releases Wiki Activity

feat: kungalgame page i18n

Browse source
This commit is contained in:
KUN1007 2023-10-22 23:15:07 +08:00
parent 26a3323698
commit d5b6b7ee43
3 changed files with 366 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/top-bar/KUNGalgameTopBar.vue
View file

@ -92,6 +92,7 @@ onBeforeRouteLeave(() => {
>
<Icon icon="uiw:setting-o" />
</span>
<div class="avatar">
<img
v-if="avatarMin"
@ -291,11 +292,19 @@ $navNumber: v-bind(navItemNum);
}
@media (max-width: 1000px) {
span {
display: none;
.kungalgame {
span {
display: none;
}
img {
margin-right: 0 !important;
}
}
}
@media (max-width: 700px) {
.settings {
display: none !important;
}
.top-bar {
display: none;
}

2
src/store/types/settings.d.ts vendored
View file

@ -3,7 +3,7 @@ export interface KUNGalgameSettingsStore {
// 白天黑夜模式切换
showKUNGalgameMode: string
// 网站显示语言
showKUNGalgameLanguage: string
showKUNGalgameLanguage: 'en' | 'zh'
// 主页宽度
showKUNGalgamePageWidth: Record<string, number>
// 网站字体

391
src/views/kungalgame/KUNGalgame.vue
View file

@ -1,16 +1,14 @@
<script setup lang="ts">
// 导入 Footer
import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
// 导入 Aside
import Aside from './components/Aside.vue'
// 导入设置面板 store
import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
import { storeToRefs } from 'pinia'
import { computed } from 'vue'
// 使用设置面板的 store
const settingsStore = useKUNGalgameSettingsStore()
const { showKUNGalgamePageWidth } = storeToRefs(settingsStore)
const { showKUNGalgamePageWidth, showKUNGalgameLanguage } = storeToRefs(
useKUNGalgameSettingsStore()
)
const kungalgamePageWidth = computed(() => {
return showKUNGalgamePageWidth.value.KUNGalgame + '%'
})
@ -18,18 +16,294 @@ const kungalgamePageWidth = computed(() => {
<template>
<div class="root">
<!-- 内容区容器 -->
<div class="content-container">
<!-- 内容区 -->
<div class="content">
<Aside />
<!-- 文章容器 -->
<div class="article">
<!-- KUNGalgame en translation -->
<div v-if="showKUNGalgameLanguage === 'en'" class="article">
<h1>About Us</h1>
<h2 id="introduction">Website Introduction</h2>
<p>
KUN Visual Novel is a Visual Novel forum construction project
initiated by
<span class="skip">
<a
href="https://github.com/KUN1007"
target="_blank"
rel="noopener noreferrer"
>
KUN
</a>
</span>
individually, and it is currently in the
<span class="skip">
<a
href="https://github.com/KUN1007/kun-galgame-vue"
target="_blank"
rel="noopener noreferrer"
>
development phase
</a> </span
>.
</p>
<br />
<p>The significance of KUN Visual Novel is:</p>
<br />
<br />
<ul class="list">
<li>
Promoting truly good games, so everyone can see real
<span class="skip">visualized data</span> on websites like VNDB
and avoid being misled by "experts."
</li>
<li>
<strong>
Staying away from the modern internet trend of praising and
bashing, and considering criticism a virtue.
</strong>
</li>
<li>
Empowering anyone to learn basic computer skills to avoid "newbie"
issues.
</li>
<li>
Building a forum focused on individual user enjoyment, resisting
the creation of hierarchies.
</li>
<li>
Most current websites use templates, making them all look the same
and causing aesthetic fatigue.
</li>
<li>... etc.</li>
</ul>
<br />
<br />
<p>
We believe: "<strong style="color: red"
>What makes you happy, what makes you genuinely laugh, is a truly
excellent Visual Novel!</strong
>"
</p>
<br />
<br />
<p>
Our ultimate goal is to create
<strong>the world's best visual novel forum!</strong>
</p>
<br />
<br />
<p>
As of version 1.0.0, the design, development, maintenance, and
promotion of the forum are all led by me alone. If you have ideas
for forum construction, opinions about the forum environment, or
just want to chat, you can join us
<span class="skip">
<RouterLink to="/contact">here</RouterLink> </span
>.
</p>
<br />
<br />
<p>
The forum's construction has received invaluable assistance from
many individuals, including (in no particular order):
</p>
<br />
<ul class="list">
<li>
<span class="skip">
<a
href="http://acgngames.net"
target="_blank"
rel="noopener noreferrer"
>
ACGNGAME
</a>
</span>
(Galworld) Webmaster
</li>
<li>
<span class="skip">
<a
href="http://shinnku.com"
target="_blank"
rel="noopener noreferrer"
>
Shinnku
</a>
</span>
(UpsetGal) Webmaster
</li>
<li>
<span class="skip">
<a
href="http://www.ymgal.games"
target="_blank"
rel="noopener noreferrer"
>
Ymgal
</a>
</span>
(YueMu Galgame) Webmaster
</li>
<li>... and more.</li>
</ul>
<br />
<br />
<p>
The design and development stages of the forum were inspired by
several well-designed websites, including (in no particular order):
</p>
<br />
<ul class="list">
<li>Twitter.com - Topic detail page</li>
<li>github.com - Color schemes</li>
<li>
bbs.kfmax.com (ScarletMoon) - User information categorization
</li>
<li>... and more.</li>
</ul>
<br />
<br />
<p>
Among them, the biggest inspiration came from Codepen and the design
philosophies of many experts on GitHub. You can view all the links
mentioned above
<span class="skip">
<RouterLink to="/thanks-list">here</RouterLink> </span
>.
</p>
<br />
<br />
<h2 id="principle">Operating Principles</h2>
<br />
<h3>1. The Cutest Visual Novel Forum in the World</h3>
<p>
Here, "cutest" doesn't just mean literally "cute / moe"; it refers
to all the beautiful things in the world. Anything that makes you
happy and feel wonderful can be called "cute / moe." This means that
we have no set rules; all rules depend on everyone's common
opinions.
</p>
<p>
A visual novel forum means that
<strong>
we focus primarily on visual novels, and all topics on the
homepage are related to visual novels. Other topics are placed in
<span class="skip">
<RouterLink to="/pool">Topic Pool</RouterLink>
</span>
</strong>
</p>
<h3>2. To Create The Best Atmosphere</h3>
<p>
Continuing from the previous point, before I started designing the
entire website, I wrote the following on the design drawing:
</p>
<br />
<ul class="list">
<li>
Promoting truly good games, so everyone can see real
<span class="skip">visualized data</span> on websites like VNDB
and avoid being misled by "experts."
</li>
<li>
Rejecting the modern internet trend of praising and bashing,
considering criticism a virtue.
</li>
<li>
Empowering anyone to learn basic computer skills to avoid "newbie"
issues.
</li>
<li>
Building a forum focused on individual user enjoyment, resisting
the creation of hierarchies.
</li>
<li>...</li>
</ul>
<br />
<p>
This means that unkind behavior, such as sarcasm and bashing, is not
allowed on KUN Visual Novel. Of course, this all depends on
everyone's opinions.
</p>
<h3>3. NO ADs Forever</h3>
<p>
Literally,
<strong
>the website will never have any form of advertisements</strong
>. We believe a good forum should not have any advertising. If you
find something resembling an ad, please report it. If 10 people
report it, the topic will be locked.
</p>
<h3>4. Free Forever</h3>
<p>
Literally,
<strong
>no one will ever spend money on the website's virtual currency
(Moemoepoints)</strong
>. The amount of virtual currency depends on appreciation from
others. If you would like to support us, you can do so
<span class="skip">
<RouterLink to="/donate">here</RouterLink> </span
>.
</p>
<h2 id="stipulate">Forum Guidelines</h2>
<p>
Guidelines? No, we have
<strong>no guidelines</strong>. All guidelines depend on everyone's
common opinions.
</p>
<p>However, we hope to keep things kind and minimize hostility.</p>
<p style="margin-bottom: 10px">
To avoid having your account deleted prematurely,
<strong style="color: red">we offer these suggestions</strong>
</p>
<ul class="list">
<li>1. No political discussions.</li>
<li>2. No advertising or solicitation.</li>
<li>
3. For sensitive topics, please include a clear warning in the
article title, e.g., R18, R18-G, etc.
</li>
</ul>
<br />
<p>
Why offer suggestions? Because these are not "Moe" behaviors. If
you'd like to learn more about posting etiquette, please see
<span class="skip">
<RouterLink to="/non-moe">the Non-Moe Records</RouterLink> </span
>.
</p>
<br />
<br />
</div>
<!-- KUNGalgame cn translation -->
<div v-if="showKUNGalgameLanguage === 'zh'" class="article">
<h1>关于我们</h1>
<h2 id="introduction">网站简介</h2>
<p>
KUNGalgame 是由 <span class="skip">KUN（鲲）</span>个人发起的一个
galgame 论坛建设项目，目前正在<span class="skip">开发阶段</span>。
KUNGalgame 是由
<span class="skip">
<a
href="https://github.com/KUN1007"
target="_blank"
rel="noopener noreferrer"
>
KUN（鲲）
</a>
</span>
个人发起的一个 galgame 论坛建设项目，目前正在
<span class="skip">
<a
href="https://github.com/KUN1007/kun-galgame-vue"
target="_blank"
rel="noopener noreferrer"
>
开发阶段
</a></span
>
</p>
<br />
<p>KUNGalgame 创建的意义在于：</p>
@ -37,10 +311,8 @@ const kungalgamePageWidth = computed(() => {
<br />
<ul class="list">
<li>
大力宣传真正的好游戏，让大家都会用 VNDB 等网站，看到真正的<span
class="skip"
>可视化数据</span
>，避免被“大佬”毒害
大力宣传真正的好游戏，让大家都会用 VNDB 等网站，看到真正的
<span class="skip">可视化数据</span>，避免被“大佬”毒害
</li>
<li>
<strong
@ -72,17 +344,51 @@ const kungalgamePageWidth = computed(() => {
目前截止 V 1.0.0
版本，论坛的设计、开发、维护、推广都是由我一人主导，如果您有对论坛建设的想法、对论坛环境的看法、亦或者是单纯的想要闲聊吹水，您都可以<span
class="skip"
>加入我们</span
>。
>
<RouterLink to="/contact">加入我们</RouterLink>
</span>
</p>
<br />
<br />
<p>论坛的建设受到过大量人员的不懈帮助，其中有（排名不分先后）：</p>
<br />
<ul class="list">
<li><span class="skip">ACGNGAME</span> （Galworld）站长</li>
<li><span class="skip">Shinnku</span> （失落的小站）站长</li>
<li><span class="skip">Ymgal</span> （月幕 Galgame）站长</li>
<li>
<span class="skip">
<a
href="http://acgngames.net"
target="_blank"
rel="noopener noreferrer"
>
ACGNGAME
</a>
</span>
（Galworld）站长
</li>
<li>
<span class="skip">
<a
href="http://shinnku.com"
target="_blank"
rel="noopener noreferrer"
>
Shinnku
</a>
</span>
（失落的小站）站长
</li>
<li>
<span class="skip">
<a
href="http://www.ymgal.games"
target="_blank"
rel="noopener noreferrer"
>
Ymgal
</a>
</span>
（月幕 Galgame）站长
</li>
<li>......等等</li>
</ul>
<br />
@ -101,9 +407,10 @@ const kungalgamePageWidth = computed(() => {
<br />
<p>
其中对我灵感启发最大的莫过于 Codepen 以及 github
里众多大佬的设计思想，以上的全部链接可以查看<span class="skip"
>感谢名单</span
>。
里众多大佬的设计思想，以上的全部链接可以查看
<span class="skip">
<RouterLink to="/thanks-list">感谢名单</RouterLink>
</span>
</p>
<br />
<br />
@ -117,8 +424,13 @@ const kungalgamePageWidth = computed(() => {
Galgame 论坛意味着
<strong
>我们只以 galgame 为主，在首页的话题中仅含有和 galgame
有关的一切话题 </strong
>，其它话题全部位于<span class="skip">话题池</span>中
有关的一切话题
</strong>
，其它话题全部位于
<span class="skip">
<RouterLink to="/pool">话题池</RouterLink>
</span>
中
</p>
<h3>2. 以营造最良好的氛围为理念</h3>
<p>紧接上一条，在整个网站编写之前，我在设计图上写了这些：</p>
@ -146,7 +458,9 @@ const kungalgamePageWidth = computed(() => {
<h3>4. 永远不会收费</h3>
<p>
字面意思，任何人永远不会为网站的任何虚拟货币（萌萌点）花钱，虚拟货币的数量取决于别人对你的赞赏，我们认为运营不起一个网站只能说明我们的经济有问题，直接关站即可，当然，我们提供
<span class="skip">赞助渠道</span>
<span class="skip">
<RouterLink to="/donate">赞助渠道</RouterLink>
</span>
</p>
<h2 id="stipulate">论坛规定</h2>
<p>
@ -166,13 +480,17 @@ const kungalgamePageWidth = computed(() => {
<br />
<p>
为什么要建议，当然是因为这些不萌啦，如果还想了解更多关于发帖的礼仪，请查看
《<span class="skip">不萌记录</span>》
《
<span class="skip">
<RouterLink to="/non-moe">不萌记录</RouterLink>
</span>
》
</p>
<br />
<br />
</div>
<!-- 版权 -->
</div>
<KUNGalgameFooter
style="
width: 100%;
@ -261,19 +579,18 @@ p {
text-indent: 3em;
margin: 5px;
}
a {
display: block;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
strong {
text-transform: uppercase;
}
/* 被划出来的链接字体 */
.skip {
border-bottom: 1.5px solid var(--kungalgame-blue-4);
cursor: pointer;
color: var(--kungalgame-blue-4);
a {
color: var(--kungalgame-blue-4);
}
}
.list > li {
list-style: inside;