2022年圣诞节祝愿 | 源码汇总 | 10套精美模板

index.html

修改网页标题，第7行

    <title>猪猪 ♥ 圣诞节快乐</title>

修改选择的音乐，第109行

    <div id="overlay">
        <ul>
            <li class="title">请选择BGM</li>
            <li>
                <button class="btn" id="btnA" type="button">
                    Last Christmas
                </button>
            </li>
            <li><button class="btn" id="btnB" type="button">All I Want for Christmas Is You</button></li>
            <li><button class="btn" id="btnC" type="button">Jingle Bells</button></li>
            <li><button class="btn" id="btnD" type="button">圣诞</button></li>
            <li class="separator">或者</li>
            <li>
                <input type="file" id="upload" hidden />
                <label for="upload">上传自定义BGM</label>
            </li>
        </ul>
    </div>

以及默认预置的音乐地址，第242行

        function loadAudio(i) {
            document.getElementById("overlay").innerHTML =
                '<div class="text-loading">正在处理，请稍等...</div>';
            const files = [
                "https://v.pigsec.cn/Last%20Christmas.m4a",
                "https://v.pigsec.cn/All%20I%20Want%20for%20Christmas%20Is%20You.m4a",
                "https://v.pigsec.cn/Jingle%20Bells.m4a",
                "https://v.pigsec.cn/%E5%9C%A3%E8%AF%9E.m4a"];
 
            const file = files[i];
 
            const loader = new THREE.AudioLoader();
            loader.load(file, function (buffer) {
                audio.setBuffer(buffer);
                audio.play();
                analyser = new THREE.AudioAnalyser(audio, fftSize);
                init();
            });
 
 
 
 
        }

index.html

修改标题，第7行

    <title>猪猪 ♥ 圣诞快乐</title>

修改页面中的祝福词，第27行

        <span>猪猪 ♥ 圣诞快乐</span>

index.html

您可以修改标题，代码第8行

    <title>猪猪 ♥ 圣诞快乐</title>

拆开信封的提示词，第1070行

            <h1 style="text-align: center;color:#de2f32">拆开你的圣诞信封</h1>

信件内容，第1074行

    <div class="message">
        <h1>祝你圣诞快乐</h1>
        <h2>永远爱你的猪猪♥</h2>
    </div>

本模板包含四套模板，首页其实是一个入口，然后分别调用的one、two、three、four文件夹的四个模板，请按需修改

index.html

修改标题，第12行

    <title>2022 圣诞快乐 | 猪猪 ♥</title>

第27行，可以自定义2个外部链接，譬如跳转自己的博客，或者其他页面

            <a class="christmas-message" href="https://www.pigsec.cn/" target="_blank"></a>
            <a class="stable" href="https://www.pigsec.cn/qun" target="_blank"></a>

底部文字，第31行

        <div class="close">
            <div class="from">from</div>
            <a class="link" id="appellation" href="https://www.pigsec.cn">FancyPig</a>
        </div>

如果你还想修改头部的提示词，您可以在js/index.js文件中第166行修改

let addLocationAndTime = function(){
	$.getJSON("https://ipapi.co/json", function(data){
		const placeString = [data.city, data.region, data.country_name].join(", ");

		timeZone = data.timezone;
		const languageString = data.languages;
		language = languageString.split(",")[0];
		const timeString = getTimeString(language, timeZone);

		const placeTimeAndGreetingString = "<div class='place-and-time'>现在是<span id='time'>" + timeString +"</span> 在 <span id='place'>" + placeString + "</span></div><div class='greeting'>希望你无论在哪里，圣诞都要快乐</div>";
		$(".place-time-and-greeting").html(placeTimeAndGreetingString);
	});
}

index.html

第7行，修改标题

    <title>2022圣诞快乐 | 猪猪 ♥ 模板</title>

第14行，修改自定义圣诞祝福

      <div class="content">
        <h1>圣诞节快乐</h1>
        <h2>
          愿你的圣诞节，分分秒秒，都是欢乐时光，尽享美酒佳肴
        </h2>
      </div>

index.html

第9行，修改标题

  <title>2022圣诞 | 给猪猪的礼物</title>

第145行，修改祝福文案

        <div id="typed-strings">
            <p> 情意绵绵，喜乐常。事事如意，人安康。风花雪月，圣诞至。祝福千万，表衷肠。家和兴旺，亲人吉祥，事业中天，学业辉煌。圣诞节快乐！</p>
        </div>

index.html

代码第5行，修改标题

  <title>猪猪2022 ♥ 圣诞快乐</title>

代码第50行，修改BGM

    <audio id="myMusic" src="https://v.pigsec.cn/We%20Wish%20You%20a%20Merry%20Christmas.m4a" loop=""></audio>

代码第7行，修改标题

    <title>2022圣诞快乐 ♥ 猪猪</title>

index.html

代码第8行，修改标题

    <title>猪猪圣诞 | 2022 Merry Christmas</title>

代码第16行，修改音乐

    <!-- 音乐播放器 （这里替换音乐） -->
    <audio class="xf_music" src="Jingle.mp3" autoplay="autoplay" loop="loop" controls="controls"></audio>

代码第83行，修改右侧视频

                <!-- 这里替换视频 -->
                <source src="Christmas-Animation.mp4" type="video/mp4">

左侧图片请进入img文件夹修改，按0001.webp到0040.webp命名