구글 블로거 뒤로가기 새로고침 없이 이전 페이지 깡로드시키는 BFCache 기능 우회해서 구현.

브금용

어짜피 블로그 자체 검색기능 있으니까. 

과감하게 기존 가젯에서 삭제.

 

깡으로 눌럿던 계시글 주소를 색인시켜서

거기까지 로딩시켜서 뛰워주는 방식으로 개무식하게 구현했다.

 

이게 그나마 최?근 글은 좀 잘 작동(??) 하는 반면

 

심연에 쳐박힌곳까지 워프는 이게 깡웹의 한계로 

호스팅만 되고 멈춰버릴수가있다.

 

재대로 캐싱을 구현하기엔 여러므로 한계가 있었다.

 

쉽게 설명해서 블로거는 뒤로가기 누르면 

홈피드(가장 위로) 납치되버리는 문재가 있어서.

그걸 기존 신형 블로그들 처럼 탐방이 어려울것 같아서 손본거 ㅇㅇ 

공지) 신규 기능을 추가 해보았습니다!

에초에 무한 스크롤 기능 넣은 이유가

이런 단점을 커버 할랫는대 포스팅 한게 쌓이다보니 

원하는 계시글로 이동편하라고 넣은게 또 되려 발목을 잡아

해당 버튼을 추가해서 병목점을 나름대로 해결해보았음.

 

[ 핫키 + 뒤로가기 버튼 코드 ] 

<div id='p5-all-in-one-menu'>

  <div id='p5-hotkey-wrap'>
    
    <div id='p5-items-container'>

      <ul id='p5-menu-list'>

        <li><a class='p5-item odd' href='/search/label/공지사항'><span>NOTICE</span></a></li>
        <li><a class='p5-item even' href='/search/label/애니메이션 리뷰'><span>ANIME REVIEW</span></a></li>
        <li><a class='p5-item odd' href='/search/label/만화'><span>MANGA</span></a></li>
        <li><a class='p5-item even' href='/search/label/정발 만화 책갈피'><span>BOOKMARK</span></a></li>
        <li><a class='p5-item odd' href='/search/label/인터넷 던전 아이템 와드'><span>ITEM WARD</span></a></li>
        
        <li><a class='p5-item even' href='/search/label/PC 및 IT관련'><span>PC &amp; IT</span></a></li>

        <li><a class='p5-item odd' href='/search/label/게임 관련'><span>GAMING</span></a></li>
        <li><a class='p5-item even' href='/search/label/스노%20AI'><span>SUNO AI</span></a></li>
        <li><a class='p5-item odd' href='/search/label/유튜브 클립(덕질용)'><span>YT CLIP</span></a></li>

      </ul>

    </div>

    <div id='p5-control-panel'>

      <div id='p5-return-btn'>
        <div class='p5-return-main'>↩</div>
        <div class='p5-return-sub'>BACK</div>
      </div>

      <div id='p5-hotkey-btn' onclick='toggleP5Menu()'>
        <span class='hotkey-text'>HOTKEY</span>
      </div>

    </div>

  </div>

</div>

<div id='return-float-msg'>↩ 마지막 위치 복귀</div>

<style>
/* 🔥 디자인 최적화 (가독성을 위해 압축 유지) */
#p5-all-in-one-menu{ font-family:'Arial Black',sans-serif; }
#p5-hotkey-wrap{ position:fixed; bottom:30px; right:30px; z-index:999999; display:flex; justify-content:flex-end; width:auto; visibility:visible; opacity:1; }
#p5-control-panel{ display:flex; align-items:center; gap:12px; }

