博客源码分享 - 辣椒の酱

[removeif]

https://removeif.github.io/theme/%E5%8D%9A%E5%AE%A2%E6%BA%90%E7%A0%81%E5%88%86%E4%BA%AB.html

说在前面博客在icarus主题之上参照各网友博客，以及自己的一些想法做出的一些修改以及增加部分新元素。膜拜和感谢所有模块的原作者,orz👻,辛苦了。

[ojhdt]

@removeif 已经尝试添加，其他js的重载情况良好，只有gallery.js失败，情况如下：

• 完整刷新网页时，点击图片时以新页面刷新单独打开图片。
• 使用Pjax部分刷新时，点击图片无反应 gallery.js与pjax启动代码与您提供的版本基本一致。具体情况可以访问我的博客

Pjax启动

<script>
function loadBusuanzi(){
    $.getScript("//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");
}

var pjax = new Pjax({
    elements: "a",
    selectors: [  
        ".section",
        "title"
    ],
    cache: false
})

document.addEventListener('pjax:send', function () {

});

document.addEventListener('pjax:complete', function () {
    $(".section").css({opacity:1});
    loadBusuanzi();
    loadBackToTop();
});
</script>

gallery.js

document.addEventListener('DOMContentLoaded', loadGallery());
function loadGallery() {
    if (typeof ($.fn.lightGallery) === 'function') {
        $('.article').lightGallery({ selector: '.gallery-item' });
    }
    if (typeof ($.fn.justifiedGallery) === 'function') {
        if ($('.justified-gallery > p > .gallery-item').length) {
            $('.justified-gallery > p > .gallery-item').unwrap();
        }
        $('.justified-gallery').justifiedGallery();
    }
}
$(document).on('pjax:end', function () { setTimeout(loadGallery) });

希望得到解答！万分感谢

[removeif]

@ojhdt 希望得到解答！万分感谢

main.js里会去加载图片，需要重新载入！

[ojhdt]

@removeif main.js里会去加载图片，需要重新载入！

也尝试引入了，无果

function loadMain($) {
    $('.article img:not(".not-gallery-item")').each(function () {
        // wrap images with link and add caption if possible
        ...
        });
    }
}
loadMain(jQuery);
$(document).on('pjax:end', function() { loadMain(jQuery) });

难道出现了语法问题？

[removeif]

@removeif main.js里会去加载图片，需要重新载入！

也尝试引入了，无果

function loadMain($) {
    $('.article img:not(".not-gallery-item")').each(function () {
        // wrap images with link and add caption if possible
        ...
        });
    }
}
loadMain(jQuery);
$(document).on('pjax:end', function() { loadMain(jQuery) });

难道出现了语法问题？

我不是你这样用的，也不太清楚这种用法，你可以尝试下我那样调用

[ojhdt]

@removeif

我不是你这样用的，也不太清楚这种用法，你可以尝试下我那样调用

尝试了您的调用方法，功能实现了，可是：

• 页面完全刷新时点击图片直接新页面开启
• Pjax部分刷新时正常在Lightgallery开启 这莫名其妙的状况让我无从下手啊啊

[removeif]

@removeif 我不是你这样用的，也不太清楚这种用法，你可以尝试下我那样调用

尝试了您的调用方法，功能实现了，可是：

• 页面完全刷新时点击图片直接新页面开启
• Pjax部分刷新时正常在Lightgallery开启 这莫名其妙的状况让我无从下手啊啊

尝试将gallery.js中代码粘贴到main.js可解决此问题，具体移放位置参考我主题代码中main.js中代码。

[nasaiboy]

你的博客很棒，可以加一下我的微信吗？微信18562620551

[removeif]

@nasaiboy 你的博客很棒，可以加一下我的微信吗？微信18562620551

谢谢，有什么问题请留言

[qmdx00]

如何关闭文章最后修改时间的显示。🥺🥺

[removeif]

@qmdx00 如何关闭文章最后修改时间的显示。🥺🥺

