阿波bot Blog record life 2023-10-15T10:06:38.620Z http://19999997.xyz/ 阿波bot Hexo 3D-model-002 http://19999997.xyz/3D/3D-model-002.html 2023-10-15T10:05:54.000Z 2023-10-15T10:06:38.620Z 这是一个机械模型

展示

]]> <p>这是一个机械模型 dictation-day-004 http://19999997.xyz/dictations/dictation-day-004.html 2023-10-15T09:55:35.000Z 2023-10-15T10:03:55.660Z dictation day 000

dictation-day-004

视频

dictation day 003|dictation day 005

]]> <p>dictation day 000 3D-model-001 http://19999997.xyz/3D/3D-model-001.html 2023-10-14T06:33:00.000Z 2023-10-15T10:07:27.986Z 这是第一个模型

展示

如何呈现

设置如下文件结构

1
2
3
4
5
6
7
8
9
10
11
12
13
├─js
│  ├─modelJS #放置模型的js加载文件及配置文件
│  └─three
│      ├─build #three js 本体
│      ├─jsm #插件文件
│      │  ├─controls
│      │  ├─libs
│      │  │  └─draco
│      │  ├─loaders
│      │  │  └─lwo
│      │  └─utils
│      └─models #模型文件
│          └─001

文章中放入以下代码

1
2
3
4
5
6
7
8
9
10
<div id="webgl" style="margin-top: 10px; margin-left: 10px;"></div>
<script type="importmap">
    {
        "imports": {
            "three": "../js/three/build/three.module.js",
            "three/addons/": "../js/three/jsm/"
        }
    }
</script>
<script type="module" src="../js/modelJS/001.js"></script>
]]> <p>这是第一个模型 dictation-day-003 http://19999997.xyz/dictations/dictation-day-003.html 2023-10-11T15:00:50.000Z 2023-10-11T15:08:06.797Z dictation day 003

dictation-day-003

dictation day 002|dictation day 004

]]> <p>dictation day 003 dictation-day-002 http://19999997.xyz/dictations/dictation-day-002.html 2023-10-11T14:47:31.000Z 2023-10-11T15:08:04.061Z dictation day 002

dictation-day-002

dictation day 001|dictation day 003

]]> <p>dictation day 002 dictation-day-001 http://19999997.xyz/dictations/dictation-day-001.html 2023-09-29T08:35:31.000Z 2023-10-11T15:08:00.316Z dictation day 001

dictation-day-001

dictation day 002

]]> <p>dictation day 001 markdown it plugins http://19999997.xyz/markdown-it-plugins.html 2023-09-28T06:25:06.000Z 2023-10-14T08:56:19.281Z markdown it 插件的使用

markdown it plugins

hexo-renderer-markdown-it-plus

markdown-it-latex2img【额外】

markdown-it-katex【额外】

markdown-it-abbr【默认】

markdown-it-attrs【额外】

markdown-it-deflist【默认】

markdown-it-emoji【默认】

markdown-it-footnote【默认】

markdown-it-ins【默认】

markdown-it-mark【默认】

markdown-it-sub【默认】

markdown-it-sup【默认】

markdown-it-toc【默认】

markdown-it-bracketed-spans

markdown-it-spoiler【额外】

启用

1
2
3
4
5
- plugin: 
    name: markdown-it-spoiler
    enable: true
    options:
      title: "你知道得太多了"

配置

在themes\purabo\source\css\style.css中添加样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* spoiler 隐藏文本 start */
/* !!balabala!! 鼠标放置时显示内容。 */
/* !!balabala!!{.bulr} 鼠标选中时显示内容 */
.spoiler:not(.bulr) {
  background-color: #333;
  color: var(#333);
  text-shadow: none;
  transition: color .3s;
  padding:0 .1875rem;
}

.spoiler:hover {
  color: #FFF;
}

.spoiler.bulr {
  text-shadow: rgba(0, 0, 0, .7) 0rem 0rem .625rem;
  color: transparent;
}

/* spoiler 隐藏文本 end */

使用

1
2
!!balabala!! 鼠标放置时显示内容。
!!balabala!!{.bulr} 鼠标选中时显示内容

效果

20230928161626

]]> <p>markdown it 插件的使用 插件推荐 http://19999997.xyz/guide/hexo-plugin-recommend.html 2023-09-26T10:04:29.000Z 2023-10-14T08:54:31.903Z 必装插件

hexo-wordcount-必装插件

hexo-wordcount

  • 安装
1
npm install hexo-wordcount --save
  • 配置
    【内置支持】

hexo-generator-index-pin-top

  • 安装
1
2
npm uninstall --save hexo-generator-index #首先卸载 hexo-generator-index
npm install --save hexo-generator-index-pin-top
  • 配置
    【内置支持】

选装插件[配置文件写到站点_config.yml里面]

hexo-tag-mmedia

  • 安装
1
npm install hexo-tag-mmedia --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
mmedia:
# https://dplayer.diygod.dev/zh/guide.html#%E5%8F%82%E6%95%B0
  dplayer:
    cdn: https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js
    style_cdn: https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css
    hls_cdn: https://cdn.jsdelivr.net/npm/hls.j/dist/hls.min.js
    dash_cdn: https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js
    shaka_dash_cdn: https://cdn.jsdelivr.net/npm/shaka-player/dist/shaka-player.compiled.js
    flv_cdn: https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js
    webtorrent_cdn: https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js
    default:
  audio:
    default:
  video:
    default:
  aplayer:
    js: https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.js
    css: https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.css
    default:
      contents:
  meting:
    js: https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js
    api:
    default:
  bilibili:
    default:
      page: 1
      danmaku: true
      allowfullscreen: allowfullscreen
      sandbox: allow-top-navigation allow-same-origin allow-forms allow-scripts allow-popups
      width: 100%
      max_width: 850px
      margin: auto

hexo-neat

  • 安装
1
npm install --save hexo-neat
  • 配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# hexo-neat
neat_enable: true
neat_html:
  enable: true
  exclude:  
neat_css:
  enable: true
  exclude:
    - '*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

hexo-lazyload-image

  • 安装
1
npm install hexo-lazyload-image --save
  • 配置文件
1
2
3
4
lazyload:
  enable: true 
  onlypost: false
  loadingImg: # eg. ./images/loading.png # 可以配置加载图片

hexo-renderer-markdown-it-plus

  • 安装
1
2
3
npm uninstall --save hexo-renderer-marked # 卸载 hexo-renderer-marked
npm install --save hexo-renderer-markdown-it-plus
npm install --save markdown-it-katex
  • 配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# plugin markdown_it_plus
markdown_it_plus:
  highlight: true
  html: true
  xhtmlOut: true
  breaks: true
  langPrefix:
  linkify: true
  typographer:
  quotes: “”‘’
  plugins:
    # for math formula
    - plugin:
        name: markdown-it-katex
        enable: true
    - plugin:
        name: markdown-it-mark
        enable: false
mathjax:
  eanble: true

hexo-generator-feed

  • 安装
1
npm install --save hexo-generator-feed

hexo-generator-sitemap

  • 安装
1
npm install hexo-generator-sitemap --save

hexo-blog-encrypt

  • 安装
1
npm install --save hexo-blog-encrypt
  • 配置
1
2
3
4
5
6
7
8
9
10
# Security
encrypt: # hexo-blog-encrypt
  enable: true
  #silent: true #是否启用log true为不启用
  abstract: 有东西被加密了, 请输入密码查看.
  message: 您好, 这里需要密码.
  #tags: [{name: 加密, password: @abo}]
  theme: xray #加密框的主题
  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

详细配置请见官网

hexo-generator-json-content

  • 安装
1
npm install --save hexo-generator-json-content

hexo-statistics-charts

  • 安装
1
npm install --save hexo-statistics-charts
  • 配置
    【内置支持】
    详情请见官网

hexo-baidu-url-submit

  • 安装
1
npm install --save hexo-baidu-url-submit
  • 配置
1
2
3
4
5
# 站点配置文件
deploy:
- type: s3 ## 这是我原来的deployer
  ...
- type: baidu_url_submitter ## 这是新加的
1
2
3
4
5
6
7
# 站点配置文件
baidu_url_submit:
  count: 1 ## 提交最新的一个链接
  host: 19999997.xyz ## 在百度站长平台中注册的域名
  token: your_token ## 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里

hexo-dynamic-config【有冲突】

  • 安装
1
npm install hexo-dynamic-config --save

1. Hexo-theme-purabo-使用教程
2. Hexo-theme-purabo-快速开始
3. Hexo-theme-purabo-主题及站点配置
4. 插件推荐

]]> <h2 id="必装插件"><a class="markdownIt-Anchor" href="#必装插件"></a> 必装插件</h2> <h3 id="hexo-wordcount-必装插件"><a class="markdownIt-Anchor" href="#hexo Hexo-theme-purabo 主题及站点配置 http://19999997.xyz/guide/hexo-theme-purabo-configurations.html 2023-09-26T10:04:10.000Z 2023-10-14T08:54:42.856Z 配置文件

hexo的配置文件有两个

  1. Hexo 根目录下的_config.yml。这是 Hexo 的配置文件，对整个站点生效（无论使用哪个主题）。
  2. purabo 根目录下的 _config.yml。这是 Stun 的配置文件，只对主题生效。

首先我们把 purabo 根目录下的配置文件 _config.yml复制到 Hexo 根目录下并重命名为 _config.purabo.yml。之后改主题配置文件就只改_config.purabo.yml即可。

主题配置

修改_config.purabo.yml中的内容

1. 设置语言

打开_config.purabo.yml，设置language: zh-CN

2. 设置导航菜单

在_config.purabo.yml中：

menu:左侧导航菜单
menu_icons:导航菜单图标

想改图标可以看这里

3. 自定义功能设置

3.1 在purabo中，可以选择以下功能是否开启

  • go_top:一键回顶部
  • custom_img:自定义图片大小

    • 在图片链接后加 ?widthxheight ?widthx ?xheight ?scale

  • copy_button: 一键复制按钮
  • about: 关于页面
    • chart: 博客图表统计
  • fold_action: 可折叠功能
  • preloader: 图片预加载功能

3.2 在tag_cloud中可以选择是否开启标签云

3.3 在site中，可以选择以下功能是否开启

  • copyright: 底部版权信息是否显示
  • visitor: 底部站点点击数访客数统计
  • theme_authoer: 是否显示主题作者信息
  • site_time:建站时间是否显示
    • date: 建站日期，格式YYYY-MM-DD
    • time: 建站时间, 格式HH:mm:ss
    • frequency: 时间刷新时间，1000为1秒

3.4 fancybox: 是否开启点击图片查看大图功能
fancybox: true

3.5 search: 站内搜索功能

1
2
3
search:
  insight: true # you need to install `hexo-generator-json-content` before using Insight Search
  baidu: false # you need to disable other search engines to use Baidu search

3.6 donate: 赞赏功能

3.7 share: 分享功能

1
2
3
4
5
# weibo,qq,qzone,wechat,tencent,douban,diandian,facebook,twitter,google,linkedin
share:
  enable: true  # 是否启用分享
  sites: weibo,qq,wechat,facebook,twitter  # PC端显示的分享图标
  mobile_sites: weibo,wechat,qq,qzone  # 移动端显示的分享图标

3.8 github:

3.9 pagination 分页功能

1
2
3
4
5
6
pagination: # 分页功能
  number: false
  prev: 
    alwayShow: true
  next:
    alwayShow: true

4. 评论功能

在comment中：
type：启用哪种评论系统

utterances

详情请见 utterances, 及注释

1
2
3
4
5
6
utterances:
    repo: abobot/hexo-blog-comments
    issue_term: pathname 
    label: 💬comments 
    theme: github-light 
    crossorigin: anonymous
disqus
youyan
1
2
youyan: 
    uid: 1783844 # enter youyan uid
livere
1
2
livere:
    uid: # enter youyan uid
gitment
1
2
3
4
5
6
gitment:
    githubID: 
    repo: 
    ClientID: 
    ClientSecret: 
    lazy: false
gitalk

详情请见 gitalk, [评论系统](https://hwame.top/20200520/hello-hexo-configuration.html#5-评论系统及注释

1
2
3
4
5
6
gitalk: # gitalk. https://gitalk.github.io/
    owner:  #必须. GitHub repository 所有者，可以是个人或者组织。
    admin:  #必须. GitHub repository 的所有者和合作者 (对这个 repository 有写权限的用户)。
    repo:  #必须. GitHub repository.
    ClientID:  #必须. GitHub Application Client ID.
    ClientSecret:  #必须. GitHub Application Client Secret.

valine

详情请见 valine, 及注释

1
2
3
4
5
6
7
8
9
10
11
12
13
valine: # Valine. https://valine.js.org
    appid:  # your leancloud application appid
    appkey:  # your leancloud application appkey
    notify: false # mail notifier , https://github.com/xCss/Valine/wiki
    verify: false # Verification code
    placeholder: Just go go # comment box placeholder
    avatar: mm # gravatar style
    meta: nick,mail,link # custom comment header
    pageSize: 10 # pagination size
    visitor: false # Article reading statistic https://valine.js.org/visitor.html
    enableQQ: true
    recordIP: true
    requiredFields: ['mail',] # Nick必填则需3+字符

5. 个人信息profile

根据需要填写

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
# profile
profile:
  enabled: true # Whether to show profile bar
  avatar: images/avatar.jpg
  gravatar: # Gravatar email address, if you enable Gravatar, your avatar config will be overriden
  author: 阿波bot
  author_title: many things want to learn.
  author_description: 个人简介。
  location: ChangSha, China
  follow: https://github.com/aboobt
  # Social Links
  social:
    links:
      github: https://github.com/abobot
      # weibo: http://weibo.com/
      zhihu: https://www.zhihu.com/people/abobot
      gitee: https://gitee.com/abobot
      douban: https://www.douban.com/people/abobot/
      # twitter: https://twitter.com/
      # facebook: /
      # dribbble: /
      # behance: https://www.behance.net/
      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/aboobt
    Blog: http://abobot.github.io
    微博: http://weibo.com/
    豆瓣: https://www.douban.com/people/abobot/
    # 花瓣: http://huaban.com/
    # Behance: https://www.behance.net/
  # My Personal Labels
  labels:
    - 前端不会
    - 前端开发不会
    - 前端重构不会
    - Web前端不会
    - 网页重构不会
  # My Personal Works
  works:
    name:
      link: 1999997.xyz
      date: 2021
  # My Personal Projects
  projects:
    abobot/hexo-theme-purabo: https://github.com/abobot/hexo-theme-purable

站点配置

参考 Hexo配置
其他可参考 这个大佬的设置

1. Hexo-theme-purabo-使用教程
2. Hexo-theme-purabo-快速开始
3. Hexo-theme-purabo-主题及站点配置
4. 插件推荐

]]> <h2 id="配置文件"><a class="markdownIt-Anchor" href="#配置文件"></a> 配置文件</h2> <p><code>hexo</code>的配置文件有两个</p> <ol> <li>Hexo 根目录下的<code>_config.yml Hexo-theme-purabo 快速开始 http://19999997.xyz/guide/quickly-start.html 2023-09-26T10:03:31.000Z 2023-10-14T08:54:26.789Z 快速开始

安装步骤

2.1 前期准备

确保安装了

  1. node.js
  2. git
  3. npm

安装Hexo

安装完整版hexo

1
npm install -g hexo-cli

2.2 建站

参考 【官方中文文档】

在合适位置打开cmd，输入

1
2
3
hexo init <folder>
cd <folder>
npm install

2.3 启动服务器

1
2
3
hexo clean
hexo g
hexo s

“一键三连”之后在http://localhost:4000就可以看到生成的博客了

CTRL + C可以停止服务器

主题

安装purabo主题

  1. 在Hexo根目录下，执行命令：
1
git clone git@github.com:abobot/hexo-theme-purabo.git themes/purabo
  1. 更新
1
2
cd themes/purabo
git puull origin master
  1. 使用

修改 Hexo 根目录下的 _config.yml 文件：
theme: purabo

必装插件

在Hexo根目录下，执行命令

  1. (hexo-wordcount)[https://github.com/willin/hexo-wordcount]

npm install hexo-wordcount --save

按照2.3可以看到效果
20230926002938

新建文章

新建页面

默认只开启了，首页和归档，如果你想打开其他页面

分类

  1. hexo new page categories
  2. 打开source\categories\index.md,在以下位置添加：
1
2
3
4
---
type: categories
layout: categories
---

标签

  1. hexo new page tags
  2. 打开source\tags\index.md,在以下位置添加：
1
2
3
4
---
type: tags
layout: tags
---

项目

  1. hexo new page repository
  2. 打开source\repository\index.md,在以下位置添加：
1
2
3
4
---
type: repository
layout: repository
---

相册

  1. hexo new page gallery
  2. 打开source\gallery\index.md,在以下位置添加：
1
2
3
4
---
type: gallery
layout: gallery
---

书单

  1. hexo new page books
  2. 打开source\books\index.md,在以下位置添加：
1
2
3
4
---
type: books
layout: books
---

友链

  1. hexo new page links
  2. 打开source\links\index.md,在以下位置添加：
1
2
3
4
---
type: links
layout: links
---

关于

  1. hexo new page about
  2. 打开source\about\index.md,在以下位置添加：
1
2
3
4
---
type: about
layout: about
---

404

  1. hexo new page about
  2. 打开source\about\index.md,将内容改为：
1
2
3
4
5
6
7
---
title: 404 Not Found：该页无法显示
toc: false
comments: false
permalink: /404
---
<script type="text/javascript" src="//www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="<%- config.url %>" homePageName="回到我的主页"></script>

部署

参考 部署到github

需要安装插件
npm install hexo-deployer-git --save

1. Hexo-theme-purabo-使用教程
2. Hexo-theme-purabo-快速开始
3. Hexo-theme-purabo-主题及站点配置
4. 插件推荐

]]> <h1 id="快速开始"><a class="markdownIt-Anchor" href="#快速开始"></a> 快速开始</h1> <h2 id="安装步骤"><a class="markdownIt-Anchor" href="#安装步骤"></a> 安装步骤</h2 Hexo-theme-purabo-使用教程 http://19999997.xyz/guide/hexo-theme-purabo-guides.html 2023-09-26T10:02:11.000Z 2023-10-01T03:13:28.359Z

1. Hexo-theme-purabo-使用教程
2. Hexo-theme-purabo-快速开始
3. Hexo-theme-purabo-主题及站点配置
4. 插件推荐

]]> <blockquote> <p><a href="./hexo-theme-purabo-guides">1. Hexo-theme-purabo-使用教程</a><br /> <a href="./quickly-start">2. Hexo-theme-purabo-快速开始 Function test http://19999997.xyz/function-test.html 2023-09-26T08:32:49.000Z 2023-09-28T08:25:47.574Z
this is for fold function

you can see me.

公式

quotes: “”‘’

“quote”

1
2
3
for(var i = 0; i < 10; i++){

}

inline

# The opening $ must have a non-space character immediately to its right, while the closing $ must have a non-space character immediately to its left, and must not be followed immediately by a digit.

