Hexo自定义案例 | Chow Bill's Blog

Question

Hexo自定义案例 | Chow Bill's Blog

Zhou-Bill opened this issue 4 years ago · comments

Zhou Bill commented 4 years ago

https://zhou-bill.github.io/2020/07/09/hexo%E8%87%AA%E5%AE%9A%E4%B9%89/

Huang GengNan · Answer 1 · Mon Jul 20 2020 00:51:23 GMT+0800 (China Standard Time)

你好，请问你能够写一篇关于如何增加站内搜索功能以及文章阅读量功能的教程吗？

Zhou Bill · Answer 2 · Mon Jul 20 2020 11:14:23 GMT+0800 (China Standard Time)

@yellow0102
你好，请问你能够写一篇关于如何增加站内搜索功能以及文章阅读量功能的教程吗？

我已经更新了，另外阅读量可以看下这个issue里面自定义有写

Huang GengNan · Answer 3 · Mon Jul 20 2020 14:08:30 GMT+0800 (China Standard Time)

非常感谢你这么快就回复我！帮了我很大的忙！但是我在配置时遇到了一些困难，显示

/Users/yellow/myBlog/themes/hexo-theme-Chic-master/layout/_partial/search.ejs:7
<form class="form-search">
<input class="input" placeholder="搜索文章" autocomplete="off" id="<%= name %>-search-input" />
</form>

name is not defined

请问这个问题该如何解决呢？

Zhou Bill · Answer 4 · Mon Jul 20 2020 14:18:33 GMT+0800 (China Standard Time)

@yellow0102
非常感谢你这么快就回复我！帮了我很大的忙！但是我在配置时遇到了一些困难，显示
/Users/yellow/myBlog/themes/hexo-theme-Chic-master/layout/_partial/search.ejs:7
<form class="form-search">
<input class="input" placeholder="搜索文章" autocomplete="off" id="<%= name %>-search-input" />
</form>

name is not defined
请问这个问题该如何解决呢？

请往下看，这里修改Chic\layout\_partial\header.ejs,

<header>
    <nav class="navbar">
        <div class="container">
            <div class="navbar-header header-logo"><a href="<%- config.root %>"><%= theme.navname %></a></div>
            <div class="menu navbar-right">
                <!-- 这里表示的是pc端搜索框 -->
                <% var defaultName = 'pc' %>
                <%- partial('_partial/search', { name: defaultName }) %>
                <% for (var i in theme.nav){ %>
                    <a class="menu-item" href="<%- url_for(theme.nav[i]) %>"><%= i %></a>
                <% } %>
                <input id="switch_default" type="checkbox" class="switch_default">
                <label for="switch_default" class="toggleBtn"></label>
            </div>
        </div>
    </nav>

    <%# mobile %>
    <nav class="navbar-mobile" id="nav-mobile">
        <div class="container">
            <div class="navbar-header">
                <div>
                    <a href="<%- config.root %>"><%= theme.navname %></a><a id="mobile-toggle-theme">·&nbsp;Light</a>
                </div>
                <div class="navbar-mobile-right">
                    <% var type = 'mobile' %>
                    <%- partial('_partial/search', { name: type }) %>
                    <div class="menu-toggle" onclick="mobileBtn()">&#9776; 目录</div>
                </div>
                
            </div>
            <div class="menu" id="mobile-menu">
                <% for (var i in theme.nav){ %>
                    <a class="menu-item" href="<%- url_for(theme.nav[i]) %>"><%= i %></a>
                <% } %>
            </div>
        </div>
    </nav>

</header>

请注意注释的代码， name 就是这么传给 Chic/layout/_partial/search.ejs的，同理移动端也是一样,我这里贴出整个header吧

Huang GengNan · Answer 5 · Mon Jul 20 2020 17:15:56 GMT+0800 (China Standard Time)

非常感谢你的耐心指导！bug我已经解决了，是我在head.ejs错误地重复引用了一段代码。谢谢你！

Jackie Mao · Answer 6 · Thu Jul 23 2020 16:28:45 GMT+0800 (China Standard Time)