这个文件 93行到99行删了就好

[qmdx00]

@removeif

@qmdx00 如何关闭文章最后修改时间的显示。🥺🥺

这个文件 93行到99行删了就好

ok了，顺便一提，主页部分需要删除显示的话还要注释掉文件114～122行。

[zhu-weifeng]

请问点击阅读更多跳转页面之后页面会整体向下滚动一段距离是怎么解决的？

[removeif]

请问点击阅读更多跳转页面之后页面会整体向下滚动一段距离是怎么解决的？

源码中 把点击阅读跟多的跳转锚地#more去掉

[zhu-weifeng]

@removeif

请问点击阅读更多跳转页面之后页面会整体向下滚动一段距离是怎么解决的？

源码中 把点击阅读跟多的跳转锚地#more去掉

已解决，谢谢

[so1ve]

这个主题好像不需要ejs渲染器:D

[removeif]

@FFRaycoder 这个主题好像不需要ejs渲染器:D

嗯，现在不需要了

[lemonbigbig]

这个是信息流显示部分文章内容是怎么设置的，我的会自动显示整篇内容

[lemonbigbig]

@lemonbigbig 这个是信息流显示部分文章内容是怎么设置的，我的会自动显示整篇内容

解决了，谢谢博主的主题

[yang2048]

首页加个好看点的轮播图吧，然后加个配置是否开启。然后最新评论热门推荐支持一下Valine吧，

[removeif]

@yang2048 首页加个好看点的轮播图吧，然后加个配置是否开启。然后最新评论热门推荐支持一下Valine吧，

轮播图暂时没计划，可以参考下网友的https://dp2px.com/ 自己实现，最新评论热门推荐后面有空的时候支持一下Valine

[bugprogrammer]

请问文章详情页左侧栏怎么固定，还有邮件订阅的feedburner_id怎么获取？

[removeif]

@bugprogrammer 请问文章详情页左侧栏怎么固定，还有邮件订阅的feedburner_id怎么获取？

主题配置中以下是固定的

# Please be noted that a sidebar is only visible when it has at least one widget
sidebar:
    # Left sidebar configurations
    left:
        # Whether the sidebar sticks to the top when page scrolls
        sticky: true
    # Right sidebar configurations
    right:
        # Whether the sidebar sticks to the top when page scrolls
        sticky: false

邮件订阅的feedburner_id 自行百度Google FeedBurner

[wanghemeng]

您好，这是个非常不错的主题，在研究它的过程中学到了很多东西。 我有一个问题，每篇文章末尾的本文链接，虽然在您这里显示的是正确的地址，但是在我这里却显示的是yoursite.com/... 我看了下其他用您主题的博客好像也存在这个问题。 在追踪问题时发现是article.jsx中const myPermalink = config.url + config.root + page.path;这句话中的config.url不太对。 但由于实在是对这方面不太熟悉，也一直没能找到怎么修改，希望您可以提供帮助。

[removeif]

@LemonIceSprite 您好，这是个非常不错的主题，在研究它的过程中学到了很多东西。 我有一个问题，每篇文章末尾的本文链接，虽然在您这里显示的是正确的地址，但是在我这里却显示的是yoursite.com/... 我看了下其他用您主题的博客好像也存在这个问题。 在追踪问题时发现是article.jsx中const myPermalink = config.url + config.root + page.path;这句话中的config.url不太对。 但由于实在是对这方面不太熟悉，也一直没能找到怎么修改，希望您可以提供帮助。

博客配置文件中_config.yml(！不是主题配置文件_config.yml)的url 就是配置的你的网站地址，比如我的就配置 https://removeif.github.io/ ，你的是啥就配置啥

[wanghemeng]

@removeif