block

quiz

spoiler

balabala 鼠标放置时显示内容。
balabala 鼠标选中时显示内容

H2O2

x2

😅 # 流汗黄豆
😘
💍
🎶

H20
29th

]]> <div><div class="fold_hider"><div class="close hider_title">this is for fold function</p> </div></div><div class="fold"> <p>you can see me.< Hexo-pure改造计划——添加utterances评论支持 http://19999997.xyz/hexo-adds-utterances-support.html 2023-09-21T09:52:36.000Z 2023-10-14T08:56:02.814Z 添加utterances评论支持。由于pure主题集成了几个评论系统，所以增加一个还算简单。

参考链接
Hexo NexT 使用 utterances 评论区
hexo-fluid添加utterances评论功能(详细图文过程)

新建utterances.ejs

在themes\pure\layout\_script\_comment\目录新建utterances.ejs文件，文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
<% if (typeof(script) !== 'undefined' && script) { %>
  <script src="https://utteranc.es/client.js" 
          repo=<%= theme.comment.utterances.repo %>
          issue-term=<%= theme.comment.utterances.issue_term %>
          label=<%= theme.comment.utterances.label %>
          theme=<%= theme.comment.utterances.theme %> 
          crossorigin=<%= theme.comment.utterances.crossorigin %>
          async>
  </script>
<% } %>

更改comment.ejs文件

注意：comment.ejs文件有两个

一、更改themes\pure\layout\_script\comment.ejs代码

打开themes\pure\layout\_script\comment.ejs，在最后添加如下代码：

1
2
3
4
5
<% } else if (theme.comment.type === 'valine') { %>
    <%- partial('_script/_comment/valine', { script: true }) %>     
<% } else if (theme.comment.type === 'utterances') { %>
    <%- partial('_script/_comment/utterances', { script: true }) %>
<% } %>

注意

1
2
3
<% } else if (theme.comment.type === 'valine') { %>
    <%- partial('_script/_comment/valine', { script: true }) %>     
<% } %>

这段代码是原来就有的，也可以插在这个文件其他合适的位置

二、更改themes\pure\layout\_partial\post\comment.ejs代码

打开themes\pure\layout\_partial\post\comment.ejs,插入如下代码

1
2
3
4
5
<% } else if (theme.comment.type === 'gitalk') { %>

<% } else if (theme.comment.type === 'utterances') { %>
       
<% } else if (theme.comment.type === 'valine') { %>

注意

1
2
3
<% } else if (theme.comment.type === 'gitalk') { %>

 <% } else if (theme.comment.type === 'valine') { %>

这段代码是原来就有的，<% } else if (theme.comment.type === 'utterances') { %>，也可以插在其他合适位置

更改主题配置文件

打开themes\pure\_config.yml

找到comment,在对应位置加入：

1
2
3
4
5
6
7
8
9
comment:
  type: utterances  # 启用哪种评论系统
  # 20230921 utterances
  utterances:
    repo: abobot/hexo-blog-comments
    issue_term: pathname 
    label: 💬comments 
    theme: github-light 
    crossorigin: anonymous

其中的参数可以去https://utteranc.es/了解

完毕

]]> <p>添加utterances评论支持。由于<code>pure</code>主题集成了几个评论系统，所以增加一个还算简单。 Hexo-pure改造计划——添加代码块复制按钮 http://19999997.xyz/hexo-adds-codecopy-button.html 2023-09-21T02:52:41.000Z 2023-09-27T13:37:02.058Z 为代码块添加复制按钮

方法一（弃用）【应该是代码位置没插对】

原因：生成网页之后函数变了。虽然一开始弄的时候是好的，不知道咋回事。

作者说：坑：理论上可以在其他地方添加，但是必须保证代码在jq以及页面dom加载后运行。

正常应该是

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

addLoadEvent(()=>{
    $('.highlight').each(function (i, e) {
      var $wrap = $('<div>').addClass('highlight-wrap')
      $(e).after($wrap)
      $wrap.append($('<button>').addClass('copy-btn').append('copy').on('click', function (e) {
        var code = $(this).parent().find(".code")[0].innerText
        
            code += "\n/**\n* 感谢您复制代码，使用代码请注明引用出处\n* kajweb @ https://blog.iwwee.com\n*/"
        
        var ta = document.createElement('textarea')
        document.body.appendChild(ta)
        ta.style.position = 'absolute'
        ta.style.top = '0px'
        ta.style.left = '0px'
        ta.value = code
        ta.select()
        ta.focus()
        var result = document.execCommand('copy')
        document.body.removeChild(ta)
        
          if(result)$(this).text('copy success')
          else $(this).text('copy failed')
        
        $(this).blur()
      })).on('mouseleave', function (e) {
        var $b = $(this).find('.copy-btn')
        setTimeout(function () {
          $b.text('copy')
        }, 300)
      }).append(e)
    })
  })

而我的却是

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