您好，非常感谢这个搜索功能的提供，但是我在安装过程中有点问题，不知如何解决，烦请帮忙看下：
第一步就报错Chic\layout\layout.ejs有问题，但是这个文件我都没动过。
第二个问题，我是按照评论中你们的讨论，在header.ejs解决了在pc和mobile的插入代码，然后在head.ejs尾部加入了这个代码，但是似乎不太行，这里还得提一点，文中提到的“添加搜索框的js, 搜索代码”这串代码是放在header.ejs里面的吗？

<%# search %>

<% if(config.search && config.search.enable){ %>
    <%- partial('_plugins/search.ejs') %>
<% } %>

以下是报错：

ERROR D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\layout.ejs:4
    2| <html lang="<%= config.language %>">
    3| <head>
 >> 4|     <%- partial('_partial/head',{cache: true}) %>
    5| </head>
    6| <body>
    7|     <div class="wrapper">

D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\_partial\head.ejs:64
    62|
    63| <% if(config.search && config.search.enable){ %>
 >> 64|     <%- partial('_plugins/search.ejs') %>
    65| <% } %>
    66|

Partial _plugins/search.ejs does not exist. (in _partial\head.ejs)

Zhou Bill · Answer 7 · Thu Jul 23 2020 16:36:19 GMT+0800 (China Standard Time)

@maojinyuan
您好，非常感谢这个搜索功能的提供，但是我在安装过程中有点问题，不知如何解决，烦请帮忙看下：
第一步就报错Chic\layout\layout.ejs有问题，但是这个文件我都没动过。
第二个问题，我是按照评论中你们的讨论，在header.ejs解决了在pc和mobile的插入代码，然后在head.ejs尾部加入了这个代码，但是似乎不太行，这里还得提一点，文中提到的“添加搜索框的js, 搜索代码”这串代码是放在header.ejs里面的吗？
<%# search %>

<% if(config.search && config.search.enable){ %>
    <%- partial('_plugins/search.ejs') %>
<% } %>
以下是报错：
ERROR D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\layout.ejs:4
    2| <html lang="<%= config.language %>">
    3| <head>
 >> 4|     <%- partial('_partial/head',{cache: true}) %>
    5| </head>
    6| <body>
    7|     <div class="wrapper">

D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\_partial\head.ejs:64
    62|
    63| <% if(config.search && config.search.enable){ %>
 >> 64|     <%- partial('_plugins/search.ejs') %>
    65| <% } %>
    66|

Partial _plugins/search.ejs does not exist. (in _partial\head.ejs)

你好，我觉得应该是你没有创建 _plugins/search.ejs 这个就是 添加搜索框的js, 搜索代码那个js 代码.

Jackie Mao · Answer 8 · Thu Jul 23 2020 16:52:24 GMT+0800 (China Standard Time)

@Zhou-Bill
@maojinyuan
您好，非常感谢这个搜索功能的提供，但是我在安装过程中有点问题，不知如何解决，烦请帮忙看下：
第一步就报错Chic\layout\layout.ejs有问题，但是这个文件我都没动过。
第二个问题，我是按照评论中你们的讨论，在header.ejs解决了在pc和mobile的插入代码，然后在head.ejs尾部加入了这个代码，但是似乎不太行，这里还得提一点，文中提到的“添加搜索框的js, 搜索代码”这串代码是放在header.ejs里面的吗？
<%# search %>

<% if(config.search && config.search.enable){ %>
    <%- partial('_plugins/search.ejs') %>
<% } %>
以下是报错：
ERROR D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\layout.ejs:4
    2| <html lang="<%= config.language %>">
    3| <head>
 >> 4|     <%- partial('_partial/head',{cache: true}) %>
    5| </head>
    6| <body>
    7|     <div class="wrapper">

D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\_partial\head.ejs:64
    62|
    63| <% if(config.search && config.search.enable){ %>
 >> 64|     <%- partial('_plugins/search.ejs') %>
    65| <% } %>
    66|

Partial _plugins/search.ejs does not exist. (in _partial\head.ejs)
你好，我觉得应该是你没有创建 _plugins/search.ejs 这个就是 添加搜索框的js, 搜索代码那个js 代码.

非常感谢您这么快回复，前面问题得到了解决，但是出来的搜索框似乎不能点击，css样式好像也不对，您看这是哪方面出了问题呢？方便的话还烦请您看下我的blog主页https://maojinyuan.gitee.io/
谢谢~

Zhou Bill · Answer 9 · Thu Jul 23 2020 17:03:11 GMT+0800 (China Standard Time)

@maojinyuan
@Zhou-Bill
@maojinyuan
您好，非常感谢这个搜索功能的提供，但是我在安装过程中有点问题，不知如何解决，烦请帮忙看下：
第一步就报错Chic\layout\layout.ejs有问题，但是这个文件我都没动过。
第二个问题，我是按照评论中你们的讨论，在header.ejs解决了在pc和mobile的插入代码，然后在head.ejs尾部加入了这个代码，但是似乎不太行，这里还得提一点，文中提到的“添加搜索框的js, 搜索代码”这串代码是放在header.ejs里面的吗？
<%# search %>

<% if(config.search && config.search.enable){ %>
    <%- partial('_plugins/search.ejs') %>
<% } %>
以下是报错：
ERROR D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\layout.ejs:4
    2| <html lang="<%= config.language %>">
    3| <head>
 >> 4|     <%- partial('_partial/head',{cache: true}) %>
    5| </head>
    6| <body>
    7|     <div class="wrapper">

D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\_partial\head.ejs:64
    62|
    63| <% if(config.search && config.search.enable){ %>
 >> 64|     <%- partial('_plugins/search.ejs') %>
    65| <% } %>
    66|

Partial _plugins/search.ejs does not exist. (in _partial\head.ejs)
你好，我觉得应该是你没有创建 _plugins/search.ejs 这个就是 添加搜索框的js, 搜索代码那个js 代码.
非常感谢您这么快回复，前面问题得到了解决，但是出来的搜索框似乎不能点击，css样式好像也不对，您看这是哪方面出了问题呢？方便的话还烦请您看下我的blog主页https://maojinyuan.gitee.io/
谢谢~

的确是我文章写漏了，没有引用css 样式，请在 themes\Chic\source\css\style.styl 下引用search.css
@import "_lib/search.css", 另外就是那个图片问题，请在root 下的 _config.yml 配置 searchImg: /image/search.png , 下载图片, 另外请记得加载jquery

Jackie Mao · Answer 10 · Thu Jul 23 2020 20:25:18 GMT+0800 (China Standard Time)

@Zhou-Bill
@maojinyuan
@Zhou-Bill
@maojinyuan
您好，非常感谢这个搜索功能的提供，但是我在安装过程中有点问题，不知如何解决，烦请帮忙看下：
第一步就报错Chic\layout\layout.ejs有问题，但是这个文件我都没动过。
第二个问题，我是按照评论中你们的讨论，在header.ejs解决了在pc和mobile的插入代码，然后在head.ejs尾部加入了这个代码，但是似乎不太行，这里还得提一点，文中提到的“添加搜索框的js, 搜索代码”这串代码是放在header.ejs里面的吗？
<%# search %>

<% if(config.search && config.search.enable){ %>
    <%- partial('_plugins/search.ejs') %>
<% } %>
以下是报错：
ERROR D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\layout.ejs:4
    2| <html lang="<%= config.language %>">
    3| <head>
 >> 4|     <%- partial('_partial/head',{cache: true}) %>
    5| </head>
    6| <body>
    7|     <div class="wrapper">

D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\_partial\head.ejs:64
    62|
    63| <% if(config.search && config.search.enable){ %>
 >> 64|     <%- partial('_plugins/search.ejs') %>
    65| <% } %>
    66|

