hexo+icarus主题配置

最新推荐文章于 2024-05-11 09:39:08 发布

翻滚的豆沙包

最新推荐文章于 2024-05-11 09:39:08 发布

阅读量773

点赞数

原文链接：https://blog.csdn.net/Marvine/article/details/89816846

版权

本文转载自
CSDN:Hexo+icarus主题配置

我的博客：https://sssokach.github.io/

主题文件结构
主题配置
修改内容详细页
美化等进阶功能

主题文件结构

/includes
/languages   #用来配置国际化语言版本，里边包含各种个配置像的文本翻译。
/layout      #以ejs文件来定义各种含有配置信息调用的布局（绝大多数修改点的位置）
/scripts     #一些JS脚本
/source  
   /css      #用来修改自定义样式，需要掌握一定的css语法。
   /fonts    #定义字体文件，可以修改博客字体
   /images   #本地调用的图片放这里
   /js       #一些js脚本（特效.js存放处）
   /404.html #自定义的公益404页面
/_config.yml #YML数据串行化格式语言书写的配置文件（首先修改）

主题配置

_config.yml是主题的配置文件

version: 2.3.0
# 你的网站图标，可以搜索在线图标制作，并将其放在images文件夹中
favicon: /images/favicons.ico
# Path or URL to RSS atom.xml
rss: /atom.xml
# 显示在导航栏左侧的网站logo，同样可以自己制作
logo: /images/gen.svg
# Open Graph metadata
# https://hexo.io/docs/helpers.html#open-graph
open_graph:
    # Facebook App ID
    fb_app_id: 
    # Facebook Admin ID
    fb_admins: 
    # Twitter ID
    twitter_id: 
    # Twitter site
    twitter_site: 
    # Google+ profile link
    google_plus: 
#  导航栏
navbar:
    #菜单（显示名称：对应文件夹）
    menu:
        主页: /
        归档: /archives
        分类: /categories
        标签: /tags
        关于: /about   
    # 导航栏右侧图标链接
    links:
        My GitHub:
            icon: fab fa-github
            url: '你的gityhub地址'
# Footer section link settings
footer:
    # 页脚图标链接
    links:
        Creative Commons:
            icon: fab fa-creative-commons
            url: 'https://creativecommons.org/'
        Attribution 4.0 International:
            icon: fab fa-creative-commons-by
            url: 'https://creativecommons.org/licenses/by/4.0/'
        Download on GitHub:
            icon: fab fa-github
            url: 'http://github.com/ppoffice/hexo-theme-icarus'
# 文章显示设置
article:
    # Code highlight theme
    # https://github.com/highlightjs/highlight.js/tree/master/src/styles
    #代码主题atom-one-light亮色，atom-one-dark暗色
    highlight: atom-one-dark
    # 是否显示文章主图
    thumbnail: true
    # 是否显示估算阅读时间
    readtime: true
# 搜索插件设置
# http://ppoffice.github.io/hexo-theme-icarus/categories/Configuration/Search-Plugins
search:
    # Name of the search plugin
    type: insight
# 评论插件设置
# http://ppoffice.github.io/hexo-theme-icarus/categories/Configuration/Comment-Plugins
comment:
    #可选valine，disqus（科学上网）等
    # Name of the comment plugin
    #type: valine
    #app_id: 不为空
    #app_key: 不为空
    #notify: true
    #verify: true
    #placeholder:
    type: disqus
    shortname: 不能为空
# 打赏功能
# http://ppoffice.github.io/hexo-theme-icarus/categories/Donation/
donate:
    -
        # 阿里巴巴支付宝
        type: alipay
        # 二维码图片
        qrcode: '/images/honbao.PNG'
    -
        # 微信
        type: wechat
        # 二维码图片
        qrcode: '/images/yjtp.png'
    -
# 分享插件设置
# http://ppoffice.github.io/hexo-theme-icarus/categories/Configuration/Share-Plugins
share:
    # 插件类型，有多种，可选，自行百度
    type: sharejs
# Sidebar settings.
# Please be noted that a sidebar is only visible when it has at least one widget
sidebar:
    # 左侧边栏设置
    left:
        # 是否不随页面滚动
        # http://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
        sticky: false
    # 右侧边栏设置
    right:
        # 是否不随页面滚动
        # http://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
        sticky: false
# 边栏小部件设置
# http://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
widgets:
    -
        # 个人信息
        type: profile
        # 部件位置（左）
        position: left
        # 作者名（字符串）
        author: 飞鱼
        # 作者身份描述（字符串）
        author_title: Student
        # 作者当前居住地
        location: China,Fujian
        # 头像（可用本地图片或网络图片链接）
        avatar: '/images/ava.png'
        # Email address for the Gravatar to be shown in the profile widget
        gravatar: 
        # 关注我的链接，可设为你的GitHub主页
        follow_link: 'https://github.com/yourname'
        # 个人介绍部件底部图标社交链接
        social_links:
            Github:
                icon: fab fa-github
                url: 'https://github.com/yourname'
            Facebook:
                icon: fab fa-facebook
                url: 'https://facebook.com'
            Twitter:
                icon: fab fa-twitter
                url: 'https://twitter.com/yourname'
            RSS:
                icon: fas fa-rss
                url: /
    -
        # Widget name
        type: toc
        # Where should the widget be placed, left or right
        position: left
    -
        # 分类
        type: category
        # 位置指定
        position: left
    -
        # 标签云
        type: tagcloud
        # 位置
        position: right
    -
        # 近期文章
        type: recent_posts
        # 位置
        position: left
    -
        # 归档
        type: archive
        # Where should the widget be placed, left or right
        position: right
    -
        # 标签
        type: tag
        # Where should the widget be placed, left or right
        position: right
    -
        # 外部链接
        type: links
        # Where should the widget be placed, left or right
        position: left
        # Links to be shown in the links widget
        links:
            Google: 'https://google.com'
            Baidu: 'https://baidu.com'

