update views numbers

Author: Yixun-Hu

_data/view_counts.yml

@@ -0,0 +1,7 @@
+# Blog Post View Counts
+# This file stores view counts for blog posts
+# Format: post_slug: view_count
+
+# Example entries (will be populated by JavaScript)
+# 2025-10-22-probability-for-ml: 0
+# 2025-10-23-hill-climbing-search: 0

_layouts/post.liquid

@@ -21,6 +21,7 @@ layout: default
       {% if page.author %}by {{ page.author }}{% endif %}
       {% if page.last_updated %}, last updated on {{ page.last_updated | date: '%B %d, %Y' }}{% endif %}
       {% if page.meta %}• {{ page.meta }}{% endif %}
+      {% if url_beginning == '/blog/' %}• <span id="view-counter" class="view-counter">0 views</span>{% endif %}
     </p>
     <p class="post-tags">
       {% if url_beginning == '/blog/' %}
@@ -94,3 +95,7 @@ layout: default
     {% include giscus.liquid %}
   {% endif %}
 </div>
+
+{% if url_beginning == '/blog/' %}
+<script src="{{ '/assets/js/view-counter.js' | relative_url }}"></script>
+{% endif %}

_pages/blog.md

@@ -84,6 +84,7 @@ pagination:
   {{ read_time }} min read   ·  
   <a href="{{ year | prepend: '/blog/' | relative_url }}">
     <i class="fa-solid fa-calendar fa-sm"></i> {{ year }} </a>
+  &nbsp; &middot; &nbsp; <span id="view-counter-{{ post.slug }}" class="view-counter">0 views</span>
 </p>
 </div>
 </div>
@@ -140,6 +141,7 @@ pagination:
         {% if post.external_source %}
         &nbsp; &middot; &nbsp; {{ post.external_source }}
         {% endif %}
+        &nbsp; &middot; &nbsp; <span id="view-counter-{{ post.slug }}" class="view-counter">0 views</span>
       </p>
       <p class="post-tags">
         <a href="{{ year | prepend: '/blog/' | relative_url }}">
@@ -186,3 +188,19 @@ pagination:
 
 </div>
 
+<script src="{{ '/assets/js/view-counter.js' | relative_url }}"></script>
+<script>
+// Load view counts for all posts on blog page
+document.addEventListener('DOMContentLoaded', function() {
+    if (window.viewCounter) {
+        // Get all post slugs from the page
+        const postElements = document.querySelectorAll('[id^="view-counter-"]');
+        postElements.forEach(function(element) {
+            const postSlug = element.id.replace('view-counter-', '');
+            const viewCount = window.viewCounter.getViewCount(postSlug);
+            element.textContent = `${viewCount} view${viewCount !== 1 ? 's' : ''}`;
+        });
+    }
+});
+</script>
+

_posts/2025-10-23-hill-climbing-search.md

@@ -89,5 +89,5 @@ Use keyboard shortcuts:
 
 ## References
 
-- [Predicate Invention for Bilevel Planning](https://arxiv.org/abs/2203.09634). Silver*, Chitnis*, Kumar, McClinton, Lozano-Perez, Kaelbling, Tenenbaum. AAAI 2023.
+- [Predicate Invention for Bilevel Planning](https://arxiv.org/abs/2203.09634). Silver\*, Chitnis\*, Kumar, McClinton, Lozano-Perez, Kaelbling, Tenenbaum. AAAI 2023.
 

assets/css/main.scss

@@ -23,3 +23,20 @@ $max-content-width: {{ site.max_width }};
   "tabler-icons/tabler-icons-filled.scss",
   "tabler-icons/tabler-icons-outline.scss"
 ;
+
+// View Counter Styles
+.view-counter {
+  color: #666;
+  font-size: 0.9em;
+  font-weight: 500;
+  
+  &::before {
+    content: "👁️ ";
+    margin-right: 2px;
+  }
+}
+
+.post-meta .view-counter {
+  color: #888;
+  font-size: 0.85em;
+}

assets/js/view-counter.js

@@ -0,0 +1,76 @@
+// View Counter for Blog Posts
+// Tracks page views and stores them in localStorage
+
+class ViewCounter {
+    constructor() {
+        this.storageKey = 'blog_view_counts';
+        this.currentPost = this.getCurrentPostSlug();
+        this.init();
+    }
+
+    getCurrentPostSlug() {
+        // Extract post slug from URL
+        const path = window.location.pathname;
+        const match = path.match(/\/blog\/(\d{4}-\d{2}-\d{2}-[^\/]+)/);
+        return match ? match[1] : null;
+    }
+
+    init() {
+        if (this.currentPost) {
+            this.incrementViewCount();
+            this.updateViewDisplay();
+        }
+    }
+
+    getViewCounts() {
+        try {
+            const stored = localStorage.getItem(this.storageKey);
+            return stored ? JSON.parse(stored) : {};
+        } catch (e) {
+            console.warn('Could not load view counts from localStorage:', e);
+            return {};
+        }
+    }
+
+    setViewCounts(counts) {
+        try {
+            localStorage.setItem(this.storageKey, JSON.stringify(counts));
+        } catch (e) {
+            console.warn('Could not save view counts to localStorage:', e);
+        }
+    }
+
+    incrementViewCount() {
+        const counts = this.getViewCounts();
+        counts[this.currentPost] = (counts[this.currentPost] || 0) + 1;
+        this.setViewCounts(counts);
+    }
+
+    getViewCount(postSlug) {
+        const counts = this.getViewCounts();
+        return counts[postSlug] || 0;
+    }
+
+    updateViewDisplay() {
+        const viewCount = this.getViewCount(this.currentPost);
+        const viewElement = document.getElementById('view-counter');
+        if (viewElement) {
+            viewElement.textContent = `${viewCount} view${viewCount !== 1 ? 's' : ''}`;
+        }
+    }
+
+    // Method to get all view counts for blog listing
+    getAllViewCounts() {
+        return this.getViewCounts();
+    }
+}
+
+// Initialize view counter when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    window.viewCounter = new ViewCounter();
+});
+
+// Export for use in other scripts
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = ViewCounter;
+}