社交链接添加配置文件 #49

This commit is contained in:
底层用户 2023-01-30 18:47:01 +08:00
parent 4c63155ada
commit 97007b05c1
13 changed files with 77 additions and 136 deletions

11
.env
View File

@ -10,18 +10,13 @@ VITE_DESC_HELLO_OTHER = "Oops !"
VITE_DESC_TEXT_OTHER = "哎呀,这都被你发现了( 再点击一次可关闭 "
# 社交链接
VITE_SOCIAL_GITHUB = "imsyy"
VITE_SOCIAL_GITEE = "imsyy"
VITE_SOCIAL_QQ = "1539250352"
VITE_SOCIAL_EMAIL = "one@imsyy.top"
VITE_SOCIAL_TELEGRAM = "bottom_user"
VITE_SOCIAL_TWITTER = "iimmsyy"
## 请在根目录下的 socialLinks.json 文件中配置
# 网站链接
## 请在 src/components/Links/index.vue 中设
## 请在 src/components/Links/index.vue 文件中配置
# 天气 Key
## 请前往高德开放平台注册 Web服务 Key
## 请前往高德开放平台注册 Web服务 Key(免费的)
## 请各位大佬行行好,别再让我超量了
VITE_WEATHER_KEY = "57eaea5833ff1616cfd1ff2c4cf9b58a"

View File

