社交链接添加配置文件 #49
11
.env
@ -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"
|
||||
|
||||
|
@ -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",
|
||||
|
BIN
public/images/icon/bilibili.png
Normal file
After Width: | Height: | Size: 3.8 KiB |
BIN
public/images/icon/email.png
Normal file
After Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 3.2 KiB |
BIN
public/images/icon/github.png
Normal file
After Width: | Height: | Size: 4.1 KiB |
BIN
public/images/icon/qq.png
Normal file
After Width: | Height: | Size: 3.8 KiB |
BIN
public/images/icon/telegram.png
Normal file
After Width: | Height: | Size: 3.7 KiB |
BIN
public/images/icon/twitter.png
Normal file
After Width: | Height: | Size: 4.1 KiB |
26
socialLinks.json
Normal 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"
|
||||
}]
|
@ -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();
|
||||
}
|
@ -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 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 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,
|
||||
onMounted(() => {
|
||||
getSocialLinksData();
|
||||
});
|
||||
|
||||
// 鼠标移入移出事件
|
||||
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 = "通过这里联系我吧";
|
||||
};
|
||||
</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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
10
src/main.js
@ -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);
|
||||
// });
|
||||
// }
|