addLoadEvent(() =>{
    $(".highlight").each(function(t, e) {
        var n = $("<div>").addClass("highlight-wrap");
        $(e).after(n),
        n.append($("<button>").addClass("copy-btn").append("复制").on("click",
        function(t) {
            var e = $(this).parent().find(".code")[0].innerText,
            n = document.createElement("textarea");
            document.body.appendChild(n),
            n.style.position = "absolute",
            n.style.top = "0px",
            n.style.left = "0px",
            n.value = e,
            n.select(),
            n.focus();
            e = document.execCommand("copy");
            document.body.removeChild(n),
            e ? $(this).text("复制成功") : $(this).text("复制失败"),
            $(this).blur()
        })).on("mouseleave",
        function(t) {
            var e = $(this).find(".copy-btn");
            setTimeout(function() {
                e.text("复制")
            },
            300)
        }).append(e)
    })
})

参考链接
为代码块增加复制按钮

添加全局函数 addLoadEvent

在/themes/pure/source/js目录下打开application.js，在文件最后追加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

/**
* 感谢您复制代码，使用代码请注明引用出处
* kajweb @ https://blog.iwwee.com
*/

新增按钮

pure默认情况下是没有代码复制功能的，此时需要对hexo增加复制代码块功能。
首先在/themes/pure/layout/_partial目录下新增article-copy-code.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
<% if(theme.codeblock.copy_button.enable){ %>
  <style>
    .copy-btn {
      display: inline-block;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 700;
      line-height: 20px;
      color: #333;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      background-color: #eee;
      background-image: linear-gradient(#fcfcfc, #eee);
      border: 1px solid #d5d5d5;
      border-radius: 3px;
      user-select: none;
      outline: 0;
    }

    .highlight-wrap .copy-btn {
      transition: opacity .3s ease-in-out;
      opacity: 0;
      padding: 2px 6px;
      position: absolute;
      right: 4px;
      top: 8px;
      z-index: 2;
    }

    .highlight-wrap:hover .copy-btn,
        .highlight-wrap .copy-btn:focus {
      opacity: 1
    }

    .highlight-wrap {
      position: relative;
    }
  </style>
  
  <script>
    addLoadEvent(()=>{
      $('.highlight').each(function (i, e) {
        var $wrap = $('<div>').addClass('highlight-wrap')
        $(e).after($wrap)
        $wrap.append($('<button>').addClass('copy-btn').append('<%= __("codeblock.copy_button") %>').on('click', function (e) {
          var code = $(this).parent().find(".code")[0].innerText
          <% if(theme.codeblock.copyright.enable){ %>
              code += "<%= theme.codeblock.copyright.content %>"
          <% } %>
          var ta = document.createElement('textarea')
          document.body.appendChild(ta)
          ta.style.position = 'absolute'
          ta.style.top = '0px'
          ta.style.left = '0px'
          ta.value = code
          ta.select()
          ta.focus()
          var result = document.execCommand('copy')
          document.body.removeChild(ta)
          <% if(theme.codeblock.copy_button.result){ %>
            if(result)$(this).text('<%= __("codeblock.copy_success") %>')
            else $(this).text('<%= __("codeblock.copy_failure") %>')
          <% } %>
          $(this).blur()
        })).on('mouseleave', function (e) {
          var $b = $(this).find('.copy-btn')
          setTimeout(function () {
            $b.text('<%= __("codeblock.copy_button") %>')
          }, 300)
        }).append(e)
      })
    })
  </script>
<% } %>

插入到页面

编辑/themes/pure/layout/layout.ejs，在</body>前面一行增加<%- partial('_partial/article-copy-code')%>

1
2
3
4
5
6
7
8

  <%- body %>
  <%- partial('_common/footer', null, {cache: !config.relative_link}) %>
  <%- partial('_common/script', {post: page}) %>
  <%- partial('_partial/article-copy-code') %>
</body>
</html>

理论上可以在其他地方添加，但是必须保证代码在jq以及页面dom加载后运行。

增加语言文件

在/themes/pure/languages目录下选择对应的语言文件，在文件后面增加：

1
2
3
4
codeblock:
  copy_button: 复制
  copy_success: 复制成功
  copy_failure: 复制失败

增加主题配置文件

打开themes/pure/_config.yml，在文件末尾添加

1
2
3
4
5
6
7
codeblock: 
  copy_button: 
    enable: true
    result: true
  copyright:
    enable: true
    content:

方法二

参考链接
Hexo NexT 代码块复制功能
Hexo NexT 代码块复制功能

]]> <p>为代码块添加复制按钮 Hexo 静态博客添加可折叠内容 http://19999997.xyz/add-fold-tag.html 2023-09-21T02:13:27.000Z 2023-09-27T13:34:25.756Z 想在在博客里面插入 dictation 视频, 然后视频底下可以输入内容，内容可折叠。

参考连接