Partial _plugins/search.ejs does not exist. (in _partial\head.ejs)
你好，我觉得应该是你没有创建 _plugins/search.ejs 这个就是 添加搜索框的js, 搜索代码那个js 代码.
非常感谢您这么快回复，前面问题得到了解决，但是出来的搜索框似乎不能点击，css样式好像也不对，您看这是哪方面出了问题呢？方便的话还烦请您看下我的blog主页https://maojinyuan.gitee.io/
谢谢~
的确是我文章写漏了，没有引用css 样式，请在 themes\Chic\source\css\style.styl 下引用search.css
@import "_lib/search.css", 另外就是那个图片问题，请在root 下的 _config.yml 配置 searchImg: /image/search.png , 下载图片, 另外请记得加载jquery

您好，因为我是初学者，不是这块领域的，所以您说的还不是很懂，烦请多多赐教：

”在root下建立了image文件夹，把search.png放进去“的前提下，我在root下_config.yml配置了searchImg: /image/search.png，不管是放在外面，还是插入到search里面，好像都不生效呢？

另外，加载jquery是啥意思？我google了下，似乎我加载了，但是我不确定怎么判断是否加载了，能否教以下呢？

Zhou Bill · Answer 11 · Thu Jul 23 2020 20:48:32 GMT+0800 (China Standard Time)

@maojinyuan 是这样的，我刚刚看了你的网站，我在搜索的时候，提交的时候报了 $ is not define 我确认应该是没有加载到jquery 了，你可以在主题下面的 _config.yml 添加jquery，

关于图片，路径写错了，不好意思，应该是主题下面的 _config.yml

searchImg: /image/search.png
# scripts loaded in the end of the body
scripts:
  - /js/script.js
  - /js/tocbot.min.js
  - /js/jquery.min.js  # 添加jquery

另外需要修改 menu navbar 的样式Chic\source\css\layout.styl; 为了让搜索框还有其他menu 放同一行，请注意navbar-right;
只需要添加navbar-right就可以了，我这里直接复制这个 navbar 的样式，可以进行替换

.navbar 
  height 4rem
  line-height 4rem
  width 100%
  .container 
    width auto
    max-width 1200px
    text-align center
    margin 0 auto
    display flex
    justify-content space-between
    .navbar-right
      display flex
      flex-direction row
      align-items center

Corrine · Answer 12 · Fri Dec 18 2020 15:23:56 GMT+0800 (China Standard Time)

您好，想請您幫我看看我的網站無法搜尋的原因，謝謝您。

https://tucorrine.github.io/

Zhou Bill · Answer 13 · Fri Dec 18 2020 15:26:32 GMT+0800 (China Standard Time)

您好，想請您幫我看看我的網站無法搜尋的原因，謝謝您。

https://tucorrine.github.io/

我觉得你是没有引用jquery. 控制台报错了

Corrine · Answer 14 · Fri Dec 18 2020 16:58:55 GMT+0800 (China Standard Time)

@Zhou-Bill

您好，想請您幫我看看我的網站無法搜尋的原因，謝謝您。

https://tucorrine.github.io/

我觉得你是没有引用jquery. 控制台报错了

謝謝您的快速回覆!!

我發現我沒有將jquery.min.js文件放入/themes/Chic/source/js/，感謝您所指出的錯誤~
同時也謝謝您寫了此篇教學文。

非常感恩。

Corrine · Answer 15 · Fri Dec 18 2020 19:44:37 GMT+0800 (China Standard Time)

您好，再次打擾，想請問使用手機打開網站、點下放大鏡搜尋鍵時，我的網站Menu的字會被吃掉，但您的卻不會。想向您詢問我的程式碼可能哪邊出了問題，謝謝您。

Zhou Bill · Answer 16 · Fri Dec 18 2020 21:58:03 GMT+0800 (China Standard Time)

您好，再次打擾，想請問使用手機打開網站、點下放大鏡搜尋鍵時，我的網站Menu的字會被吃掉，但您的卻不會。想向您詢問我的程式碼可能哪邊出了問題，謝謝您。

样式问题，明天看一下

Zhou Bill · Answer 17 · Sat Dec 19 2020 13:00:35 GMT+0800 (China Standard Time)

修改文件
\Chic\layout\_plugins\search.ejs

修改方法 searchToggle

     function searchToggle() {
        const width = $(document.body).width()
        if(width > 479) {
            return;
        }
        const search = $('.search');
        const searchForm = $('.form-search');
        const menuToggle = $('.menu-toggle');
        const title = $('.navbar-header-title ');

        if(!search.hasClass("mobile-search")) {
            search.addClass("mobile-search");
            menuToggle.addClass("open-search")
            title.addClass("mobile-title-hidden")
        } else {
            search.removeClass("mobile-search");
            menuToggle.removeClass("open-search")
            // title.css({visibility: 'visible'})
            title.removeClass("mobile-title-hidden")
        } 
    }

修改 Chic\source\css\_lib\search.css 样式文件

@media screen and (max-width: 479px) {
   /* 此处做了修改 */
    .mobile-title-hidden {
        transition: all 0.5s;
        transform: translateX(-300%);
    }
    .navbar-mobile-right {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .search .search-btn {
        cursor: pointer;
    }
    .search .form-search {
        display: none;
    }
    .mobile-search {
        transition: width 0.3s;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 50px;
        padding-left: 15px;
        background: transparent;
        height: 80px;
        display: flex;
        flex-direction: row;
        margin-right: 15px;
        box-sizing: border-box;
    }
    .mobile-search .form-search {
        display: block; 
        flex: 1;
    }
    .mobile-search .input {
        width: 100%;
    } 
   /* 此处做了修改 */
    .open-search {
        position: absolute;
        top: 0;
        right: 15px;
    }
}

应该就没问题了

Corrine · Answer 18 · Sat Dec 19 2020 21:52:48 GMT+0800 (China Standard Time)

@Zhou-Bill
修改文件
\Chic\layout\_plugins\search.ejs

修改方法 searchToggle

     function searchToggle() {
        const width = $(document.body).width()
        if(width > 479) {
            return;
        }
        const search = $('.search');
        const searchForm = $('.form-search');
        const menuToggle = $('.menu-toggle');
        const title = $('.navbar-header-title ');

        if(!search.hasClass("mobile-search")) {
            search.addClass("mobile-search");
            menuToggle.addClass("open-search")
            title.addClass("mobile-title-hidden")
        } else {
            search.removeClass("mobile-search");
            menuToggle.removeClass("open-search")
            // title.css({visibility: 'visible'})
            title.removeClass("mobile-title-hidden")
        } 
    }

修改 Chic\source\css\_lib\search.css 样式文件

@media screen and (max-width: 479px) {
   /* 此处做了修改 */
    .mobile-title-hidden {
        transition: all 0.5s;
        transform: translateX(-300%);
    }
    .navbar-mobile-right {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .search .search-btn {
        cursor: pointer;
    }
    .search .form-search {
        display: none;
    }
    .mobile-search {
        transition: width 0.3s;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 50px;
        padding-left: 15px;
        background: transparent;
        height: 80px;
        display: flex;
        flex-direction: row;
        margin-right: 15px;
        box-sizing: border-box;
    }
    .mobile-search .form-search {
        display: block; 
        flex: 1;
    }
    .mobile-search .input {
        width: 100%;
    } 
   /* 此处做了修改 */
    .open-search {
        position: absolute;
        top: 0;
        right: 15px;
    }
}

应该就没问题了

@Zhou-Bill
修改文件
\Chic\layout\_plugins\search.ejs

修改方法 searchToggle

     function searchToggle() {
        const width = $(document.body).width()
        if(width > 479) {
            return;
        }
        const search = $('.search');
        const searchForm = $('.form-search');
        const menuToggle = $('.menu-toggle');
        const title = $('.navbar-header-title ');

        if(!search.hasClass("mobile-search")) {
            search.addClass("mobile-search");
            menuToggle.addClass("open-search")
            title.addClass("mobile-title-hidden")
        } else {
            search.removeClass("mobile-search");
            menuToggle.removeClass("open-search")
            // title.css({visibility: 'visible'})
            title.removeClass("mobile-title-hidden")
        } 
    }

修改 Chic\source\css\_lib\search.css 样式文件

@media screen and (max-width: 479px) {
   /* 此处做了修改 */
    .mobile-title-hidden {
        transition: all 0.5s;
        transform: translateX(-300%);
    }
    .navbar-mobile-right {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .search .search-btn {
        cursor: pointer;
    }
    .search .form-search {
        display: none;
    }
    .mobile-search {
        transition: width 0.3s;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 50px;
        padding-left: 15px;
        background: transparent;
        height: 80px;
        display: flex;
        flex-direction: row;
        margin-right: 15px;
        box-sizing: border-box;
    }
    .mobile-search .form-search {
        display: block; 
        flex: 1;
    }
    .mobile-search .input {
        width: 100%;
    } 
   /* 此处做了修改 */
    .open-search {
        position: absolute;
        top: 0;
        right: 15px;
    }
}

应该就没问题了

感謝您的回覆!!

不好意思打擾您這麼多時間，目前我的問題仍存在著，希望您能再幫助我找到錯誤之處。
有空再回覆我即可，非常感謝您的解答!!!

lichen404 · Answer 19 · Wed Jan 20 2021 11:30:33 GMT+0800 (China Standard Time)

我的博客也用了这个主题，感觉还不错，不过要吐槽下这个字体。个别中文，比如“关”，还有中文的标点符号，感觉非常丑陋。

Zhou Bill · Answer 20 · Wed Jan 20 2021 11:33:42 GMT+0800 (China Standard Time)

@Zhou-Bill
修改文件
\Chic\layout\_plugins\search.ejs
修改方法 searchToggle

     function searchToggle() {
        const width = $(document.body).width()
        if(width > 479) {
            return;
        }
        const search = $('.search');
        const searchForm = $('.form-search');
        const menuToggle = $('.menu-toggle');
        const title = $('.navbar-header-title ');

        if(!search.hasClass("mobile-search")) {
            search.addClass("mobile-search");
            menuToggle.addClass("open-search")
            title.addClass("mobile-title-hidden")
        } else {
            search.removeClass("mobile-search");
            menuToggle.removeClass("open-search")
            // title.css({visibility: 'visible'})
            title.removeClass("mobile-title-hidden")
        } 
    }

修改 Chic\source\css\_lib\search.css 样式文件

@media screen and (max-width: 479px) {
   /* 此处做了修改 */
    .mobile-title-hidden {
        transition: all 0.5s;
        transform: translateX(-300%);
    }
    .navbar-mobile-right {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .search .search-btn {
        cursor: pointer;
    }
    .search .form-search {
        display: none;
    }
    .mobile-search {
        transition: width 0.3s;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 50px;
        padding-left: 15px;
        background: transparent;
        height: 80px;
        display: flex;
        flex-direction: row;
        margin-right: 15px;
        box-sizing: border-box;
    }
    .mobile-search .form-search {
        display: block; 
        flex: 1;
    }
    .mobile-search .input {
        width: 100%;
    } 
   /* 此处做了修改 */
    .open-search {
        position: absolute;
        top: 0;
        right: 15px;
    }
}

应该就没问题了

@Zhou-Bill
修改文件
\Chic\layout\_plugins\search.ejs
修改方法 searchToggle

     function searchToggle() {
        const width = $(document.body).width()
        if(width > 479) {
            return;
        }
        const search = $('.search');
        const searchForm = $('.form-search');
        const menuToggle = $('.menu-toggle');
        const title = $('.navbar-header-title ');

        if(!search.hasClass("mobile-search")) {
            search.addClass("mobile-search");
            menuToggle.addClass("open-search")
            title.addClass("mobile-title-hidden")
        } else {
            search.removeClass("mobile-search");
            menuToggle.removeClass("open-search")
            // title.css({visibility: 'visible'})
            title.removeClass("mobile-title-hidden")
        } 
    }

修改 Chic\source\css\_lib\search.css 样式文件

@media screen and (max-width: 479px) {
   /* 此处做了修改 */
    .mobile-title-hidden {
        transition: all 0.5s;
        transform: translateX(-300%);
    }
    .navbar-mobile-right {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .search .search-btn {
        cursor: pointer;
    }
    .search .form-search {
        display: none;
    }
    .mobile-search {
        transition: width 0.3s;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 50px;
        padding-left: 15px;
        background: transparent;
        height: 80px;
        display: flex;
        flex-direction: row;
        margin-right: 15px;
        box-sizing: border-box;
    }
    .mobile-search .form-search {
        display: block; 
        flex: 1;
    }
    .mobile-search .input {
        width: 100%;
    } 
   /* 此处做了修改 */
    .open-search {
        position: absolute;
        top: 0;
        right: 15px;
    }
}

应该就没问题了

感謝您的回覆!!

不好意思打擾您這麼多時間，目前我的問題仍存在著，希望您能再幫助我找到錯誤之處。
有空再回覆我即可，非常感謝您的解答!!!

太久没搞这个东西，最近太忙，我忘记了，具体做法是用jquery 去操作css 样式

Corrine · Answer 21 · Sun Jan 24 2021 20:35:32 GMT+0800 (China Standard Time)

@Zhou-Bill

@Zhou-Bill
修改文件
\Chic\layout\_plugins\search.ejs
修改方法 searchToggle

     function searchToggle() {
        const width = $(document.body).width()
        if(width > 479) {
            return;
        }
        const search = $('.search');
        const searchForm = $('.form-search');
        const menuToggle = $('.menu-toggle');
        const title = $('.navbar-header-title ');

        if(!search.hasClass("mobile-search")) {
            search.addClass("mobile-search");
            menuToggle.addClass("open-search")
            title.addClass("mobile-title-hidden")
        } else {
            search.removeClass("mobile-search");
            menuToggle.removeClass("open-search")
            // title.css({visibility: 'visible'})
            title.removeClass("mobile-title-hidden")
        } 
    }

修改 Chic\source\css\_lib\search.css 样式文件

@media screen and (max-width: 479px) {
   /* 此处做了修改 */
    .mobile-title-hidden {
        transition: all 0.5s;
        transform: translateX(-300%);
    }
    .navbar-mobile-right {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .search .search-btn {
        cursor: pointer;
    }
    .search .form-search {
        display: none;
    }
    .mobile-search {
        transition: width 0.3s;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 50px;
        padding-left: 15px;
        background: transparent;
        height: 80px;
        display: flex;
        flex-direction: row;
        margin-right: 15px;
        box-sizing: border-box;
    }
    .mobile-search .form-search {
        display: block; 
        flex: 1;
    }
    .mobile-search .input {
        width: 100%;
    } 
   /* 此处做了修改 */
    .open-search {
        position: absolute;
        top: 0;
        right: 15px;
    }
}

应该就没问题了

@Zhou-Bill
修改文件
\Chic\layout\_plugins\search.ejs
修改方法 searchToggle

     function searchToggle() {
        const width = $(document.body).width()
        if(width > 479) {
            return;
        }
        const search = $('.search');
        const searchForm = $('.form-search');
        const menuToggle = $('.menu-toggle');
        const title = $('.navbar-header-title ');

        if(!search.hasClass("mobile-search")) {
            search.addClass("mobile-search");
            menuToggle.addClass("open-search")
            title.addClass("mobile-title-hidden")
        } else {
            search.removeClass("mobile-search");
            menuToggle.removeClass("open-search")
            // title.css({visibility: 'visible'})
            title.removeClass("mobile-title-hidden")
        } 
    }

修改 Chic\source\css\_lib\search.css 样式文件

@media screen and (max-width: 479px) {
   /* 此处做了修改 */
    .mobile-title-hidden {
        transition: all 0.5s;
        transform: translateX(-300%);
    }
    .navbar-mobile-right {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .search .search-btn {
        cursor: pointer;
    }
    .search .form-search {
        display: none;
    }
    .mobile-search {
        transition: width 0.3s;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 50px;
        padding-left: 15px;
        background: transparent;
        height: 80px;
        display: flex;
        flex-direction: row;
        margin-right: 15px;
        box-sizing: border-box;
    }
    .mobile-search .form-search {
        display: block; 
        flex: 1;
    }
    .mobile-search .input {
        width: 100%;
    } 
   /* 此处做了修改 */
    .open-search {
        position: absolute;
        top: 0;
        right: 15px;
    }
}

应该就没问题了

感謝您的回覆!!

不好意思打擾您這麼多時間，目前我的問題仍存在著，希望您能再幫助我找到錯誤之處。
有空再回覆我即可，非常感謝您的解答!!!

太久没搞这个东西，最近太忙，我忘记了，具体做法是用jquery 去操作css 样式

您好，感謝您的幫助，目前我的blog在手機上呈現的畫面有好一些了(Menu不會跑版)!

目前的問題: 當按搜尋時時，Corrine的字不會消失...。

若您有空，再回我就好，非常感謝您的幫忙!!

Z · Answer 22 · Sun Mar 21 2021 12:08:30 GMT+0800 (China Standard Time)

修改文件
\Chic\layout\_plugins\search.ejs

修改方法 searchToggle

     function searchToggle() {
        const width = $(document.body).width()
        if(width > 479) {
            return;
        }
        const search = $('.search');
        const searchForm = $('.form-search');
        const menuToggle = $('.menu-toggle');
        const title = $('.navbar-header-title ');

        if(!search.hasClass("mobile-search")) {
            search.addClass("mobile-search");
            menuToggle.addClass("open-search")
            title.addClass("mobile-title-hidden")
        } else {
            search.removeClass("mobile-search");
            menuToggle.removeClass("open-search")
            // title.css({visibility: 'visible'})
            title.removeClass("mobile-title-hidden")
        } 
    }

修改 Chic\source\css\_lib\search.css 样式文件

@media screen and (max-width: 479px) {
   /* 此处做了修改 */
    .mobile-title-hidden {
        transition: all 0.5s;
        transform: translateX(-300%);
    }
    .navbar-mobile-right {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .search .search-btn {
        cursor: pointer;
    }
    .search .form-search {
        display: none;
    }
    .mobile-search {
        transition: width 0.3s;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 50px;
        padding-left: 15px;
        background: transparent;
        height: 80px;
        display: flex;
        flex-direction: row;
        margin-right: 15px;
        box-sizing: border-box;
    }
    .mobile-search .form-search {
        display: block; 
        flex: 1;
    }
    .mobile-search .input {
        width: 100%;
    } 
   /* 此处做了修改 */
    .open-search {
        position: absolute;
        top: 0;
        right: 15px;
    }
}

应该就没问题了

谢谢您的分享。我这边遇到移动端搜索框展开后title不会左移消失的问题，自己已经解决了，写下来供大家参考：

您的\Chic\layout\_plugins\search.ejs的方法 searchToggle中const title = $('.navbar-header-title ');末尾多了一个空格
还需要在/Chic/layout/_partial/header.ejs中的div处加上class="navbar-header-title"属性：

<div class="navbar-header-title">
                    <a href="<%- config.root %>"><%= theme.navname %></a><a id="mobile-toggle-theme">·&nbsp;Light</a>
</div>

甯谧 · Answer 23 · Tue Mar 29 2022 16:35:40 GMT+0800 (China Standard Time)

你下面的评论区403了..
想问问你在Chic/layout/_page 添加 algorithm.ejs那一块的源码是什么？你下面有一堆中文，这个要咋整？

Zhou Bill · Answer 24 · Tue Mar 29 2022 23:52:06 GMT+0800 (China Standard Time)

源码在release 里 @Myoontyee

甯谧 · Answer 25 · Thu Mar 31 2022 15:28:02 GMT+0800 (China Standard Time)

@Zhou-Bill
谢谢哥哥呜呜