swimminghao's blog

学习博客

发表于 更新于 分类于 Waline： 本文字数： 305 阅读时长 ≈ 1 分钟

hexo同步

以下操作在你的第二个平台上进行，并确定已安装 node.js & npm。

在你想要同步博客的文件夹下执行

1
2
3
4
5
6
7
8
9
10
git clone <远端博客仓库地址>
cd # 进入到主题文件夹
git clone <远端主题仓库地址>
cd # 进入到第三方主题文件夹
git checkout customize #切换到customize分支
# 回到 hexo 根目录，安装依赖
npm install hexo
npm install hexo-deployer-git
npm install hexo-cli -g
npm install

执行hexo指令

1
hexo clean && proxy4 hexo d -g
l
l

发表于 更新于 分类于 Waline： 本文字数： 21k 阅读时长 ≈ 19 分钟

Hexo-Next 主题博客个性化配置(2022年更行版本)

网页预览：

swimminghao.netlify.app
在这里插入图片描述
因为本人比较喜欢简介风格的，所以整个界面都是简约风格的，一个好的博客，应该让人一眼就能看清楚技术分类,文章也应该就是文章，让人能够最好的阅读你的博客 这才是我们应该做的，所以没有太多花里胡哨的东西。

使用工具：

Git
Github
visual studio code
Chrome

Hexo简易安装

前置条件

软件版本

HEXO: 6.0.6
Hero-theme-next: 8.10.0

安装hexo

1
npm install -g hexo-cli

主题下载安装

进入命令行，下载 NexT 主题，输入：

1
git clone https://github.com/next-theme/hexo-theme-next/ themes/next

修改站点配置文件_config.yml，找到如下代码：

1
2
## Themes: https://hexo.io/themes/
theme: landscape => next

将 landscape 修改为 next 即可。

配置文件

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的站点配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

为了描述方便，在以下说明中，将前者称为 **站点配置文件**， 后者称为 **主题配置文件**。

1
2
/hexo/_config.yml
/hexo/themes/next/_config.yml

修改语言

打开站点配置文件，搜索 language，找到如下代码：

1
2
3
author: authorName
language: zh-CN
timezone: Asia/Shanghai

新建标签及分类界面

打开 主题配置文件，搜索 menu，找到如下代码：

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

把 tags 和 categories 前面的 # 删除，

切换主题

next 主题自带四种样式。

在主题配置文件/next/_config.yml中查找：scheme，找到如下代码：

1
2
3
4
5
6
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini
选择你喜欢的一种样式，去掉前面的 #，其他主题前加上 # 即可。

隐藏网页底部 powered By Hexo / 强力驱动

打开 themes/next/layout/_partials/footer.njk

找到：

1
2
3
4
5
6
{\%- if theme.footer.powered %}
  <div class="powered-by">
    {\%- set next_site = 'https://theme-next.js.org' if theme.scheme === 'Gemini' else 'https://theme-next.js.org/' + theme.scheme | lower + '/' %}
    {{- __('footer.powered', next_url('https://hexo.io', 'Hexo') + ' & ' + next_url(next_site, 'NexT.' + theme.scheme)) }}
  </div>
{\%- endif %}

把这段代码首尾分别加上：<!-- 和-->，或者直接删除。

主页文章添加阴影

参考： Hexo NexT 主题美化记录
打开themes\next\source\css\_common\components\post\index.styl文件，将post-block更改为如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
if (hexo-config('motion.transition.post_block')) {
    .post-block{
        margin-top: 60px;
        margin-bottom: 60px;
        padding: 25px;
        background:rgba(255,255,255,0.9) none repeat scroll !important; //添加透明效果
        -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
        -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
    }
    .pagination, .comments {
      opacity: 0;
    }
  }

页脚增加网站运行时间统计

  1. 打开themes/next/layout/_partials/footer.njk文件，在如下图位置加入代码：
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
{\%- if config.symbols_count_time.total_symbols or config.symbols_count_time.total_time %}
<div class="wordcount">
  {\%- if config.symbols_count_time.total_symbols %}
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-line"></i>
    </span>
    {\%- if theme.symbols_count_time.item_text_total %}
      <span>{{ __('symbols_count_time.count_total') + __('symbol.colon') }}</span>
    {\%- endif %}
    <span title="{{ __('symbols_count_time.count_total') }}">{{ symbolsCountTotal(site) }}</span>
  </span>
  {\%- endif %}

  {\%- if config.symbols_count_time.total_time %}
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    {\%- if theme.symbols_count_time.item_text_total %}
      <span>{{ __('symbols_count_time.time_total') }} &asymp;</span>
    {\%- endif %}
    <span title="{{ __('symbols_count_time.time_total') }}">{{ symbolsTimeTotal(site, config.symbols_count_time.awl, config.symbols_count_time.wpm, __('symbols_count_time.time_minutes')) }}</span>
  </span>
  {\%- endif %}
</div>
{\%- endif %}

//此位置插入代码

