add blog search feature

app/assets/stylesheets/archives.scss

@@ -11,12 +11,22 @@
     margin-right: 1rem;
   }
 
+  .search-result-wrapper p {
+    font-size: 0.785rem;
+    color: #999;
+  }
+
   .blog-title {
     color: #111111;
     &:hover {
       color: red;
     }
     border: none;
+
+    em {
+      color: red;
+      font-style: normal;
+    }
   }
 
   li {

app/controllers/archives_controller.rb

@@ -1,5 +1,10 @@
 class ArchivesController < ApplicationController
   def index
+    if (@q = params[:q]).blank?
       @posts = Post.order(created_at: :desc).page(params[:page])
+    else
+      @q_size = Post.where('title like ?', "%#{@q}%").size
+      @posts = Post.where('title like ?', "%#{@q}%").order(created_at: :desc).page(params[:page])
+    end
   end
 end

app/helpers/application_helper.rb

@@ -1,3 +1,9 @@
 module ApplicationHelper
   # some format function is defined in app/controllers/application_controller.rb
+  #
+  def search_highlight(title, q)
+    return title if q.blank?
+
+    title.sub(q, "<em>#{q}</em>")
+  end
 end

app/views/archives/index.html.slim

@@ -3,9 +3,13 @@
 .row
   .small-12.large-9.large-centered.columns
     ul.archives-field
+      .search-wrapper
+        = form_with url: archives_path, method: 'GET' do |f|
+          = f.search_field :q, value: @q, placeholder: t('archive.search'), autofocus: @q.blank?
       - @posts.each do |post|
         li
-          = link_to post.title, blog_path(post), class: 'blog-title'
+          = link_to blog_path(post), class: 'blog-title' do
+            == search_highlight(post.title, @q)
           p.tags-field
             i.fi-calendar
             span
@@ -19,4 +23,7 @@
             i.fi-heart
             span
               = post.liked_count
-    = paginate @posts
+      - if @q.present?
+        .search-result-wrapper
+          p.text-muted 共 #{@q_size || 0} 条结果
+    = paginate @posts, q: @q

app/views/layouts/application.html.slim

@@ -55,6 +55,10 @@ html
                     = link_to t('head.timeline'), archives_path
                   li
                     = link_to t('head.about'), about_path
+                  li
+                    = link_to archives_path do
+                      span
+                        i.fi-magnifying-glass
             - flash.each do |name, msg|
               - if msg.is_a?(String)
                 div class=("callout #{name.to_sym == :notice ? "success" : "alert"}") data-closable=""

config/locales/en.yml

@@ -55,6 +55,9 @@ en:
     publish_success: 'Publish Successfully'
     publish_fail: 'Publish Failed'
 
+  archive:
+    search: 'Search'
+
   admin:
     new_post: 'New Post'
     posts: 'Manage Posts'

config/locales/zh-CN.yml

@@ -55,6 +55,9 @@ zh-CN:
     publish_success: '发表成功'
     publish_fail: '发表失败'
 
+  archive:
+    search: '搜索博客标题'
+
   admin:
     new_post: '新建博客'
     posts: '博客管理'