hexo博客改进记录
发表blog12 分钟读完 (大约1743个字)0次访问

hexo博客改进记录

原来修改了什么已经忘记了，但是新修改的可以记录一下。

主要包括固定导航栏、gitalk 评论排列、添加新的自定义页面、修改组件、主页面宽度、归档时间轴页添加年份生肖图标、多端同步与客制化（shift+F5）

固定导航栏

在 hexo-theme-icarus\source\css\style.styl 内添加

1
2
3
4
.navbar
 z-index: 100
 position: sticky
 top: 0

gitalk 评论排列

查阅官方文档，在 script 内添加参数，pagerDirection: 'last'

添加新的自定义页面

外部链接

直接在 icarus 的 config 文件的 navbar 栏添加 xx: 'url'

新页面

添加新文件夹，里面新建 index.md，内容和脚本写在里面，并在 icarus 的 config 文件的 navbar 栏添加 xx: 'folder_name' 样式由 hexo 渲染。所以会与博客主题一致。

无样式新页面

在页面文件夹直接创建 xx.html ？或者在 index.md 的 front-matter 里添加 layout: false

不同布局的新页面

虽然无样式可以创建，但是又得手撸页面，难免有点不爽，不过既然 front-matter 的优先级更高，那就可以在上面写 widget: 将组件置空，那么基础样式将保留。

未来有拓展需求时，再详细研究一下这个。

修改组件、主页面宽度

查阅 icarus 的 issue 有介绍，主要就是修改样式。

添加文件并改变引用（方便）

可以自定义，不过我直接找了个开源分支库，里面有别人写好的，预览了主页感觉可以，直接套上去用了。更新应该也不会刷掉，统一备份 mystyle 就好了应该。步骤如下：

  • 在 hexo-theme-icarus/include/style 下创建 mystyle 文件夹，在内复制粘贴添加一个修改好的 responsive.styl
  • 在 hexo-theme-icarus/source/css/style.styl 内，将 @import '../../include/style/responsive' 修改为 @import '../../include/style/mystyle/responsive' 即可。

直接修改

如果想要直接修改 responsive.styl ，在内的 +widescreen() 下修改为如下代码

responsive.styl >folded
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

+widescreen()
    .is-1-column .container, .is-2-column .container
        max-width: $widescreen - 2 * $gap
        width: $widescreen - 2 * $gap

    .is-3-column .container {
        /* 关闭评论图片 后调节 原94%*/
        max-width: 85%; /*screen-widescreen + 2 * extend-width - 2 * gap*/
        width: 85%;
    }
    max-width: $desktop - 2 * $gap
    width: $desktop - 2 * $gap
    .column.is-3-widescreen {
        flex: none;
        width: 24%;
    }
    .column.is-6-widescreen {
        width: 52%;
    }
    .column.is-4-widescreen {
        flex: none;
        width: 24%;
    }
    .column.is-8-widescreen {
        width: 76%;
    }
    .column.is-9-widescreen {
        width: 76%;
    }
    //screen-widescreen + 2 * extend-width - 2 * gap
    .navbar > .container .navbar-brand, .container > .navbar .navbar-brand {
        margin-left: 0%;
    }
    
    .navbar > .container .navbar-menu, .container > .navbar .navbar-menu {
        margin-right: 0.5%;
    }
    
    .level-end {
        margin-right: -1.5%;
    }

其他方法

引自Carol的 hexo-icarus 博客：

  • 修改側欄及文章區塊所佔網格比例

放寬內容區塊(側欄加文章區塊)後，再來就是修改側欄以及文章區塊所佔的網格比，讓側欄變窄，中間文章區塊變寬

預設側欄(兩側)所佔的網格比，可在 themes/icarus/layout/common/widgets.jsx 檔案中看到

  • 修改文章區塊與側欄區塊比例

接下來我們要放寬文章區塊，減少側欄區塊寬度

在 themes/icarus/layout/common/widgets.jsx，修改側欄(兩側)所佔的網格比

在 themes/icarus/layout/layout.jsx，修改文章區塊所佔的網格比

归档页添加年份生肖

逛 icarus 的 issue 发现好玩的，试着加到博客里，可惜的是没有插件式的套件。

原 issue 提出的修改方法：

  1. 下载字体：chinese-zodiac.zip (23.2KB)，下载后将解压的三个字体文件全部放在 icarus/source/fonts 下
  2. 添加样式: 在 icarus/style/timeline.styl 中加入，为避免修改带来的bug，我在 mystyle 复制新的 timeline.styl 并添加下面的代码，在 style.styl 修改引用。
timeline.styl >folded
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

