Moonlightlnk Theme Customization

Customize the Moonlightlnk theme by applying custom CSS and enabling JavaScript permissions. The setup includse four key components: page CSS, sidebar announcement HTML/JS, header HTML, and footer HTML.

Page CSS Code

@font-face {
  font-family: 'CustomIcons';
  font-style: normal;
  font-weight: normal;
  src: url("//cdn.example.com/fonts/icon-font.eot") format('embedded-opentype'), 
       url("//cdn.example.com/fonts/icon-font.woff") format('woff'),
       url("//cdn.example.com/fonts/icon-font.ttf") format('truetype');
}

body {
  background: #f5f5f5;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

#main-container {
  width: 85%;
  margin: 50px auto;
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.post-header {
  border-left: 4px solid #2a7ae2;
  padding-left: 15px;
  margin: 25px 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #main-container {
    width: 95%;
    padding: 15px;
  }
}

Sidebar Announcement Code

<div class="sidebar-widget">
  <div id="digital-clock">
    <canvas id="clock-canvas" width="120" height="120"></canvas>
  </div>
</div>

<script src="//cdn.example.com/js/clock.js"></script>
<script>
// Auto-generate table of contents
$(function() {
  const headers = $('#post-content').find('h2, h3');
  const tocContainer = $('#toc-container');
  
  headers.each(function(index) {
    const header = $(this);
    header.attr('id', 'section-' + index);
    tocContainer.append(
      `<li><a href="#section-${index}">${header.text()}</a></li>`
    );
  });
});
</script>

Header HTML Code

<!-- Donation button integration -->
<script>
window.donationConfig = {
  paymentMethods: {
    wechat: { qrCode: "//cdn.example.com/qr/wechat.png" },
    alipay: { qrCode: "//cdn.example.com/qr/alipay.png" }
  }
};
</script>
<script src="//cdn.example.com/js/donation-widget.js"></script>

Footer HTML Code

<script>
// Initialize animations and remove unwanted elements
$(document).ready(function() {
  $('.post-title').addClass('animated fadeIn');
  $('.dislike-button').remove();
  
  // Back-to-top button functionality
  $('#back-to-top').click(function() {
    $('html, body').animate({ scrollTop: 0 }, 500);
  });
});
</script>

<div id="back-to-top">↑</div>