/* HOTKEY */
#p5-hotkey-btn{ width:130px; height:55px; background:#ff0000; border-radius:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; border:3px solid #000; transition:0.3s; box-shadow: 0 4px 15px rgba(255,0,0,0.4); }
.hotkey-text{ color:#fff; font-size:1.1rem; font-style:italic; font-weight:900; text-shadow:2px 2px 0 #000; }
#p5-hotkey-btn:hover{ transform:scale(1.05); background:#fff; }
#p5-hotkey-btn:hover .hotkey-text{ color:#000; text-shadow:none; }

/* BACK BUTTON */
#p5-return-btn{ width:58px; height:58px; border-radius:50%; background:#ff0000; border:3px solid #000; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:0.25s; overflow:hidden; box-shadow: 0 4px 15px rgba(255,0,0,0.4); }
#p5-return-btn::before{ content:''; position:absolute; width:140%; height:140%; background: radial-gradient(rgba(255,255,255,0.2), transparent 70%); animation:p5Pulse 2.5s infinite; }
.p5-return-main{ position:relative; color:#fff; font-size:18px; font-weight:900; line-height:1; z-index:2; text-shadow:1.5px 1.5px 0 #000; }
.p5-return-sub{ position:relative; color:#fff; font-size:10px; font-style:italic; font-weight:900; letter-spacing:-0.5px; margin-top:-1px; z-index:2; text-shadow:1.5px 1.5px 0 #000; }
#p5-return-btn:hover{ transform: scale(1.08) rotate(-4deg); background:#fff; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
#p5-return-btn:hover .p5-return-main, #p5-return-btn:hover .p5-return-sub { color:#000; text-shadow:none; }
#p5-return-btn:active{ transform:scale(0.92); }

/* ALARM POPUP */
#return-float-msg{ position:fixed; right:35px; bottom:105px; z-index:9999999; background: linear-gradient(145deg, rgba(0,0,0,0.96), rgba(25,25,25,0.96)); color:#fff; border-left:6px solid #ff0000; padding: 12px 18px; font-size:13px; font-weight:900; letter-spacing:0.5px; opacity:0; transform: translateY(10px) skewX(-10deg); pointer-events:none; transition:0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 0 18px rgba(0,0,0,0.45); }
#return-float-msg.show{ opacity:1; transform: translateY(0) skewX(-10deg); }
#return-float-msg.warning-flash { border-left-color: #ffff00; animation: p5Shake 0.4s ease-in-out; box-shadow: 0 0 25px rgba(255, 0, 0, 0.6); }

/* MENU ITEMS */
#p5-items-container{ position:absolute; bottom:85px; right:0; opacity:0; visibility:hidden; pointer-events:none; max-height:75vh; overflow-y:auto; padding:10px; direction:rtl; }
.p5-item{ display:inline-block; padding:12px 35px; margin-bottom:8px; font-weight:900; transform: skewX(-15deg) translateX(250%) scale(0.8); opacity:0; visibility:hidden; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-decoration:none; border-left:10px solid #fff; white-space:nowrap; font-size:0.95rem; }
.p5-item span{ display:inline-block; transform:skewX(15deg); }
.p5-item.odd{ background:#000; color:#fff; border-color:#ff0000; }
.p5-item.even{ background:#ff0000; color:#fff; border-color:#000; }
#p5-hotkey-wrap.active #p5-items-container{ opacity:1; visibility:visible; pointer-events:auto; }
#p5-hotkey-wrap.active .p5-item{ transform: skewX(-15deg) translateX(0%) scale(1); opacity:1; visibility:visible; }
.p5-item:hover{ background:#fff !important; color:#000 !important; transform: skewX(-15deg) scale(1.1) translateX(-10px); }
#p5-items-container::-webkit-scrollbar{ width:0; }

@keyframes p5Pulse{ 0%, 100%{ transform:scale(0.8); opacity:0.4; } 50%{ transform:scale(1.05); opacity:0.9; } }
@keyframes p5Shake { 0%, 100% { transform: translateY(0) skewX(-10deg); } 20%, 60% { transform: translateY(-4px) translateX(-4px) skewX(-10deg); } 40%, 80% { transform: translateY(4px) translateX(4px) skewX(-10deg); } }

@media(max-width:768px){
  #p5-hotkey-wrap{ right:10px !important; bottom:15px !important; }
  #p5-hotkey-btn{ width:105px; height:48px; }
  .hotkey-text{ font-size:0.9rem; }
  #p5-return-btn{ width:50px; height:50px; }
  #return-float-msg{ right:12px; bottom:82px; font-size:11px; padding:10px 14px; }
}
</style>

<script>
// <![CDATA[
function toggleP5Menu(){
  const wrap = document.getElementById('p5-hotkey-wrap');
  if(wrap){ wrap.classList.toggle('active'); }
}

document.addEventListener('click', (e) => {
  const a = e.target.closest('a');
  if(a && a.href && a.href.includes('.html')){
    localStorage.setItem('lastPostUrl', a.href);
  }
});

const returnBtn = document.getElementById('p5-return-btn');
const floatMsg = document.getElementById('return-float-msg');
let returnClickState = false;

returnBtn.addEventListener('mouseenter', () => {
  if(!returnClickState){
    floatMsg.innerHTML = '↩ 마지막 위치 복귀';
    floatMsg.classList.remove('warning-flash');
    floatMsg.classList.add('show');
  }
});

returnBtn.addEventListener('mouseleave', () => {
  if(!returnClickState){ floatMsg.classList.remove('show'); }
});

returnBtn.addEventListener('click', () => {
  returnClickState = true;
  floatMsg.innerHTML = '🚨 TRACKING... 연결될 때까지 연타!';
  floatMsg.classList.add('show');
  floatMsg.classList.add('warning-flash');
  setTimeout(() => {
    returnClickState = false;
    floatMsg.classList.remove('show');
    floatMsg.classList.remove('warning-flash');
  }, 2200);
});

document.getElementById('p5-return-btn').addEventListener('click', async () => {
  const url = localStorage.getItem('lastPostUrl');
  if(!url) return;
  if(location.pathname.includes('.html')){
    localStorage.setItem('triggerRestore', 'true');
    location.href='/';
    return;
  }
  await restoreLastPost();
});

async function restoreLastPost(){
  const url = localStorage.getItem('lastPostUrl');
  if(!url) return;
  let target = null;
  let limit = 30;
  while(!target && limit > 0){
    target = document.querySelector(`a[href="${url}"]`);
    if(target) break;
    if(!window.loadNextPage) break;
    await window.loadNextPage();
    await new Promise(r => setTimeout(r,350));
    limit--;
  }
  if(target){
    target.scrollIntoView({ behavior:'smooth', block:'center' });
    target.style.transition='0.4s';
    target.style.boxShadow='0 0 30px rgba(255,255,255,0.95)';
    target.style.transform='scale(1.02)';
    setTimeout(() => {
      target.style.boxShadow='';
      target.style.transform='';
    },1800);
  }
}

window.addEventListener('load', () => {
  const trigger = localStorage.getItem('triggerRestore');
  if(trigger === 'true'){
    localStorage.removeItem('triggerRestore');
    setTimeout(async () => { await restoreLastPost(); },1400);
  }
});
// ]]>
</script>