Hexo静态博客添加可折叠内容 | Bambrow’s Blog

使用方法及效果

代码一：

1
2
3
{% fold 我是可折叠内容 %}
你看到了隐藏起来的我！
{% endfold %}

效果

我是可折叠内容

你看到了隐藏起来的我！

代码二：

1
2
3
{% fold 我是带有`行内代码块`的可折叠内容 %}
你又看到了隐藏起来的我！
{% endfold %}

效果

我是带有行内代码块的可折叠内容

你又看到了隐藏起来的我！

添加自定义标签

首先在themes\pure\scripts\下新建fold_tag.js文件，加入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
/* global hexo */
// Usage: {% fold Title %} Something {% endfold %}
function fold(args, content) {
  var text = args.join(' ');
  if(!text) text = "点击显示/隐藏";
  return '<div><div class="fold_hider"><div class="close hider_title">'
    + hexo.render.renderSync({text: text, engine: 'markdown'}).replace(/^<p>/, '').replace(/<\/p>$/, '')
    + '</div></div><div class="fold">\n'
    + hexo.render.renderSync({text: content, engine: 'markdown'})
    + '\n</div></div>';
}
hexo.extend.tag.register('fold', fold, {ends: true});

添加折叠文本代码

新建themes\pure\layout\_partial\fold_action.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
<% if(theme.fold_action.enable){ %>
    <style>
        /* 折叠内容 */
        /* toggle hider title */
        .hider_title {
            display: contents;
            cursor: pointer;
            background: #05f040c2;
            font-size:15px;
        }

        /* toggle indicators */
        .close:before {
            padding-left: .5em;
            padding-right: .5em;
            content: "▼";
        }
        .open:before {
            padding-left: .5em;
            padding-right: .5em;
            content: "▲";
        } 
        .fold_hider {
        background: #eeeeee;
        }
        .fold {
        background: rgb(241, 208, 208);
        }
    </style>
    
    <script>
        $(document).ready(function(){
        $(document).on('click', '.fold_hider', function(){
        $('>.fold', this.parentNode).slideToggle();
        $('>:first', this).toggleClass('open');
        });
        //默认情况下折叠
        $("div.fold").css("display", "none");
        });
      </script>
  <% } %>

<style>...<\style> 部分代码可以放到themes\pure\source\css\style.css文件最后

在themes\pure\_config.yml中添加配置

1
2
3
# 文本折叠按钮
fold_action:
  enable: true

在themes\pure\layout\layout.ejs中添加

1
2
<!-- 文本折叠按钮 -->
<%- partial('_partial/fold_action')%>

添加位置在最后一个</body>前面

修改样式

找到文件themes\pure\source\css\style.css中大约5549行，在code后添加,.hider_title code,完整代码为

1
2
3
4
5
6
7
8
9
10
code,.hider_title code {
  text-shadow: 0 1px #fff;
  padding: 0.2em 0.4em;
  margin: 0 0.3em;
  color: #FF4500;
  background: #F0FFFF;
  /* 行代码背景颜色 */
  border-radius: 3px;
  font-size: 85%;
}
]]> <p>想在在博客里面插入 dictation 视频, 然后视频底下可以输入内容，内容可折叠。 Hexo blog insert video http://19999997.xyz/hexo-blog-insert-video.html 2023-09-18T05:20:00.000Z 2023-10-14T08:55:14.501Z 文章描述

参考链接

GitHub - MoePlayer/hexo-tag-dplayer: Embed dplayer in Hexo posts/pages

指南 | DPlayer

1. 安装插件

在博客目录使用 --save安装

npm install hexo-tag-dplayer --save

2. 使用

方法一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% dplayer

"url=/videos/test.mp4"
"autoplay=true"
"width=50%"
"height"="50%"
"theme=#FFFFFF"
"hotkey=true"
"volume=0.7"
"mutex=true"
<!-- 水印 -->
"logo=/videos/logo.jpg"
<!-- 封面 -->
"pic=/videos/pic.png"
<!-- 缩略图(不好用好像) -->
"thumbnails=/videos/thumbnails.jpg"

%}

以上能用但不是很好用，找到一个替代hexo-tag-mmedia

3. 更新使用 hexo-tag-mmedia

  1. 卸载 hexo-tag-dplayer
1
npm uninstall hexo-tag-dplayer
  1. 安装hexo-tag-mmedia
1
npm install hexo-tag-mmedia --save
  1. 配置

参考连接

hexo-tag-mmedia | Easy Hexo 👨‍💻

GitHub - u2sb/hexo-tag-mmedia: hexo插入aplayer、meting、dplayer、bilibili、哔哩哔哩、西瓜视频 标签

hexo-tag-mmedia | 帅比网

Dplayer官方中文教程

格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% mmedias "dplayer" "url:/videos/test.mp4" "pic:/videos/pic.png" "logo:/videos/logo.jpg" "thumbnails:/videos/thumbnails.jpg" %}