@LemonIceSprite 您好，这是个非常不错的主题，在研究它的过程中学到了很多东西。 我有一个问题，每篇文章末尾的本文链接，虽然在您这里显示的是正确的地址，但是在我这里却显示的是yoursite.com/... 我看了下其他用您主题的博客好像也存在这个问题。 在追踪问题时发现是article.jsx中const myPermalink = config.url + config.root + page.path;这句话中的config.url不太对。 但由于实在是对这方面不太熟悉，也一直没能找到怎么修改，希望您可以提供帮助。

博客配置文件中_config.yml(！不是主题配置文件_config.yml)的url 就是配置的你的网站地址，比如我的就配置 https://removeif.github.io/ ，你的是啥就配置啥

献丑了！

[mahiro424]

您好，使用了您的主题感觉非常好！！这里有两个不知道怎么解决的问题想请教一下您：1、为什么我在一个文章头加了加密所需的那些东西还是无法成为一个加密文件是什么愿意呢？2、我在主页的文章没有出现【阅读更多】的字样而是直接把文章所有的内容都加载出来了这又是为什么呢，该怎么设置呢？求解！！

[removeif]

@mahiro424 您好，使用了您的主题感觉非常好！！这里有两个不知道怎么解决的问题想请教一下您：1、为什么我在一个文章头加了加密所需的那些东西还是无法成为一个加密文件是什么愿意呢？2、我在主页的文章没有出现【阅读更多】的字样而是直接把文章所有的内容都加载出来了这又是为什么呢，该怎么设置呢？求解！！

1.博客的package.json替换成了本文中的内容了吗，替换后先 删除 node_modules 在npm install 了吗？

2. 文章适当位置加入 标签 <!-- more --> 注意完全一样，more前后有个空格

[mahiro424]

处理完毕!感谢答复！

