pure主题配置

博客搭建 评论

基础设置

完成pure主题安装及基础设置后，在细节修改过程中对一些设置项进一步探索并记录。

导航菜单

设置左侧导航栏项目及对应图标，不想展示的项目，注释掉对应行内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 导航菜单
menu:
  Home: . 
  Archives: archives # 归档
  Categories: categories # 分类
  Tags: tags # 标签
  # Repository: repository # github 项目
  # Books: books     # 书单
  # Links: links # 友链
  About: about # 关于

# 导航菜单图标（font awesome）
menu_icons:
  enable: true # 是否启用菜单图标
  home: icon-home-fill
  archives: icon-archives-fill
  categories: icon-folder
  tags: icon-tags
  repository: icon-project
  books: icon-book-fill
  links: icon-friendship
  about: icon-cup-fill

页面相关设置

1
2
3
4
5
6
7
8
9
10
11
# Site
site:
  logo:
    enabled: true
    width: 40
    height: 40
    url: ../images/logo.png
  title: Hexo # 页面title
  favicon: /favicon.png
  board: <p>欢迎交流与分享经验!</p> # 站点公告
  copyright: false # 底部版权信息
  • logo：未设置展示，可以不管
  • title：网页标题
  • favicon：网站图标
  • copyright：是否显示文章底部版权信息
  • 2

文章及布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# config
config:
  skin: # 主题颜色 theme-black theme-blue theme-green theme-purple
  layout: main-center # 布局方式 main-left main-center main-right
  toc: true # 是否开启文章章节目录导航
  menu_highlight: false # 是否开启当前菜单高亮显示
  thumbnail: false # 启用帖子缩略图, options: true, false
  excerpt_link: Read More
  #New
  isNewTabLinks: false #是否链接打开新标签页
  autoUnfold: true # 默认展开文章目录

# Pagination
pagination:
  number: false
  prev: 
    alwayShow: true
  next:
    alwayShow: true
  midSize: 2 # 当前页码左右到省略号显示的页码数，默认2，表现为 1 ... 4 5 6 7 8 ... 10
  showContent: true # 页面文章小于2篇时显示文章内容
  • isNewTabLinks：是否链接打开新标签页，如果文章中有外链，建议打开
  • toc：是否开启目录导航，此处设置后仍然不生效，需要在文章页面头部声明toc: true
  • pagination：页面下方页码相关
  • 4

侧边栏设置

1
2
3
4
5
6
7
8
9
# Sidebar
sidebar: right
widgets:
  - board  # 公告
  - category # 分类
  - tag # 标签
  - tagcloud # 标签云
  - archive # 归档
  - recent_posts # 最近文章
  • 控制侧边栏位置及具体展示的项目
  • 5

归档相关

1
2
3
# widget behavior
archive_type: 'monthly'
show_count: true
  • archive_type：归档周期
  • show_count：是否显示相关栏目对应文章数量

图集

1
2
# Fancybox
fancybox: false
  • 开启图集后，在文章中的图片可以点击单独查看

个人信息展示

1
2
3
4
5
6
7
8
9
10
11
# profile
profile:
  enabled: true # Whether to show profile bar
  articleSelfBlock: false # 关闭文章下方的自我介绍
  avatar: images/avatar.jpg
  gravatar: # Gravatar email address, if you enable Gravatar, your avatar config will be overriden
  author: 昵称
  author_title: Web Developer & Designer
  author_description: 个人简介。
  location: Shenzhen, China
  follow: https://github.com/cofess
  • articleSelfBlock：是否关闭文章页下方的自我介绍
  • avatar：头像
  • gravatar：gravatar头像，初次配置可以不管
  • 6
  • author_description：个人简介，在关于页面显示

关于页面

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
# Social Links
  social:
    links:
      github: https://github.com/cofess
      weibo: http://weibo.com/cofess
      twitter: https://twitter.com/iwebued
      # facebook: /
      # dribbble: /
      behance: https://www.behance.net/cofess
      rss: atom.xml
    link_tooltip: true # enable the social link tooltip, options: true, false
  # My Skills 
  skills:
    Git: ★★★☆☆
    Gulp: ★★★☆☆
    Javascript: ★★★☆☆
    HTML+CSS: ★★★☆☆
    Bootstrap: ★★★☆☆
    ThinkPHP: ★★★☆☆
    平面设计: ★★★☆☆
  # My Personal Links
  links:
    Github: https://github.com/cofess
    Blog: http://blog.cofess.com
    微博: http://weibo.com/cofess
    花瓣: http://huaban.com/cofess
    Behance: https://www.behance.net/cofess
  # My Personal Labels
  labels:
    - 前端
    - 前端开发
    - 前端重构
    - Web前端
    - 网页重构
  # My Personal Works
  works:
    name:
      link: http://www.example.com
      date: 2016
  # My Personal Projects
  projects:
    cofess/gulp-startpro: https://github.com/cofess/gulp-startpro
    cofess/hexo-theme-pure: https://github.com/cofess/hexo-theme-pure
  • 该部分内容展示在关于页面侧边栏，修改相关内容即可