.chinese-zodiac {
    float: right;
}
@font-face {
    font-family: 'chinese-zodiac';
    font-display: swap;
    src: url('/fonts/chinese-zodiac.eot');
    src: url('/fonts/chinese-zodiac.eot') format('embedded-opentype'),
            url('/fonts/chinese-zodiac.woff2') format('woff2'),
            url('/fonts/chinese-zodiac.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.symbolic-animals {
    color: #3273DC;
    display: inline-block;
    font: normal normal normal 14px/1 chinese-zodiac;
    font-size: x-large;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-dragon:before { content: '\e806'; }
.icon-tiger:before { content: '\e809'; }
.icon-pig:before { content: '\e810'; }
.icon-horse:before { content: '\e813'; }
.icon-rat:before { content: '\e816'; }
.icon-goat:before { content: '\e818'; }
.icon-snake:before { content: '\e820'; }
.icon-ox:before { content: '\e822'; }
.icon-dog:before { content: '\e825'; }
.icon-rabbit:before { content: '\e826'; }
.icon-monkey:before { content: '\e829'; }
.icon-rooster:before { content: '\e82f'; }

  1. 修改 hexo-theme-icarus\layout\archive.jsx ：将 renderArticleList 函数修改为
archive.jsx >folded
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

function renderArticleList(posts, year, month = null) {
    const time = moment([page.year, page.month ? page.month - 1 : null].filter(i => i !== null));
    
    const zodiac = (() => {
        switch (year % 12) {
            case 0: return 'symbolic-animals icon-monkey';
            case 1: return 'symbolic-animals icon-rooster';
            case 2: return 'symbolic-animals icon-dog';
            case 3: return 'symbolic-animals icon-pig';
            case 4: return 'symbolic-animals icon-rat';
            case 5: return 'symbolic-animals icon-ox';
            case 6: return 'symbolic-animals icon-tiger';
            case 7: return 'symbolic-animals icon-rabbit';
            case 8: return 'symbolic-animals icon-dragon';
            case 9: return 'symbolic-animals icon-snake';
            case 10: return 'symbolic-animals icon-horse';
            case 11: return 'symbolic-animals icon-goat';
            default: return 'symbolic-animals icon-ox';
        }
    })();
    
    return <div class="card">
        <div class="card-content">
            <h3 class="tag"}>{month === null ? year : time.locale(language).format('MMMM YYYY')}</h3>
            <div class="chinese-zodiac">
                <i class={zodiac}> </i>
            </div>
}

修改颜色

这份修改的源码将颜色设为红色，有点不搭。将颜色改回原来的 #3273DC 。上面第一份代码搜索 color 修改。

夜间模式的适配

添加了这玩意后，夜间模式下，样式也得适配添加。在 night.styl 的 time line 内添加 .symbolic-animals ，如下：

1
2
3
4
5
6
//time line
.timeline
	xxx
	xxx
.symbolic-animals 
	color: #C0C0C0

颜色选择合适的就行。

修改部署后样式的同步

经常改了之后本地预览没问题，hexo d 之后没有变化，文章倒是有更新，查来查去，shift + f5 强制刷新页面，清理缓存一般就可以了。

多端同步与客制化位置

由于 git push 到仓库时，.gitignore 将 node_modules/hexo-theme-icarus 加入不上传列表，那么对应的修改就没有同步，解决的办法就是，将这个文件夹内容全部复制，到博客目录下的 themes 内创建 icarus 目录并粘贴。

这样，hexo 就会以 themes/icarus 内的设置对页面配置，算是客制化设定（其实一开始就应该做这一步，然后在 themes/icarus 内进行客制化主题修改的）。

则同步上传时，会将该文件夹同步。

参考

gitalk

gitalk-github文档：https://github.com/gitalk/gitalk

页面的布局

icarus用户指南：https://ppoffice.github.io/hexo-theme-icarus/Configuration/icarus-user-guide-configuring-the-theme/#Configuration-Files-and-Priority

宽度修改

Hexo - Icarus 主題 - 內容區塊寬度：https://carol-yang09.github.io/2020/11/22/hexo-icarus-themes-content-width/

可否增加内容栏自定义宽度功能 #434：https://github.com/ppoffice/hexo-theme-icarus/issues/434

hexo-theme-amazing-responsive.styl：https://github.com/removeif/hexo-theme-amazing/blob/7fea32fa88ef79b3ca0c697ed55ee3213f72bb2b/include/style/mystyle/responsive.styl

归档页添加年份生肖

在归档界面加入与年份对应的12生肖小图标 #776：https://github.com/ppoffice/hexo-theme-icarus/issues/776

hexo博客改进记录

https://scutlmg.github.io/2021/10/09/hexo博客改进记录/

作者

ivy

发布于

2021-10-10

更新于

2023-03-25

许可协议

CC BY-NC-SA 4.0

#

喜欢这篇文章？打赏一下作者吧

评论

最新文章

分类

标签

IME1
Linux5
android1
automation1
blog14
book2
cs15
docker3
docker-app1
front-end7
game2
git3
github3
magic1
nonebot2
note2
python2
software1
switch1
tasker1
test1
web-spider1
zelda1

归档

×