Hexo自定义案例 | Chow Bill's Blog #17
Comments
|
你好，请问你能够写一篇关于如何增加站内搜索功能以及文章阅读量功能的教程吗？ |
我已经更新了，另外阅读量 可以 看下这个issue里面自定义有写 |
|
非常感谢你这么快就回复我！帮了我很大的忙！但是我在配置时遇到了一些困难，显示 请问这个问题该如何解决呢？ |
请往下看， 这里修改 <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">· Light</a>
</div>
<div class="navbar-mobile-right">
<% var type = 'mobile' %>
<%- partial('_partial/search', { name: type }) %>
<div class="menu-toggle" onclick="mobileBtn()">☰ 目录</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 就是这么传给 |
|
非常感谢你的耐心指导！bug我已经解决了，是我在head.ejs错误地重复引用了一段代码。谢谢你！ |
|
您好，非常感谢这个搜索功能的提供，但是我在安装过程中有点问题，不知如何解决，烦请帮忙看下： 以下是报错： |
你好，我觉得应该是你没有创建 |
非常感谢您这么快回复，前面问题得到了解决，但是出来的搜索框似乎不能点击，css样式好像也不对，您看这是哪方面出了问题呢？方便的话还烦请您看下我的blog主页https://maojinyuan.gitee.io/ |
的确是我文章写漏了， 没有引用css 样式， 请在 |
您好，因为我是初学者，不是这块领域的，所以您说的还不是很懂，烦请多多赐教： ”在root下建立了image文件夹，把search.png放进去“的前提下，我在root下_config.yml配置了searchImg: /image/search.png，不管是放在外面，还是插入到search里面，好像都不生效呢？ 另外，加载jquery是啥意思？我google了下，似乎我加载了，但是我不确定怎么判断是否加载了，能否教以下呢？ |
|
@maojinyuan 是这样的，我刚刚看了你的网站， 我在搜索的时候，提交的时候报了 关于 图片，路径写错了，不好意思， 应该是主题下面的 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 的样式 .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 |
|
您好，想請您幫我看看我的網站無法搜尋的原因，謝謝您。 |
我觉得你是没有引用jquery. 控制台报错了 |
謝謝您的快速回覆!! 我發現我沒有將jquery.min.js文件放入/themes/Chic/source/js/，感謝您所指出的錯誤~ 非常感恩。 |
|
您好，再次打擾，想請問使用手機打開網站、點下放大鏡搜尋鍵時，我的網站Menu的字會被吃掉，但您的卻不會。想向您詢問我的程式碼可能哪邊出了問題，謝謝您。 |
样式问题，明天看一下 |
|
修改文件 修改方法 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")
}
}修改 @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的字不會消失...。 若您有空，再回我就好，非常感謝您的幫忙!! |
谢谢您的分享。我这边遇到移动端搜索框展开后title不会左移消失的问题，自己已经解决了，写下来供大家参考：
|
|
你下面的评论区403了..
|
|
源码在release 里 @Myoontyee |
|
@Zhou-Bill |
https://zhou-bill.github.io/2020/07/09/hexo%E8%87%AA%E5%AE%9A%E4%B9%89/
The text was updated successfully, but these errors were encountered: