求助：为Jekyll搭建的企业博客实现读者内容评价插件

Hey there! Let me walk you through some practical ways to add reader ratings to your Jekyll enterprise blog. Since Jekyll’s a static site generator, we’ve got options ranging from zero-backend quick fixes to more robust setups that track global ratings—here’s what I recommend:

If you don’t need to aggregate global rating data (just want readers to mark their preference for their own reference), a JavaScript + localStorage setup works perfectly. It’s lightweight, no server required, and easy to drop into your Jekyll posts.

Here’s a quick implementation for a star rating system:
First, add this HTML to your post layout (inside the post content area):

<div class="star-rating">
  <span class="star" data-rating="1">★</span>
  <span class="star" data-rating="2">★</span>
  <span class="star" data-rating="3">★</span>
  <span class="star" data-rating="4">★</span>
  <span class="star" data-rating="5">★</span>
  <p>Your rating: <span id="user-rating">Not rated yet</span></p>
</div>

Then add this CSS to style the stars:

.star-rating .star {
  font-size: 2rem;
  color: #ddd;
  cursor: pointer;
}
.star-rating .star.active {
  color: #ffc107;
}

Finally, add this JavaScript to handle clicks and save to localStorage:

document.addEventListener('DOMContentLoaded', function() {
  const stars = document.querySelectorAll('.star-rating .star');
  const postId = '{{ page.id }}'; // Jekyll variable to get unique post ID
  const savedRating = localStorage.getItem(`rating_${postId}`);

  // Load saved rating if exists
  if (savedRating) {
    updateRatingDisplay(parseInt(savedRating));
  }

  // Add click handlers to stars
  stars.forEach(star => {
    star.addEventListener('click', function() {
      const rating = parseInt(this.dataset.rating);
      localStorage.setItem(`rating_${postId}`, rating);
      updateRatingDisplay(rating);
    });
  });

  function updateRatingDisplay(rating) {
    stars.forEach((star, index) => {
      if (index < rating) {
        star.classList.add('active');
      } else {
        star.classList.remove('active');
      }
    });
    document.getElementById('user-rating').textContent = `${rating}/5`;
  }
});

Pros: Zero backend setup, blazingly fast, works on any Jekyll host.
Cons: Ratings are per-user (stored in their browser), no global aggregate data. Great for internal blogs or sites where you don’t need to track overall post popularity.

If your blog is hosted on GitHub Pages, you can leverage GitHub Issues to track global ratings—this is a clever way to get persistent, aggregated data without running your own backend.

How it works: #

• Create a dedicated GitHub Issue for each blog post (you can automate this with a Jekyll script or create them manually).
• Use the GitHub API to read and submit "rating comments" (e.g., comments tagged with rating:like or rating:5star).
• Frontend JS fetches the number of ratings from the Issue and lets users submit their own (requires a GitHub account, which is great for internal enterprise teams).

Here’s a simplified example for a "like" button:

<button id="like-btn" class="like-button">Like (<span id="like-count">0</span>)</button>

document.addEventListener('DOMContentLoaded', async function() {
  const issueNumber = '{{ page.issue_number }}'; // Add this frontmatter variable to each post
  const repo = 'your-username/your-blog-repo';
  const likeCountEl = document.getElementById('like-count');
  const likeBtn = document.getElementById('like-btn');

  // Fetch existing likes (comments tagged with "rating:like")
  async function fetchLikes() {
    const response = await fetch(`https://api.github.com/repos/${repo}/issues/${issueNumber}/comments`);
    const comments = await response.json();
    const likes = comments.filter(comment => comment.body.includes('rating:like')).length;
    likeCountEl.textContent = likes;
  }

  // Submit a like comment
  likeBtn.addEventListener('click', async function() {
    // Note: For public repos, you'll need to handle authentication (OAuth) to let users submit comments
    // For internal enterprise repos, users may already be authenticated via GitHub
    const response = await fetch(`https://api.github.com/repos/${repo}/issues/${issueNumber}/comments`, {
      method: 'POST',
      headers: {
        'Authorization': `token ${userToken}`, // Handle user auth appropriately
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ body: 'rating:like' })
    });
    if (response.ok) {
      fetchLikes(); // Refresh count after submission
    }
  });

  // Initial load
  await fetchLikes();
});

Pros: Free, persistent global data, integrates with GitHub workflow.
Cons: Requires GitHub accounts for users to submit ratings, API rate limits apply (but manageable for most enterprise blogs).

If you need full control over rating data and don’t want to rely on third-party services, you can build a tiny backend to handle ratings. This works great if your enterprise has existing server infrastructure.

Quick setup with Node.js/Express: #

1. Build a simple Express server with endpoints to:
   • POST /api/ratings: Accept a post ID and rating value, store it in a database (SQLite, PostgreSQL, or even a JSON file for small sites).
   • GET /api/ratings/:postId: Return aggregated data (average rating, total votes) for a specific post.
2. In your Jekyll post layout, add frontend JS to call these endpoints:
   • Fetch and display the current aggregated rating.
   • Let users submit their rating via an AJAX request.

Pros: Complete control over data, no reliance on third parties, easy to customize (add reviews, anonymous ratings, etc.).
Cons: Requires maintaining a backend server, more initial setup work.

Quick Notes for Enterprise Use: #

• If your blog handles user data (even anonymous ratings), make sure to comply with your company’s privacy policies (GDPR, CCPA, etc.).
• Customize the styling of rating components to match your blog’s theme—keep it consistent with your enterprise brand.

内容的提问来源于stack exchange，提问作者Vitor Martin Bordini