修改内容详细页

Hexo-icarus主题的文章详情页默认与主页布局一致，皆为三栏布局，想将其改为两栏布局。
打开/themes/icarus/layout/layout.ejs文件，添加col()函数到文件中：

<% function col(){
    if(!is_post()){
        return main_column_class();
        }
    else{
        return 'is-6-tablet is-6-desktop is-9-widescreen';
        } 
    } %>

再section标签中做如下改动：

<section class="section">
        <div class="container">
            <div class="columns">
                <!-- 将main_column_class() 改为 col() -->
                <div class="column <%= col() %> has-order-2 column-main"><%- body %></div>
                <%- partial('common/widget', { position: 'left' }) %>
                <%- partial('common/widget', { position: 'right' }) %>
            </div>
        </div>
    </section>

不难看出，上述改动的目的是将显示逻辑改为：若当前页面不是文章页面则直接采用原始设置，否则将文章栏放大。
通过上面的修改，hexo server查看效果，发现文章详情页的文章栏确实放大了，但是右侧的部件栏并未消失，而是被挤出了屏幕外一部分，极不美观。

为了解决上述问题，还需修改/themes/icarus/layout/common/widget.ejs文件。
将代码全选复制，再粘贴于末尾，做如下修改3处代码：

<% if (get_widgets(position).length && !is_post()) { %>        <!-- 修改 -->
<% function side_column_class() {
    switch (column_count()) {
        case 2:
            return 'is-4-tablet is-4-desktop is-4-widescreen';
        case 3:
            return 'is-4-tablet is-4-desktop is-3-widescreen';
    }
    return '';
} %>
<% function visibility_class() {
    if (column_count() === 3 && position === 'right') {
        return 'is-hidden-touch is-hidden-desktop-only';
    }
    return '';
} %>
<% function order_class() {
    return position === 'left' ? 'has-order-1' : 'has-order-3';
} %>
<% function sticky_class(position) {
    return get_config('sidebar.' + position + '.sticky', false) ? 'is-sticky' : '';
} %>
<div class="column <%= side_column_class() %> <%= visibility_class() %> <%= order_class() %> column-<%= position %> <%= sticky_class(position) %>">
    <% get_widgets(position).forEach(widget => {%>
        <%- partial('widget/' + widget.type, { widget, post: page }) %>
    <% }) %>
    <% if (position === 'left') { %>
        <div class="column-right-shadow is-hidden-widescreen <%= sticky_class('right') %>">
        <% get_widgets('right').forEach(widget => {%>
            <%- partial('widget/' + widget.type, { widget, post: page }) %>
        <% }) %>
        </div>
    <% } %>
</div>
<% } %>

<!-- 粘贴的部分 -->
<% if (position === 'left' && is_post()) { %>                          <!-- 修改，可选保留的栏 -->
<% function side_column_class() {
    switch (column_count()) {
        case 2:
            return 'is-4-tablet is-4-desktop is-4-widescreen';
        case 3:
            return 'is-4-tablet is-4-desktop is-3-widescreen';
    }
    return '';
} %>
<% function visibility_class() {
    if (column_count() === 3 && position === 'right') {
        return 'is-hidden-touch is-hidden-desktop-only';
    }
    return '';
} %>
<% function order_class() {
    return position === 'left' ? 'has-order-3' : 'has-order-1';       <!-- 修改 -->
} %>
<% function sticky_class(position) {
    return get_config('sidebar.' + position + '.sticky', false) ? 'is-sticky' : '';
} %>
<div class="column <%= side_column_class() %> <%= visibility_class() %> <%= order_class() %> column-<%= position %> <%= sticky_class(position) %>">
    <% get_widgets(position).forEach(widget => {%>
        <%- partial('widget/' + widget.type, { widget, post: page }) %>
    <% }) %>
    <% if (position === 'left') { %>
        <div class="column-right-shadow is-hidden-widescreen <%= sticky_class('right') %>">
        <% get_widgets('right').forEach(widget => {%>
            <%- partial('widget/' + widget.type, { widget, post: page }) %>
        <% }) %>
        </div>
    <% } %>
</div>
<% } %>

美化等进阶功能

攻略位置：https://blog.csdn.net/marvine/article/details/89816846
攻略位置：https://blog.csdn.net/qq_36759224/article/details/85420403#font_colorFF0000___font_289

翻滚的豆沙包

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hexo+icarus主题配置

本文转载自CSDN:Hexo+icarus主题配置Hexo Icarus配置和美化升级我的博客：https://sssokach.github.io/目录主题文件结构主题配置修改内容详细页美化等进阶功能主题文件结构/includes/languages #用来配置国际化语言版本，里边包含各种个配置像的文本翻译。/layout #以ejs文件来定义各...
复制链接

扫一扫