页脚相关信息添加

7

网站创始时间

在主题配置文件中添加一项since即可，更多个性化内容可以通过代码设计

1
2
# since
since: 2021

网站备案信息添加

左侧边栏下方信息通过 themes/pure/layout/_common/footer.ejs文件进行调整

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
    <%- partial('_common/social', null, {cache: !config.relative_link}) %>
    <div class="copyright">
        <% if(theme.site.copyright) { %> &copy; <%= date(new Date(), 'YYYY') %>
        <%= config.author || config.title %> <% } %>
        <!-- 备案号 -->
        <p>
            ...
        </p>
        <!-- 收件邮箱 -->
        ...
        <!-- 主题来源 -->
        <div class="publishby">
            <%= __('copyright.theme_by') %>
            <a href="https://github.com/cofess" target="_blank"> cofess </a><%=
            __('copyright.base_on') %>
            <a href="https://github.com/cofess/hexo-theme-pure" target="_blank"
                >pure</a
            >.
        </div>
    </div>
</footer>

网站完成备案后，在全国互联网安全管理服务平台 (beian.gov.cn)可以获取相关html代码，复制并粘贴到相应位置（…）即可

联系邮箱

通过点击图标，即可让访客进入邮件编写页面快速发送邮件。此处我使用的QQ邮箱。

通过QQ邮箱-设置-账户-邮我获取相关代码，复制后粘贴到相应位置即可

8

疫情地图添加

原理

右侧边栏项目展示方式见侧边栏设置，每个项目都有相应的代码文件，放置在themes/pure/layout/_widget/文件夹中，添加自定义项目，需要自己编写项目文件并在主题配置文件中添加相应文件名。

主题文件设置

1
2
3
4
5
6
7
8
9
10
# Sidebar
sidebar: right
widgets:
    - board # 公告
    - category # 分类
    # - tag # 标签
    - tagcloud # 标签云
    - archive # 归档
    - covid # 新冠疫情信息
    # - recent_posts # 最新文章

疫情信息文件编写

在文件夹中添加文件名为covid.ejs的文件，文件内容如下：

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
    *:focus {
        outline: none;
    }

    #main {
        margin: auto;
    }

    #title,
    .time {
        height: 10px;
        line-height: 10px;
        text-align: center;
        font-size: 15px;
    }
    .time {
        margin: 12px 0;
        font-size: 12px;
    }

    .info {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        text-align: center;
        line-height: 10px;
    }

    .info > div {
        width: 50%;
    }

    .info > div > p:first-child {
        font-size: 13px;
    }
</style>

<div>
    <div class="title">
        <p id="title">新冠疫情最新统计</p>
        <p class="time">更新时间：2022-02-20 17：40</p>
        <hr />
    </div>

    <div class="info" id="cninfo">
        <div class="currentConfirmedCount">
            <p>现存确诊</p>
            <p style="color: rgb(247, 76, 49)">123123</p>
        </div>
        <div class="suspectedCount">
            <p>境外输入</p>
            <p style="color: rgb(247, 130, 7)">12341</p>
        </div>
        <div class="deadCount">
            <p>累计死亡</p>
            <p style="color: rgb(93, 112, 146)">51221</p>
        </div>
        <div class="curedCount">
            <p>累计治愈</p>
            <p style="color: rgb(40, 183, 163)">51232</p>
        </div>
    </div>
</div>
<script>
    $.ajax({
        type: "GET",
        url: "http://api.hmister.cn/ncp/",
        dataType: "json",
        success: function (data) {
            $(".time").html("更新时间：" + data.data[0].time);
            $(".currentConfirmedCount p:eq(1)").html(
                data.data[0].currentConfirmedCount
            );
            $(".suspectedCount p:eq(1)").html(data.data[0].suspectedCount);
            $(".deadCount p:eq(1)").html(data.data[0].deadCount);
            $(".curedCount p:eq(1)").html(data.data[0].curedCount);
        },
    });
</script>

❤️此处感谢Hmister提供的新冠疫情实时动态接口

设置完成后更新hexo即可

枫与风