{
    highlight: [
        {
            time: 5,
            text: '这是第 5 秒',
        },
        {
            time: 8,
            text: '这是 8 秒',
        },
    ]
}

{% endmmedias %}
]]> <p>文章描述 Hexo-pure改造计划——添加文章加密 http://19999997.xyz/hexo-adds-encrypt.html 2021-10-24T07:14:08.000Z 2023-09-27T13:39:32.312Z
]]> 有东西被加密了, 请输入密码查看. hexo-pure改造计划--github-pages-action-自动部署 http://19999997.xyz/hexo-auto-deploy.html 2021-09-29T12:56:02.000Z 2023-09-27T13:40:56.552Z github-pages-action-自动部署。<–!more -->

]]> <p>github-pages-action-自动部署。&lt;–!more --&gt;</p> Hexo-pure改造计划——后期添加域名 http://19999997.xyz/hexo-adds-a-domain-name.html 2021-09-28T16:12:22.000Z 2023-09-27T13:35:36.642Z 文章描述

Hexo pure改造计划——后期添加域名

购买域名

获取github pages IP地址

image-20210928124841383

  • 获得IP地址185.199.108.153

新建CNAME文件

  • 在./source文件夹下新建CNAME文件，内容为你的域名

image-20210928125321640

  • 执行hexo的一键三连
1
2
3
hexo clean
hexo g
hexo s

添加DNS解析

  • 我是在腾讯云买的域名，其他地方的不知道

  • 登录DNSPOD

  • 点击侧边栏DNS解析→我的域名

image-20210928130438822

  • 点击域名19999997.xyz
  • 添加记录：主机记录www；记录值pages的公网ip

image-20210928131107601

  • 选择开启

image-20210928131356402

  • 现在就可以访问你自己的域名了

更改配置文件

  • 站点配置文件
    • 改url: http://abobot.github.io为url: http://1999997.xyz
  • 主题配置文件
    • 改Blog: http://abobot.github.io为Blog: http://1999997.xyz

（直接在这两个配置文件中搜索.github.io就行，然后选择性更改）

更改leancloud评论环境变量

  • 进入云引擎→设置

  • 改SITE_URL变量值为http://1999997.xyz

  • 在相同界面绑定你自己的域名

  • 重新部署

更改说说相关

  • 更改腾讯云WEB安全域名

image-20210928144452975

添加百度谷歌收录

  • 安装插件
1
npm install hexo-baidu-url-submit --save

具体步骤见Hexo插件之百度主动提交链接

]]> <p>文章描述 Hexo-pure改造计划——添加标签云 http://19999997.xyz/hexo-adds-tagcloud.html 2021-09-28T16:04:13.000Z 2023-09-27T13:35:56.754Z Hexo pure改造计划——添加标签云

安装插件

1
npm install hexo-tag-cloud --save

配置插件

将./themes/pure/layout/_widget/tagcloud.ejs修改为

1
2
3
4
5
6
7
8
9
10
11
12
<% if (site.tags.length) { %>
    <script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
    <div class="widget-wrap">
        <h3 class="widget-title"><%= __('widget.tagcloud') %></h3>
        <div id="myCanvasContainer" class="widget tagcloud">
            <canvas width="250" height="250" id="resCanvas" style="width=100%">
                <%- tagcloud() %>
            </canvas>
        </div>
    </div>
<% } %>

站点配置

在_config.yml最后添加：

1
2
3
4
5
6
7
# hexo-tag-cloud
tag_cloud:
    textFont: Trebuchet MS, Helvetica
    textColor: '#333'
    textHeight: 25
    outlineColor: '#E2E1D1'
    maxSpeed: 0.1

更新

20230918

在站点配置中添加是否启用标签选项

站点配置

在_config.yml最后添加：

1
2
3
4
5
6
7
8
tag_cloud:
    enable: true
    textFont: Trebuchet MS, Helvetica
    textColor: '#333'
    textHeight: 25
    outlineColor: '#E2E1D1'
    maxSpeed: 0.1
    pauseOnSelected: false # true 意味着当选中对应 tag 时,停止转动

配置插件

将./themes/pure/layout/_widget/tagcloud.ejs修改为

1
2
3
4
5
6
7
8
9
10
11
12
<% if (site.tags.length && config.tag_cloud.enable) { %>
  <script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
  <script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
  <div class="widget-wrap">
      <h3 class="widget-title"><%= __('widget.tagcloud') %></h3>
      <div id="myCanvasContainer" class="widget tagcloud">
          <canvas width="250" height="250" id="resCanvas" style="width=100%">
              <%- tagcloud() %>
          </canvas>
      </div>
  </div>
<% } %>
]]> <h1 id="hexo-pure改造计划添加标签云"><a class="markdownIt-Anchor" href="#hexo-pure改造计划添加标签云"></a> Hexo pure改造计划——添加标签云</h1> <h2 id="安装插件"><a class="m