{\%- if theme.busuanzi_count.enable %}
<div class="busuanzi-count">

倒计时代码：

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
<span id="sitetime"></span>
<script language=javascript>
    function siteTime(){
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth()+1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
        year - 作为date对象的年份，为4位年份值
        month - 0-11之间的整数，做为date对象的月份
        day - 1-31之间的整数，做为date对象的天数
        hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
        minutes - 0-59之间的整数，做为date对象的分钟数
        seconds - 0-59之间的整数，做为date对象的秒数
        microseconds - 0-999之间的整数，做为date对象的毫秒数 */
        var t1 = Date.UTC(2022,01,04,00,00,00); //你的建站时间
        var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
        var diff = t2-t1;
        var diffYears = Math.floor(diff/years);
        var diffDays = Math.floor((diff/days)-diffYears*365);
        var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
        var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
        var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
        document.getElementById("sitetime").innerHTML=" Run for "+diffYears+" Year "+diffDays+" Days "+diffHours+" Hours "+diffMinutes+" m "+diffSeconds+" s";
    }
    siteTime();
</script>
  1. 在themes\next\source\css\main.styl文件中给倒计时添加样式

不生效

1
2
3
4
5
#sitetime {
  background-image: -webkit-linear-gradient(left, #aa4b6b, #6b6b83, #3b8d99);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

浏览页面显示当前浏览进度

打开 themes/next/_config.yml，搜索关键字 scrollpercent，把 false 改为 true。

效果图：
在这里插入图片描述

Local Search本地搜索

安装插件hexo-generator-searchdb,执行以下命令:

1
npm install hexo-generator-searchdb --save

修改hexo/_config.yml站点配置文件，新增以下内容到任意位置：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑 主题配置文件，启用本地搜索功能：

1
2
3
# Local search
local_search:
	enable: true

效果图：
在这里插入图片描述

设置网站图标

在 EasyIcon 中找一张（32 * 32）的 ico 图标，或者去别的网站下载或者制作，并将图标名称改为 favicon.ico，然后把图标放在 /themes/next/source/images 里，并且修改主题配置文件：

1
2
Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

修改文章底部的#号的标签，改为图标

修改模板/themes/next/layout/_macro/post.swig

搜索 rel="tag">{{ tag_indicate }}，将 {{ tag_indicate }} 换成<i class="fa fa-tag"></i>

效果图：
在这里插入图片描述

文章分享功能

打开themes/next/_config.yml 搜索关键字needmoreshare2 修改为下面设置

用npm卸载掉hexo-next-share，搜索所有hexo-next-share文件夹删除干净，然后切换到网站文件夹下，运行npm install theme-next/hexo-next-share --save,将以下代码都复制进主题配置文件里

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
# NeedMoreShare2
# Dependencies: https://github.com/theme-next/theme-next-needmoreshare2
# For more information: https://github.com/revir/need-more-share2
# iconStyle: default | box
# boxForm: horizontal | vertical
# position: top / middle / bottom + Left / Center / Right
# networks:
# Weibo | Wechat | Douban | QQZone | Twitter | Facebook | Linkedin | Mailto | Reddit | Delicious | StumbleUpon | Pinterest
# GooglePlus | Tumblr | GoogleBookmarks | Newsvine | Evernote | Friendfeed | Vkontakte | Odnoklassniki | Mailru
needmoreshare:
  enable: true
  cdn:
    js: //cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1/needsharebutton.min.js
    css: //cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1/needsharebutton.min.css
  postbottom:
    enable: true
    options:
      iconStyle: default
      boxForm: horizontal
      position: middleCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: false
    options:
      iconStyle: default
      boxForm: horizontal
      position: middleCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook


# Likely Share
# See: https://ilyabirman.net/projects/likely/, https://github.com/ilyabirman/Likely
# Likely supports four looks, nine social networks, any button text.
# You are free to modify the text value and order of any network.
likely:
  enable: false
  cdn:
    js: //cdn.jsdelivr.net/npm/ilyabirman-likely@2/release/likely.min.js
    css: //cdn.jsdelivr.net/npm/ilyabirman-likely@2/release/likely.min.css
  look: light # available values: normal, light, small, big
  networks:
    twitter: Tweet
    facebook: Share
    linkedin: Link
    gplus: Plus
    vkontakte: Share
    odnoklassniki: Class
    telegram: Send
    whatsapp: Send
    pinterest: Pin

# share.js
# See: https://github.com/overtrue/share.js
# networks: weibo,qq,wechat,tencent,douban,qzone,linkedin,diandian,facebook,twitter,google
sharejs:
  enable: false
  cdn:
    js: //cdn.jsdelivr.net/npm/social-share.js@1/dist/js/social-share.min.js
    css: //cdn.jsdelivr.net/npm/social-share.js@1/dist/js/social-share.min.css
  networks: weibo,qq,wechat,tencent,douban,qzone,linkedin,diandian,facebook,twitter,google
  wechat_qrcode:
    title: share.title
    prompt: share.prompt

效果图：
postbottom为文章末尾分享 float则是在页面侧端分享
在这里插入图片描述

文章加密访问

参考链接： hexo文章加密访问

增加文章字数统计及阅读时常功能

安装字数统计插件 npm i hexo-symbols-count-time
在hexo的_config.yml下找到# Extensions在下面配置插件配置如下

1
2
3
4
5
6
7
# 字数统计插件 npm i hexo-symbols-count-time
symbols_count_time:
  symbols: true # 文章字数统计
  time: true # 文章时长统计
  total_symbols: true # 全局字数统计
  total_time: true # 全局时长统计
  exclude_codeblock: false  # 排除代码字数统计

文章置顶功能

移除默认安装的插件：

npm uninstall hexo-generator-index --save
安装新插件:

npm install hexo-generator-index-pin-top --save
最后编辑有这需求的相关文章时，在Front-matter（文件最上方以—分隔的区域）加上一行：

1
top: true

如果你置顶了多篇，怎么控制顺序呢？设置top的值（大的在前面），比如：

1
2
3
4
5
6
7
8
# Post a.md
title: a
top: 1

# Post b.md
title: b
top: 10
1234567

文章 b 便会显示在文章 a 的前面

设置置顶图标
打开/themes/next/layout/_macro/post.swig文件，在<div class="post-meta-container">下方，插入如下代码：

1
2
3
4
5
{\% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color=7D26CD>置顶</font>
    <span class="post-meta-divider">|</span>
{\% endif %}

在这里插入图片描述

修改[Read More]按钮样式

修改themes/next/source/css/_common/components/post/index.styl文件，加入自定义样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// [Read More]按钮样式
.post-button .btn {
    color: #555 !important;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    border: none !important;
    transition-property: unset;
    padding: 0px 15px;
}

.post-button .btn:hover {
    color: rgb(255, 255, 255) !important;
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}

效果图：
在这里插入图片描述

修改 阅读全文 前显示文字数量即位置

打开 themes/next/_config.yml，搜索关键字 auto_excerpt， 修改length即可修改阅读全文前显示文字数量

1
2
3
auto_excerpt:
  enable: true
  length: 150

或者在文章中任意位置添加<!-- more -->

建议在文章中加入 <!-- more -->
自定义 [Read More] 按钮之前要显示的内容！

修改链接文字样式

打开themes/next/source/css/_common/components/post/index.styl添加以下代码:

1
2
3
4
5
6
7
8
.post-body p a{
 color: #0593d3;
 border-bottom: none;
 &:hover {
   color: #ff106c;
   text-decoration: underline;
 }
}

效果图：
在这里插入图片描述

头像设置圆形,停留旋转效果

修改next主题配置文件,修改成以下代码:

1
2
3
4
5
6
7
8
9
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/lion.png
  # lion.png放置在next/source/images文件夹下
  # If true, the avatar will be displayed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

效果图：
在这里插入图片描述

增加近期文章

hexo主站source 目录下创建 _data/sidebar.njk 文件，加入如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{# recent posts #}
{\% if theme.recent_posts %}
  <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}">
    <div class="links-of-blogroll-title">
      <!-- modify icon to fire by szw -->
      <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
      {{ theme.recent_posts_title }}
    </div>
    <ul class="links-of-blogroll-list">
      {\% set posts = site.posts.sort('-date') %}
      {\% for post in posts.slice('0', '5') %}
        <li class="recent_posts_li">
          <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
        </li>
      {\% endfor %}
    </ul>
  </div>
{\% endif %}

并修改theme主题配置文件，取消sidebar的注释:

1
2
3
4
5
6
7
8
9
10
11
12
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

编辑themes/next/source/css/_common/outline/sidebar/sidebar-blogroll.styl文件，标题溢出隐藏

1
2
3
4
5
6
7
8
9
10
11
.links-of-blogroll-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: cengter;
  display: block;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

在 themes/next/_config.yml中修改成下方代码

1
2
3
4
# 近期文章设置
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

效果图：
在这里插入图片描述

文章末尾添加”本文结束”标记

  • 在目录themes/next/layout/_macro/下添加passage-end-tag.swig，内容如下： 

    1
    2
    3
    4
    5
    <div>
        {\% if not is_index %}
          <div style="text-align:center;color: #ccc;font-size:20px;">------------- 本 文 结 束&nbsp&nbsp&nbsp&nbsp&nbsp感 谢 您 的 阅 读 -------------</div>
        {\% endif %}
    </div>

  • 打开themes/next/layout/_macro/post.swig文件，新增内容如下:

  • ```HTML

    //以下为新增代码

    {\% if not is_index %} {\% include 'passage-end-tag.swig' %} {\% endif %} 
    1
    2
    3
    4
    5
    6
      
    - 打开`主题配置文件`，添加代码如下：
    - ```js
      # 文章末尾添加“本文结束”标记
      passage_end_tag:
      enabled: true

为博客加上妹子

live2d与busuanzi组件有bug冲突，安装了live2d，busuanzi就失效，所以我没有使用。

npm install -save hexo-helper-live2d
然后在在 hexo 的 _config.yml中添加参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-<你喜欢的模型名字>s
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

12345678910111213141516

可供选择模型：

  • live2d-widget-model-chitose
  • live2d-widget-model-epsilon2_1
  • live2d-widget-model-gf
  • live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
  • live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
  • live2d-widget-model-haruto
  • live2d-widget-model-hibiki
  • live2d-widget-model-hijiki
  • live2d-widget-model-izumi
  • live2d-widget-model-koharu
  • live2d-widget-model-miku
  • live2d-widget-model-ni-j
  • live2d-widget-model-nico
  • live2d-widget-model-nietzsche
  • live2d-widget-model-nipsilon
  • live2d-widget-model-nito
  • live2d-widget-model-shizuku
  • live2d-widget-model-tororo
  • live2d-widget-model-tsumiki
  • live2d-widget-model-unitychan
  • live2d-widget-model-wanko
  • live2d-widget-model-z16

在站点目录下建文件夹live2d_models，

再在live2d_models下建文件夹<你喜欢的模型名字>,

再在<你喜欢的模型名字>下建json文件：<你喜欢的模型名字>.model.json

安装模型。在命令行（即Git Bash）运行以下命令即可：

1
npm install --save live2d-widget-model-<你喜欢的模型名字>

复制你喜欢的模型名字：

代码块复制选项

Next6 中自带了复制代码按钮，Next5 需要自己手动配置。

搜索 codeblock，找到如下配置：

1
2
3
4
5
codeblock:
border_radius: 8   # 按钮圆滑度
copy_button:  # 设置是否开启代码块复制按钮
	enable: true
	show_result: true  # 是否显示复制成功信息

修改加载特效

由于网页不可能一直都秒进，总会等待一段时间的，所以可以设置顶部加载条。Next 已经集成了很多加载特效，可以在下面选项中在线调试测试一下。

next主题配置文件搜索pace，找到如下代码：

1
2
3
4
5
6
7
8
9
10
11
# Progress bar in the top during page loading.
G# For more information: https://github.com/CodeByZach/pace
pace:
  enable: true
  # All available colors:
  # black | blue | green | orange | pink | purple | red | silver | white | yellow
  color: blue
  # All available themes:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: loading-bar

修改文章链接

在做次优化之前，hexo-next文章链接默认的生成规则是：:year/:month/:day/:title，是按照年、月、日、标题来生成的。
比如：https://zxiaoxuan.github.io/2019/08/12/hello-world/ 这样，如果文章标题是中文的话，URL链接是也会是中文，
在这里插入图片描述

那么要生存简洁且唯一的URL，怎么办呢

安装插件

1
npm install hexo-abbrlink --save

执行此命令可能会不成功，提示你缺少相应的依赖，比如babel-eslint、mini-css-extract-plugin、webpack-cli…
使用npm命令安装即可，比如npm install eslint@4.x babel-eslint@8 –save-dev

修改根目录站点配置文件config.yml，改为：

1
2
3
4
permalink: posts/:abbrlink/
abbrlink:
	alg: crc32   #算法： crc16(default) and crc32
	rep: hex     #进制： dec(default) and hex

生成的链接将会是这样的(官方样例)：
四种可供选择

1
2
3
4
5
6
7
8
9
10
11
crc16 & hex
https://post.zz173.com/posts/66c8.html

crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

crc32 & dec
https://post.zz173.com/posts/1690090958.html
12345678910

生成完后，原md文件的Front-matter 内会增加abbrlink 字段，值为生成的ID 。这个字段确保了在我们修改了Front-matter 内的博客标题title或创建日期date字段之后而不会改变链接地址。

评论 Waline 增强版

参考链接Hexo NexT Waline评论

各版块透明度修改

内容板块透明
博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl文件 .content-wrap 标签下 background: white修改为：

1
background: rgba(255,255,255,0.7); //0.7是透明度

菜单栏背景
博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl文件.header-inner标签下 background: white修改为：

1
background: rgba(255,255,255,0.7); //0.7是透明度

站点概况背景
博客根目录themes\next\source\css\_schemes\Pisces\_sidebar.styl 文件.sidebar-inner 标签下 background: white修改为：

1
background: rgba(255,255,255,0.7); //0.7是透明度

然后修改博客根目录themes\next\source\css\_schemes\Pisces\_layout.styl文件.sidebar 标签下 background: $body-bg-color修改为：

1
background: rgba(255,255,255,0.7); //0.7是透明度

按钮背景
博客根目录themes\next\source\css\_common\components\post\post-button.styl 同上修改对应位置为 background: transparent;

标签修改

打开themes/next/layout/page.swig

修改这里可以修改标签页的标签显示
在这里插入图片描述

在这里添加东西会在标签页面上显示
在这里插入图片描述

彩色标签云

在/themes/next/layout/目录下，新增tag-color.swig文件，加入下方代码：

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
<script type="text/javascript">
     var alltags = document.getElementsByClassName('tag-cloud-tags');
     var tags = alltags[0].getElementsByTagName('a');
     for (var i = tags.length - 1; i >= 0; i--) {
       var r=Math.floor(Math.random()*75+130);
       var g=Math.floor(Math.random()*75+100);
       var b=Math.floor(Math.random()*75+80);
       tags[i].style.background = "rgb("+r+","+g+","+b+")";
     }
</script>

<style>
  .tag-cloud-tags{
    /*font-family: Helvetica, Tahoma, Arial;*/
    /*font-weight: 100;*/
    text-align: center;
    counter-reset: tags;
  }
  .tag-cloud-tags a{
    border-radius: 6px;
    padding-right: 5px;
    padding-left: 5px;
    margin: 8px 5px 0px 0px;
  }
  .tag-cloud-tags a:before{
    content: "?";
  }

  .tag-cloud-tags a:hover{
     box-shadow: 0px 5px 15px 0px rgba(0,0,0,.4);
     transform: scale(1.1);
     /*box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);*/
     transition-duration: 0.15s;
  }
</style>

在/themes/next/layout/page.swig/中引入tag-color.swig：

在下方加上 {\% include 'tag-color.swig' %} 代码

1
2
3
4
5
6
7
8
9
 <div class="tag-cloud">
          <!--    <div class="tag-cloud-title">
                {{ _p('counter.tag_cloud', site.tags.length) }}
            </div>  -->
             <div class="tag-cloud-tags" id="tags">
			  {{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#FFF', end_color: '#FFF'}) }}            
		  </div>
		</div>
+     {\% include 'tag-color.swig' %}

或者将上方代码直接添加到下方

在这里插入图片描述

将标签云放到首页

在路径：/themes/next/layout/index.swig 中

{\% block content %}下面添加下方代码

1
2
3
4
5
6
7
8
9
10
{\% block content %}

	<div class="tag-cloud">
	  <div class="tag-cloud-tags" id="tags">
		{{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#fff', end_color: '#fff'}) }}
	  </div>
	</div>
	<br>
	
	{\% include 'tag-color.swig' %}

在这里插入图片描述

归档页美化

修改/themes/next/layout/_macro/post-collapse.swig后的代码如下：

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
{\% macro render(post) %}

  <article class="post post-type-{{ post.type | default('normal') }}" itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      <{\% if theme.seo %}h3{\% else %}h2{\% endif %} class="post-title">
        {\% if post.link %}{# Link posts #}
          <a class="post-title-link post-title-link-external" target="_blank" href="{{ url_for(post.link) }}" itemprop="url">
            {{ post.title or post.link }}
            <i class="fa fa-external-link"></i>
          </a>
        {\% else %}
            <a class="post-title-link" href="{{ url_for(post.path) }}" itemprop="url">
              {\% if post.type === 'picture' %}
                {{ post.content }}
              {\% else %}
                <span itemprop="name">{{ post.title | default(__('post.untitled')) }}</span>
              {\% endif %}
            </a>
        {\% endif %}
      </{\% if theme.seo %}h3{\% else %}h2{\% endif %}>

      <div class="post-meta">
        <time class="post-time" itemprop="dateCreated"
              datetime="{{ moment(post.date).format() }}"
              content="{{ date(post.date, config.date_format) }}" >
          {{ date(post.date, 'MM-DD') }}
        </time>
      </div>

    </header>
  </article>

{\% endmacro %}
l

发表于 更新于 分类于 Waline： 本文字数： 3.4k 阅读时长 ≈ 3 分钟

版本：1.6

使用 Docker 部署 Halo 和 MySQL

简介

该章节我们将分三种情况为您说明该如何同时使用 Docker + MySQL 来部署 Halo

前提条件： 我们默认您的机器上已经安装好 Docker

  • 如果你想完全通过 Docker 运行 MySQL 和 Halo 请参考小节《统一使用 Docker 安装》
  • 如果你已经有 Docker部署的 MySQL，想安装 Halo 请参考小节《MySQL 部署在 Docker 如何使用 Docker 安装 Halo》
  • 如果你已有 MySQL 但部署在宿主机，想通过 Docker 安装 Halo 请参考小节《MySQL 在宿主机如何通过 Docker 安装 Halo》

统一使用 Docker 安装

如果你的机器上没有现成的 MySQL 可供使用，那么您可以选择使用 Docker 来运行 MySQL 和 Halo

  1. 创建 Docker 自定义桥接网络
1
docker network create halo-net

提示

如果你之前有 Docker 使用经验，你可能已经习惯了使用 --link 参数来使容器互联。

但随着 Docker 网络的完善，强烈建议大家将容器加入自定义的 Docker 网络来连接多个容器，而不是使用 –link 参数。 Docker 官方文档中称：该–link 标志是 Docker 的遗留功能。它可能最终会被删除。除非您确定需要继续使用它，否则我们建议您使用用户定义的网络来促进两个容器之间的通信，而不是使用 –link。

  1. 拉取 MySQL 镜像
1
docker pull mysql:8.0.27
  1. 创建 MySQL 数据目录
1
mkdir -p ~/.halo/mysql
  1. 启动 MySQL 实例
1
docker run --name some-mysql -v ~/.halo/mysql:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=my-secret-pw --net halo-net --restart=unless-stopped -d mysql:8.0.27

注意: 请将 my-secret-pw 修改为自己需要的密码后再执行，密码尽量包含小写字母、大写字母、数字和特殊字符且长度超过 8 位。

释意

1
-e MYSQL_ROOT_PASSWORD=my-secret-pw`: 指定`MySQL`的登录密码为 `my-secret-pw

-v ~/.halo/mysql:/var/lib/mysql 命令: 将宿主机的目录 ~/.halo/mysql 挂载到容器内部的目录 /var/lib/mysql，默认情况下 MySQL 将向 ~/.halo/mysql 写入其数据文件。

--net halo-net: 将该容器加入到 halo-net 网络,连接到 halo-net 网络的任何其他容器都可以访问 some-mysql容器上的所有端口。

  1. 进入 MySQL 容器中登录 MySQL 并创建 Halo 需要的数据库

  • (1) some-mysql 为 MySQL 实例的容器名称

    1
    docker exec -it some-mysql /bin/bash

  • (2) 登录 MySQL

    1
    mysql -u root -p

  • (3) 输入 MySQL 数据库密码

  • (4) 创建数据库

    1
    create database halodb character set utf8mb4 collate utf8mb4_bin;

  • (5) 使用 exit退出MySQL 并退出容器

  1. 创建 Halo 工作目录
1
mkdir ~/.halo && cd ~/.halo
  1. 下载示例配置文件到工作目录
1
wget https://dl.halo.run/config/application-template.yaml -O ./application.yaml
  1. 编辑配置文件，配置数据库，其他配置请参考参考配置
1
vim application.yaml

你需要做如下几个步骤：

  • 注释 H2 database configuration.部分
  • 启用 MySQL database configuration.部分
  • 修改 datasource 下的 url 中的 ip 地址部分为容器名称并修改密码为您设定的 MySQL 密码

修改后的内容如下:

1
2
3
4
5
6
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://some-mysql:3306/halodb?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true
    username: root
    password: my-secret-pw
  1. 创建 Halo 容器实例
1
docker run -it -d --name halo -p 8090:8090 -v ~/.halo:/root/.halo --net halo-net --restart=unless-stopped halohub/halo:1.6.0
  1. 打开 http://ip:端口号 即可看到安装引导界面。

MySQL 部署在 Docker 如何使用 Docker 安装 Halo

如果您已有 Docker 部署的 MySQL 实例，那么为了保证 Halo 和 MySQL 两个容器的网络可以互通，和上文同样的思路可以创建一个网络让 MySQL 和 Halo 都加入进来。

  1. 使用 docker ps 来查看的你 MySQL 容器实例的名称或 container id， 例如 some-mysql
  2. 创建一个桥接网络，让 MySQL 加入，首先使用 docker network ls 来查看一下都有哪些网络名称，起一个不会冲突的网络名称，例如 halo-net，其次让已经存在的 MySQL 容器实例加入到该网络中
1
docker network connect halo-net some-mysql
  1. 同之前一样创建 Halo 工作目录
1
mkdir ~/.halo && cd ~/.halo
  1. 下载示例配置文件到工作目录
1
wget https://dl.halo.run/config/application-template.yaml -O ./application.yaml
  1. 编辑配置文件，修改 MySQL 的数据库连接和密码
1
vim application.yaml

你需要做如下几个步骤：

  • 注释 H2 database configuration.部分
  • 启用 MySQL database configuration.部分
  • 修改 datasource 下的 url 中的 ip 地址部分为容器名称并修改密码为您设定的 MySQL 密码

修改后的内容如下:

1
2
3
4
5
6
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://some-mysql:3306/halodb?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true
    username: root
    password: my-secret-pw
  1. 创建 Halo 容器实例,并使用 --net 指定网络为刚才创建的halo-net
1
docker run -it -d --name halo -p 8090:8090 -v ~/.halo:/root/.halo --net halo-net --restart=unless-stopped halohub/halo:1.6.0

MySQL 在宿主机如何通过 Docker 安装 Halo

如果你已有 MySQL 但安装在宿主机，你想使用 Docker 安装 Halo 那么此时为了保证 MySQL 和 Halo 能网络互通，可以使用 host 网络模式即 --net host。

  1. 创建 Halo 的工作目录
1
mkdir ~/.halo && cd ~/.halo
  1. 拉取配置
1
wget https://dl.halo.run/config/application-template.yaml -O ./application.yaml
  1. 使用 Docker 启动 Halo 实例并指定网络模式为 host
1
docker run -it -d --name halo -p 8090:8090 -v ~/.halo:/root/.halo --net host --restart=unless-stopped halohub/halo:1.6.0

编辑此页

l
l
l
l

发表于 更新于 分类于 Waline： 本文字数： 824 阅读时长 ≈ 1 分钟
这是一篇加密文章，需要密码才能继续阅读。
阅读全文 »
l

发表于 更新于 分类于 Waline： 本文字数： 2.2k 阅读时长 ≈ 2 分钟

使用java8实现List中对象属性的去重

今天在工作的时候遇到了一个问题，就是List的去重，不想用双重for，感觉太low，不想用for+Map，感觉应该有更好的方法，于是，google之。发现java8的stream流能完美解决这个问题。

1
List<BookInfoVo> list

比如在 BookInfoVo 中有一个 recordId 属性,现在需要对此去重.

怎么办呢?

有两种方法:

  • 第一种: 不使用java8 的 Stream
    1
    2
    3
    4
    5
    private List<BookInfoVo> removeDupliByRecordId(List<BookInfoVo> books) {
    	Set<BookInfoVo> bookSet = new TreeSet<>((o1, o2)->o1.getRecordId().compareTo(o2.getRecordId()));
              personSet.addAll(books);
            return new ArrayList<BookInfoVo>(bookSet);
        }
    这也是大多数人第一想到的,借助 TreeSet 去重,其中 TreeSet 的其中一个构造函数接收一个排序的算法,同时这也会用到 TreeSet 的去重策略上.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /**
         * Constructs a new, empty tree set, sorted according to the specified
         * comparator.  All elements inserted into the set must be <i>mutually
         * comparable</i> by the specified comparator: {@code comparator.compare(e1,
         * e2)} must not throw a {@code ClassCastException} for any elements
         * {@code e1} and {@code e2} in the set.  If the user attempts to add
         * an element to the set that violates this constraint, the
         * {@code add} call will throw a {@code ClassCastException}.
         *
         * @param comparator the comparator that will be used to order this set.
         *        If {@code null}, the {@linkplain Comparable natural
         *        ordering} of the elements will be used.
         */
    public TreeSet(Comparator<? super E> comparator) {
            this(new TreeMap<>(comparator));
        }
  • 第二种: 炫酷的java8写法]
    1
    2
    3
    4
    5
    6
    /*方法二:炫酷的java8写法*/
    ArrayList<BookInfoVo> distinctLiost = list.stream()
                      .collect(
                              Collectors.collectingAndThen(
                                      Collectors.toCollection(() -> new TreeSet<>(Comparator.comparingLong(BookInfoVo::getRecordId))), ArrayList::new)
                      );
    当然也可以根据多个属性去重
    1
    2
    ArrayList<BookInfoVo> distinctLiost = list.stream().collect(Collectors.collectingAndThen(
      Collectors.toCollection(() -> new TreeSet<>(Comparator.comparing(o -> o.getName() + ";" + o.getAuthor()))), ArrayList::new)
    如果没有第一种方法做铺垫,我们很可能一脸懵逼.

其实理解起来也不难:

关键在于Collectors.collectingAndThen( Collectors.toCollection(() -> new TreeSet<>(Comparator.comparingLong(BookInfoVo::getRecordId))), ArrayList::new)的理解,

collectingAndThen 这个方法的意思是: 将收集的结果转换为另一种类型: collectingAndThen,

因此上面的方法可以理解为,把 new TreeSet<>(Comparator.comparingLong(BookInfoVo::getRecordId))这个set转换为 ArrayList,这个结合第一种方法不难理解.

可以看到java8这种写法真是炫酷又强大!!!

l

发表于 更新于 分类于 Waline： 本文字数： 2.4k 阅读时长 ≈ 2 分钟

注释书写规范

  • 一般情况下，源程序有效注释量必须在30％以上。注释的原则是有助于对程序的阅读理解，在该加的地方都加了，注释不宜太多也不能太少，注释语言必须准确、易懂、简洁。可以用注释统计工具来统计。

    一、类和接口的注释

1. 类外注释

该注释放在 package 关键字之后，class 或者 interface 关键字之前。

  • 说明：方便JavaDoc收集。
    示例：
1
2
3
4
5
package com.huawei.msg.relay.comm;
/**
 * 注释内容
 */
public class CommManager
  • 类和接口的注释内容：类的注释主要是一句话功能简述、功能详细描述。
    格式：
    1
    2
    3
    4
    /**
     * 〈一句话功能简述〉
     * 〈功能详细描述〉
    */
  • 描述部分说明该类或者接口的功能、作用、使用方法和注意事项。
    示例：
    1
    2
    3
    4
    5
    /**
     * LogManager 类集中控制对日志读写的操作。
     * 全部为静态变量和静态方法，对外提供统一接口。分配对应日志类型的读写器，
     * 读取或写入符合条件的日志纪录。
    */

2. 类内注释

类属性、公有和保护方法必须写注释。geter、seter方法不用写注释

示例：

1
2
3
4
5
6
7
8
/**
 * 注释内容
 */
private String logType;
/**
 * 注释内容
 */
public void write()

1).成员变量注释内容：成员变量的意义、目的、功能，可能被用到的地方。
2).公有和保护方法注释内容：列出方法的一句话功能 简述、功能详细描述、输入参数、输出参数、返回值、违例等。
格式：

1
2
3
4
5
6
7
8
/**
 * 〈一句话功能简述〉
 * 〈功能详细描述〉
 * @param  [参数1] [in或out]  [参数1说明]
 * @param  [参数2] [in或out]  [参数2说明]
 * @return [返回类型说明]
 * @exception/throws [违例类型] [违例说明]
*/

说明： @exception或throws 列出可能仍出的异常。
示例：

1
2
3
4
5
6
7
/**
 * 用MD5算法计算输入字符串的32位摘要
 * @param sIn [in] 待处理的字符串
 * @param sOut [out] sIn的32为摘要，调用函数负责new sOut对象
 * @return boolean
 */
public static boolean getMd5(String sIn, StringBuffer sOut)

说明：
1）.注释应与其描述的代码相近，对代码的注释应放在其上方或右方（对单条语句的注释）相邻位置，不可放在下面，如放于上方则需与其上面的代码用空行隔开。
2）.注释与所描述内容进行同样的缩排。
3）.将注释与其上面的代码用空行隔开。
示例：

1
2
3
4
5
//注释
program code one
(空一格)   
//注释
program code two

二、方法与复杂逻辑的注释

对变量的定义和分支语句（条件分支、循环语句等）对复杂的分支必须编写注释，如果时间允许，建议对所有分支语句写注释。

说明：这些语句往往是程序实现某一特定功能的关键，对于维护人员来说，良好的注释帮助更好的理解程序，有时甚至优于看设计文档。

  1. switch语句
  • switch语句下的case语句，如果因为特殊情况需要处理完一个case后进入下一个case处理，必须在该case语句处理完、下一个case语句前加上明确的注释。
  • 说明：这样比较清楚程序编写者的意图，有效防止无故遗漏break语句。
  1. 边写代码边注释
  • 修改代码同时修改相应的注释，以保证注释与代码的一致性。不再有用的注释要删除。
  1. 避免在注释中使用缩写
  • 在使用缩写时或之前，应对缩写进行必要的说明，特别是不常用缩写。
  1. 用中文注释，禁止用英文写注释。

    建议

  2. 避免在一行代码或表达式的中间插入注释。
  • 说明：除非必要，不应在代码或表达中间插入注释，否则容易使代码可理解性变差。
  1. 通过对函数或过程、变量、结构等正确的命名以及合理地组织代码的结构，使代码成为自注释的。
  • 说明：清晰准确的函数、变量等的命名，可增加代码可读性，并减少不必要的注释。
  1. 在代码的功能、意图层次上进行注释，提供有用、额外的信息。
  • 说明：注释的目的是解释代码的目的、功能和采用的方法，提供代码以外的信息，帮助读者理解代码，防止没必要的重复注释信息。
  • 示例：如下注释意义不大。
    1
    2
    // 如果 receiveFlag 为真
    if (receiveFlag)
  • 而如下的注释则给出了额外有用的信息。
    1
    2
    // 如果从连结收到消息 
    if (receiveFlag)
  1. 在程序块的结束行右方加注释标记，以表明某程序块的结束。
  • 说明：当代码段较长，特别是多重嵌套时，这样做可以使代码更清晰，更便于阅读。
  • 示例：参见如下例子。
    1
    2
    3
    4
    5
    6
    7
    8
    if (...)
    {
        program code1
        while (index < MAX_INDEX)
        {
            program code2
        } // end of while (index < MAX_INDEX) // 指明该条while语句结束
    } // end of  if (...) // 指明是哪条if语句结束
  1. 方法内的单行注释使用 //。
  • 说明：调试程序的时候可以方便的使用 /* 。。。*/ 注释掉一长段程序。
  1. 注释使用中文注释和中文标点，不得用英文写注释。方法和类描述的第一句话尽量使用简洁明了的话概括一下功能，然后加以句号。接下来的部分可以详细描述。
  • 说明：JavaDoc工具收集简介的时候使用选取第一句话。
  1. 顺序实现流程的说明使用1、2、3、4在每个实现步骤部分的代码前面进行注释。
  • 示例：如下是对设置属性的流程注释
    1
    2
    3
    4
    //1、 判断输入参数是否有效。
    ...
    // 2、设置本地变量。
    ...
  1. 一些复杂的算法代码需要说明。
  • 示例：这里主要是对闰年算法的说明。
    java //1. 如果能被4整除，是闰年； //2. 如果能被100整除，不是闰年.； //3. 如果能被400整除，是闰年.。 星期五, 23. 八月 2019 07:42下午

**

**

l