@ -4,7 +4,7 @@
"github": "https://github.com/imsyy/home",
"home": "https://imsyy.top",
"private": true,
"version": "4.0.0",
"version": "4.0.1",
"type": "module",
"scripts": {
"dev": "vite",

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
public/images/icon/qq.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

26
socialLinks.json Normal file
View File

@ -0,0 +1,26 @@
[{
"name": "Github",
"icon": "/images/icon/github.png",
"tip": "去 Github 看看",
"url": "https://github.com/imsyy"
}, {
"name": "BiliBili",
"icon": "/images/icon/bilibili.png",
"tip": "(゜-゜)つロ 干杯 ~",
"url": "https://space.bilibili.com/98544142"
}, {
"name": "QQ",
"icon": "/images/icon/qq.png",
"tip": "有什么事吗",
"url": "https://wpa.qq.com/msgrd?v=3&uin=1539250352&site=qq&menu=yes"
}, {
"name": "Email",
"icon": "/images/icon/email.png",
"tip": "来封 Email ~",
"url": "mailto:one@imsyy.top"
}, {
"name": "Telegram",
"icon": "/images/icon/telegram.png",
"tip": "你懂的 ~",
"url": "https://twitter.com/iimmsyy"
}]

View File

@ -36,3 +36,13 @@ export const getWeather = async (key, city) => {
const res = await fetch(`https://restapi.amap.com/v3/weather/weatherInfo?key=${key}&city=${city}`);
return await res.json();
}
/**
* 获取配置
*/
// 获取社交链接
export const getSocialLinks = async () => {
const res = await fetch("/socialLinks.json");
return await res.json();
}

View File

@ -3,69 +3,14 @@
<div class="social">
<div class="link">
<a
id="github"
:href="socialLinks.github"
v-for="item in socialLinksData"
:key="item.name"
:href="item.url"
target="_blank"
@mouseenter="changeTip"
@mouseleave="leaveTip"
@mouseenter="socialTip = item.tip"
@mouseleave="socialTip = '通过这里联系我吧'"
>
<Icon size="24">
<Github />
</Icon>
</a>
<a
id="gitee"
:href="socialLinks.gitee"
target="_blank"
@mouseenter="changeTip"
@mouseleave="leaveTip"
>
<span class="xicon" style="font-size: 24px;">
<img src="/images/icon/gitee.png" height="24"/>
</span>
</a>
<a
id="qq"
:href="socialLinks.qq"
target="_blank"
@mouseenter="changeTip"
@mouseleave="leaveTip"
>
<Icon size="24">
<Qq />
</Icon>
</a>
<a
id="email"
:href="socialLinks.email"
@mouseenter="changeTip"
@mouseleave="leaveTip"
>
<Icon size="28">
<EmailRound />
</Icon>
</a>
<a
id="telegram"
:href="socialLinks.telegram"
target="_blank"
@mouseenter="changeTip"
@mouseleave="leaveTip"
>
<Icon size="24">
<Telegram />
</Icon>
</a>
<a
id="twitter"
:href="socialLinks.twitter"
target="_blank"
@mouseenter="changeTip"
@mouseleave="leaveTip"
>
<Icon size="24">
<Twitter />
</Icon>
<img class="icon" :src="item.icon" height="24" />
</a>
</div>
<span class="tip">{{ socialTip }}</span>
@ -73,66 +18,37 @@
</template>
<script setup>
import { ref, reactive } from "vue";
import { Github, Qq, Telegram, Twitter } from "@vicons/fa";
import { EmailRound } from "@vicons/material";
import { Icon } from "@vicons/utils";
import { ref, onMounted } from "vue";
import { getSocialLinks } from "@/api";
import { Error } from "@icon-park/vue-next";
//
let socialHover = ref(false);
let socialLinksData = ref([]);
let socialTip = ref("通过这里联系我吧");
let socialTipData = {
github: "去 Github 看看",
gitee: "去 Gitee 看看",
qq: "有什么事吗",
email: "来封 Email",
telegram: "你懂的 ~",
twitter: "你懂的 ~",
};
//
const socialLinks = reactive({
github: "https://github.com/" + import.meta.env.VITE_SOCIAL_GITHUB,
gitee: "https://gitee.com/" + import.meta.env.VITE_SOCIAL_GITEE,
qq:
"https://wpa.qq.com/msgrd?v=3&uin=" +
import.meta.env.VITE_SOCIAL_QQ +
"&site=qq&menu=yes",
email: "mailto:" + import.meta.env.VITE_SOCIAL_EMAIL,
telegram: "https://t.me/" + import.meta.env.VITE_SOCIAL_TELEGRAM,
twitter: "https://twitter.com/" + import.meta.env.VITE_SOCIAL_TWITTER,
//
const getSocialLinksData = () => {
getSocialLinks()
.then((res) => {
socialLinksData.value = res;
console.log(socialLinksData.value);
})
.catch((err) => {
console.error(err);
ElMessage({
message: "社交链接获取失败",
grouping: true,
icon: h(Error, {
theme: "filled",
fill: "#efefef",
}),
});
});
//
const changeTip = (e) => {
let tipKey = e.target.id;
switch (tipKey) {
case "github":
socialTip.value = socialTipData.github;
return true;
case "gitee":
socialTip.value = socialTipData.gitee;
return true;
case "qq":
socialTip.value = socialTipData.qq;
return true;
case "email":
socialTip.value = socialTipData.email;
return true;
case "telegram":
socialTip.value = socialTipData.telegram;
return true;
case "twitter":
socialTip.value = socialTipData.twitter;
return true;
default:
return true;
}
};
const leaveTip = () => {
socialTip.value = "通过这里联系我吧";
};
onMounted(() => {
getSocialLinksData();
});
</script>
<style lang="scss" scoped>
@ -167,8 +83,12 @@ const leaveTip = () => {
justify-content: center;
a {
display: inherit;
span {
.icon {
margin: 0 12px;
transition: all 0.3s;
&:active {
transform: scale(0.9);
}
}
}
}

View File

@ -15,13 +15,3 @@ pinia.use(piniaPluginPersistedstate);
app.use(pinia);
app.mount('#app')
// if ('serviceWorker' in navigator) {
// navigator.serviceWorker.register('/sw.js')
// .then(() => {
// console.log('Service worker registered.');
// })
// .catch(err => {
// console.log('Failed to register service worker: ', err);
// });
// }