------------------ 原始邮件 ------------------ 发件人: "辣椒の酱"<notifications@github.com>; 发送时间: 2020年4月15日(星期三) 晚上10:13 收件人: "removeif/blog_comment"<blog_comment@noreply.github.com>; 抄送: "大兔"<1069856632@qq.com>; "Mention"<mention@noreply.github.com>; 主题: Re: [removeif/blog_comment] 博客源码分享 - 辣椒の酱 (#59)

@mahiro424 您好，使用了您的主题感觉非常好！！这里有两个不知道怎么解决的问题想请教一下您：1、为什么我在一个文章头加了加密所需的那些东西还是无法成为一个加密文件是什么愿意呢？2、我在主页的文章没有出现【阅读更多】的字样而是直接把文章所有的内容都加载出来了这又是为什么呢，该怎么设置呢？求解！！

1.博客的package.json替换成了本文中的内容了吗，替换后先 删除 node_modules 在npm install 了吗？

2. 文章适当位置加入 标签 <!-- more --> 注意完全一样，more前后有个空格

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[ppdcxb]

楼主，为什么我到本地预览，出现错误呀？整个包下载下来才10兆左右

[ppdcxb]

浏览就显示

const { Component } = require('inferno'); const Head = require('./common/head'); const Navbar = require('./common/navbar'); const Widgets = require('./common/widgets'); const Footer = require('./common/footer'); const Scripts = require('./common/scripts'); const Search = require('./common/search'); const classname = require('./util/classname'); module.exports = class extends Component { render() { const { env, site, config, page, helper, body } = this.props; const{ comment } = config; // =====index hot_recommend var hotRecommendStr = "
" + "
" + "
热门推荐
åŠ è½½ä¸­ï¼Œç¨ç­‰å‡ ç§’..." + "
" + "
"; if (page.path != 'index.html' || (comment.type == 'undefined' || comment.type != 'gitalk' || comment.has_hot_recommend == 'undefined' || !comment.has_hot_recommend)) { hotRecommendStr = ''; } // ===== const language = page.lang || page.language || config.language; const columnCount = Widgets.getColumnCount(config.widgets); return
{ page.layout == 'page' || page.layout == 'post' ? null : }
; } }; 

我博客目录下的config.yml文件的theme后面填的icarus

theme: icarus

[removeif]

@ppdcxb 楼主，为什么我到本地预览，出现错误呀？整个包下载下来才10兆左右

先仔细读下这个issue 应该能解决问题

[hn1e13]

你好博主 我想请问下原生的icarus主题的个人界面social link的icon是怎么修改的 比方说我想添加qq和微信的icon

[removeif]

你好博主 我想请问下原生的icarus主题的个人界面social link的icon是怎么修改的 比方说我想添加qq和微信的icon

这个font-awesome网站上去找想要的图标，名称类似fab fa-dribbble，配置在原来的位置social link里

[ppoffice]

请问可以在Icarus的官方文档中添加本文的链接么？

文档地址：https://blog.zhangruipeng.me/hexo-theme-icarus/uncategorized/icarus%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/

[removeif]

请问可以在Icarus的官方文档中添加本文的链接么？

文档地址：https://blog.zhangruipeng.me/hexo-theme-icarus/uncategorized/icarus%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/

嗯嗯，可以可以，感谢您开源的主题代码🤝

[so1ve]

这个链接把你的博客弄不安全了，可以改成HTTPS的 http://github.com/ppoffice/hexo-theme-icarus github支持HTTPS 还有新浪图床

[removeif]

@FFRaycoder 这个链接把你的博客弄不安全了，可以改成HTTPS的 http://github.com/ppoffice/hexo-theme-icarus github支持HTTPS 还有新浪图床

嗯 问题不大

[osys]

博主，你好，我这边使用 valine 留言插件，可是不能够留言，是不是你这里修改了什么文件？我使用 Icarus 主题，同样的 valine 留言插件配置，不能显示评论插件，我使用你那样的配置，能够显示评论插件，却不能评论。不知道是有什么问题。

[osys]

就是我的博客有些文章可以评论，有些文章不能够评论，不知道为什么。 现在按照你的配置

 comment:
     type: valine
     app_id: XXXXXXXXX
     app_key: XXXXXXXXXX
     notify: false
     verify: false
     avatar: 'mp'
     placeholder: '留下您的高见！'
     has_latest_comment: true #是否有最新评论 true-有，false-无
     owner: 辣椒の酱 #博主名 最新评论标注[博主]
     required_fields: ['nick', 'mail', 'link']
     lang: en #zh-CN zh-TW en ja

我原本的配置是：

comment:
    type: valine
    app_id: XXXXXXXXX
    app_key: XXXXXXX
    # Valine 的初始化挂载器。可以是一个CSS 选择器，也可以是一个实际的HTML元素。
    el:
    # 评论框占位提示符。
    placeholder: 'Please enter your opinion.'
    # 当前文章页路径，用于区分不同的文章页，以保证正确读取该文章页下的评论列表。
    path: window.location.pathname
    # Gravatar 头像展示方式。/mp/identicon/monsterid/wavatar/robohash/retro/hide
    avatar: 'wavatar'
    # 评论者相关属性。
    meta: ['nick','mail','link']
    # 评论列表分页，每页条数。
    pageSize: 15
    # 多语言支持。默认zh-CN。（zh-CN、zh-TW、en、ja、自定义）
    lang: zh-CN
    # 文章访问量统计。
    # visitor: true
    # 代码高亮，默认开启，若不需要，就关闭
    highlight: false
    # 每次访问强制拉取最新的评论列表头像
    avatarForce: false
    # 是否记录评论者IP
    # recordIP: true
    # 该配置适用于国内自定义域名用户, 海外版本会自动检测(无需手动填写)
    serverURLs: 'http[s]://[tab/us].avoscloud.com'
    # 设置表情包CDN。设置Bilibili表情包地址
    emojiCDN: ''
    # 表情包映射（表情包）
    emojiMaps:
    # 是否启用昵称框自动获取QQ昵称和QQ头像, 默认关闭
    enableQQ: true
    # 设置必填项，默认匿名
    requiredFields: ['nick','mail']

[so1ve]

就是我的博客有些文章可以评论，有些文章不能够评论，不知道为什么。 现在按照你的配置

 comment:
     type: valine
     app_id: XXXXXXXXX
     app_key: XXXXXXXXXX
     notify: false
     verify: false
     avatar: 'mp'
     placeholder: '留下您的高见！'
     has_latest_comment: true #是否有最新评论 true-有，false-无
     owner: 辣椒の酱 #博主名 最新评论标注[博主]
     required_fields: ['nick', 'mail', 'link']
     lang: en #zh-CN zh-TW en ja

我原本的配置是：

comment:
    type: valine
    app_id: XXXXXXXXX
    app_key: XXXXXXX
    # Valine 的初始化挂载器。可以是一个CSS 选择器，也可以是一个实际的HTML元素。
    el:
    # 评论框占位提示符。
    placeholder: 'Please enter your opinion.'
    # 当前文章页路径，用于区分不同的文章页，以保证正确读取该文章页下的评论列表。
    path: window.location.pathname
    # Gravatar 头像展示方式。/mp/identicon/monsterid/wavatar/robohash/retro/hide
    avatar: 'wavatar'
    # 评论者相关属性。
    meta: ['nick','mail','link']
    # 评论列表分页，每页条数。
    pageSize: 15
    # 多语言支持。默认zh-CN。（zh-CN、zh-TW、en、ja、自定义）
    lang: zh-CN
    # 文章访问量统计。
    # visitor: true
    # 代码高亮，默认开启，若不需要，就关闭
    highlight: false
    # 每次访问强制拉取最新的评论列表头像
    avatarForce: false
    # 是否记录评论者IP
    # recordIP: true
    # 该配置适用于国内自定义域名用户, 海外版本会自动检测(无需手动填写)
    serverURLs: 'http[s]://[tab/us].avoscloud.com'
    # 设置表情包CDN。设置Bilibili表情包地址
    emojiCDN: ''
    # 表情包映射（表情包）
    emojiMaps:
    # 是否启用昵称框自动获取QQ昵称和QQ头像, 默认关闭
    enableQQ: true
    # 设置必填项，默认匿名
    requiredFields: ['nick','mail']

F12查看报错

[chenjs01]

太棒了，学习了

[exceting]

你好，我在文章头部加了top: -1，为什么大首页这个文章还排在第一的位置呢？

[removeif]

你好，我在文章头部加了top: -1，为什么大首页这个文章还排在第一的位置呢？

readme.md说明中的这个文件修改成相应的了吗？

[jingcoder]

很赞

[exceting]

你好，请问thumbnail控制的文章封面，可以调整图片高度吗？我觉得现在的实在是太高了。。

[removeif]

你好，请问thumbnail控制的文章封面，可以调整图片高度吗？我觉得现在的实在是太高了。。

你可以，右键审查元素找到对应的css节点，自己把高度改小一点

[exceting]

@removeif

你好，请问thumbnail控制的文章封面，可以调整图片高度吗？我觉得现在的实在是太高了。。

你可以，右键审查元素找到对应的css节点，自己把高度改小一点

好的，谢谢~

[Kurtknopfler]

您好！很感谢您分享的源码！想问一下每篇文章的字数统计、阅读时长、分类、标签之类的信息，前面的小图标是如何设置的呢？我用的icarus自带的显示阅读时长及字数就只有文字描述，没有这种很精美的小图标，但是又不知道在哪里修改，您写的源码我目前也不太能看懂，希望指点一下

[removeif]

您好！很感谢您分享的源码！想问一下每篇文章的字数统计、阅读时长、分类、标签之类的信息，前面的小图标是如何设置的呢？我用的icarus自带的显示阅读时长及字数就只有文字描述，没有这种很精美的小图标，但是又不知道在哪里修改，您写的源码我目前也不太能看懂，希望指点一下

其实就是把描述换成了对应的图标，具体更改的diff可以参考下这个提交

[duskandwine]

您好。每次发布新的文章评论都需要手动初始化，请问有自动初始化的办法吗？