ElegPage-一款现代化极简风格的个人主页引导模板

功能介绍

  • 一言API服务
  • 实时时间
  • 昼夜切换
  • 音乐播放支持在线解析歌单(基于meting //支持多节点API)

项目信息

保姆级使用教程

SEO网站标题与logo更换

在index.html中找到以下代码,在第7-10行

<title>Acornia的主页</title>
<meta name="description" content="Acornia的个人引导页面,您可以从这里访问到我的所有公开服务">
<meta name="keywords" content="Acornia,个人主页,程序员,个人引导页">
<link rel="icon" type="image/ico" href="assets/images/favicon.ico">

修改配置

<title>网页标题</title>
<meta name="description" content="网站描述">
<meta name="keywords" content="网站搜索标签"> //用英文逗号隔开
<link rel="icon" type="image/ico" href="logo"> //链接或路径

效果图

头像/名称更换

在index.html中找到以下代码,替换其中的文本或图片链接即可,在28-35行

<div class="avatar-container">
  <img class="profile-photo" src="assets/images/avatar.jpg" alt="头像">
</div>
  <h1 class="profile-name">Acornia</h1>
   <p class="profile-title" id="hitokoto"></p>
  <p class="profile-bio" id="from"></p>

修改配置

<img class="profile-photo" src="图像地址" alt="图像描述"> //src= 图像链接或链接 alt= 图像的描述
<h1 class="profile-name">名称</h1>
<p class="profile-title" id="hitokoto"></p> //id="hitokoto"为一言获取
<p class="profile-bio" id="from"></p> //id="from" 为该一言的来源
其中的 id="hitokoto"id="from" 删除后看可换为自己的简介或格言

效果图

音乐播放器API设置

在index.html中找到以下代码,在17-20行替换即可

const METING_APIS = [
    '/meting/',
    'https://ioioi.lol/meting/'
];

该配置可无需修改

  • 默认使用即可已内置api如不想使用内置的也可以使用第三方
  • 支持多个api节点添加只需要使用”加链接即可一行一个
  • 注意是英文的,如果是添加在最后面检查一下前面,最后面的不需要添加如果是添加前面则需要英文逗号

音乐播放器歌单设置

在index.html中找到以下代码,在24-33行替换即可

const PLATFORM_CONFIG = {
    netease: {
        name: '网易云音乐',
        defaultPlaylist: '13230215625'
    },
    tencent: {
        name: 'QQ音乐',
        defaultPlaylist: '8982152830'
    }
};

修改配置

name: '网易云音乐', //音乐平台
defaultPlaylist: '13230215625' //该平台的歌单id

name: 'QQ音乐', //音乐平台
defaultPlaylist: '8982152830' //该平台的歌单id
只修改defaultPlaylist:中的数字即可列如:defaultPlaylist: '13230215625' 修改为defaultPlaylist: '1234567890' 在修改前请注意歌单平台

歌单获取

网易云为例

  1. 在浏览器中搜索网易云音乐点击进入
  2. 在网易云首页找到歌单
  • 找到一个你喜欢的或者是自己创建的点击进去
  • 在浏览器的搜索框中找到其中的数字 例如:12937122744
  1. 复制下来到index.html中替换defaultPlaylist: 例子如defaultPlaylist: '12937122744'
  2. QQ音乐同理

按钮修改

在index.html中的找到以下代码,在第143-167行

  <a href="https://blog.ioioi.lol/" class="social-btn">
    <i class="ri-blogger-line"></i>
    <span>biaoti</span>
  </a>

修改配置

<a href="链接" class="social-btn"> // 要打开的链接
<i class="ri-blogger-line"></i> //icon图标 图标库为 `https://remixicon.com/`
<span>标题</span>

icon图标获取

浏览器访问https://remixicon.com/然后找到一个相关的或者你喜欢的图标

点击该图标复制代码替换 <i class="ri-blogger-line"></i>

替换index.html中的<i class="ri-blogger-line"></i>即可

依赖项目

https://github.com/metowolf/MetingJS

协议说明

  • 允许: 免费使用、修改、分发(包括商业场景)
  • 禁止: 直接售卖软件或用于付费服务
  • 完整协议:LICENSE

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