不老阁 11 分钟读完 (大约1648个字) 0次访问

hexo-theme-icarus 个性化调整

主题链接：ppoffice/hexo-theme-icarus: A simple, delicate, and modern theme for the static site generator Hexo. (github.com)

文章预览

  • 主页文章预览的默认效果是左侧显示一个「阅读更多」按钮，修改成左侧显示文章的标签+右侧显示「阅读更多」按钮。
    最终效果
  • 修改 layout/common/article.jsx 文件中的 {/* Tags */} 和 {/* "Read more" button */} 两部分代码
1
2
3
4
5
6
7
8
9
10
11
12
{/* Tags */}
<hr style="height:1px;margin:1rem 0"/>
<div className="level is-mobile is-flex">
  {page.tags && page.tags.length ? <div class="article-tags is-size-7 is-uppercase">
    <i class="fas fa-tags has-text-grey"></i>&nbsp;
    {page.tags.map((tag, index) => {
      return <a class="link-muted" rel="tag" href={url_for(tag.path)}>{tag.name}{index !== page.tags.length-1? ', ':''}</a>;
    })}
  </div> : null}
  {/* "Read more" button */}
  {index && page.excerpt ? <a class="article-more button is-small is-size-7" href={`${url_for(page.link || page.path)}#more`}><i class="fas fa-book-reader has-text-grey"></i>&nbsp;&nbsp;{__('article.more')}</a> : null}
</div>

文章页面双栏显示

  • 站点目录创建文件 _config.post.yml

TOC

修改默认字体

Umami 统计

  • 主题自带 GA 和百度统计，但是这两种方式都不方便分享统计结果。所以个人还是更加喜欢 Umami 统计，目前 Umami Cloud 可以免费试用，可以省去自己部署的麻烦。本博客的访问数据在 Blog Analytics。
  • 借助 hexo 注入器 将 Umami 的统计代码写到生成 html 页面的 <head> 标签中。在 icarus/scripts/injector.js 文件中添加一行：hexo.extend.injector.register('head_begin', '<script async defer data-website-id="your-umami-id" src="https://analytics.umami.is/script.js"></script>', 'default');

备案号

1
2
3
4
footer:
    # Links to be shown on the right of the footer section
    links:
        浙ICP备17004638号-1: https://beian.miit.gov.cn/#/Integrated/index

评论系统

相关文章/推荐文章

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const logger = require('hexo-log')();
const { Component } = require('inferno');
const view = require('hexo-component-inferno/lib/core/view');


module.exports = class extends Component {
    render() {
        const { config, helper, page } = this.props;
        const { __, popular_posts } = helper;
        let relatedText = popular_posts( {} , page )
        if (!relatedText || relatedText.length == 0) {
            return null;
        }
        return <div class="card">
            <div class="card-content">
                <h2>相关文章</h2>
                <span
            dangerouslySetInnerHTML={{__html:(relatedText) }}>
            </span>
            </div>
        </div>;
    }
};
  • 在 article.jsx 中添加一行 const Related = require('./related'); 导入上一步新增的 related 模块，然后再把 related 模块添加到 Donate 之后。
1
2
3
4
5
{/* Donate button */}
{/* {!index ? <Donates config={config} helper={helper} /> : null} */}
{/* Related Post*/}
{!index ? <Related config={config} page={page} helper={helper}/> :null}
{/* Post navigation */}

CDN 优化

提交搜索引擎

参考

网络回响

hexo-theme-icarus 个性化调整

https://blog.xiang578.com/post/logseq/109884.html

作者

Ryen Xiang

发布于

2026-02-17

更新于

2026-02-17

许可协议

 

相关文章

评论

关注我

最新文章

×