0%

(续)deepin环境下hexo+coding博客搭建

放一点写博客时或者在博客中遇到的问题

加入Local Search功能

最开始使用next主题的muse风格加入了搜索功能貌似没反应,然后换成了Pisces风格。可以在侧栏使用搜索来检索文章。
安装hexo-generator-searchdb,在站点的根目录下执行以下命令:

1
$ npm install hexo-generator-searchdb --save

编辑站点配置文件,新增以下内容到任意位置:

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

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

1
2
3
# Local search
local_search:
enable: true

添加博客文章分页显示

修改站点配置文件blog/config.yml,在底部加入下列代码(如果有的话就修改)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Plugins
index_generator:
per_page: 20 ##首页默认10篇文章标题,如果值为0不分页

archive_generator:
per_page: 40 ##归档页面默认10篇文章标题,如果值为0不分页
yearly: true ##生成年视图
monthly: true ##生成月视图

tag_generator:
per_page: 40 ##标签页面默认10篇文章,如果值为0不分页

category_generator:
per_page: 40 ##分类页面默认10篇文章,如果值为0不分页

文章内部和文章间的跳转链接

文章内部的跳转使用HTML的锚点

1
2
3
[直接跳转到123](#jump)

<span id = "jump">123</span>

这种方法是锚点的跳转的,Markdown里面有一种更好的方法、
这是你的# 标题一的写法,如果要跳转到该位置,直接使用[标题一](#标题一)
按照这个思路,二级和三级标题理论上应该是##标题二,但是我看hexo渲染都渲染成一个井号也就是#标题二了,所以我在使用的时候依旧使用[标题二](#标题二),如果有 则使用 - 替换,如 标题 A,对应 [标题 A](#标题-A)
所以使用的时候需要查看下自己的二级标题的url,看有几个#来进行使用

在文章间的跳转

1
2
3
4
5
{% post_link 文章文件名(不要后缀) 文章标题(可选) %}

如文章文件名为Hello-World.md:
{% post_link Hello-World %}
{% post_link Hello-World 你好世界 %}

markdown字体颜色&&背景色修改

字体,字号和颜色编辑如下代码

1
2
3
4
5
6
7
<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=#0099ff size=7 face="黑体">color=#0099ff size=72 face="黑体"</font>
<font color=#00ffff size=72>color=#00ffff</font>
<font color=gray size=72>color=gray</font>
<font color=red>color=red</font>

Size:规定文本的尺寸大小。可能的值:从 1 到 7 的数字。浏览器默认值是 3

背景色修改
Markdown本身不支持背景色设置,需要采用内置html的方式实现:借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色的功能。举例如下:

1
<table><tr><td bgcolor=orange>背景色是:orange</td></tr></table>

文章中换行:

方法1: 连续两个以上空格+回车
方法2:使用html语言换行标签:

首行缩进两个字符:(每个表示一个空格,连续使用两个即可)

1
2
&ensp; 半角的空格
&emsp; 全角的空格

如何使首页不显示全文

主题配置文件(eg.blog/themes/next/_config.yml)中修改auto_excerpt,length就是摘要显示的长度啦。

1
2
3
auto_excerpt:
enable: true
length: 150

当然也可在文本中添加,同wordpress一样,<!--more-->之上的内容为摘要。


markdown网页链接中有括号的处理方法

在使用链接中网页1这样的网址无法正确识别。
在知乎上找到的答案,将1,2写到文章最底部就好了

1
2
3
[谷歌][1] [推特][2]
[1]:google.com/s?wq=(xxx)
[2]:twitter.com

hexo 按照修改时间排序

google找到的答案–>github-issue:请问可以按修改时间排序吗
具体的方式就是在 blog/_config.yml 中修改,order_by 变成 -updated 即可

1
2
3
4
index_generator:
path: ''
per_page: 15 ##首页默认 10 篇文章标题,如果值为 0 不分页
order_by: -updated

使用腾讯云 CDN 加速

注意需要有已经备案的域名才可以使用 CDN 的功能
2019.2.18,Coding Page 的服务太不稳定了,尝试使用 CDN 加速,看看效果。
腾讯云 CDN
申请之后注意 CNAME 的设置

  • 腾讯云 CDN 中源站地址填 ping 到的 cugxuan.coding.me的 ip 地址
  • DNS 解析选择 blog 的 CNAME 设置,填腾讯云给你的 CNAME 值
  • Coding Page 中解析域名填你需要加速的域名(就是浏览打开的域名)

[2019.2.21] 上了 CDN,但是没有使用腾讯云的 cos,感觉腾讯云不稳,想了想还是扔到自己的腾讯云服务器了


如何收放一段文字

这是前端的方法

1
2
3
4
<details>
<summary>Test</summary>
123
</details>

效果如下

Test 123
听说好看的人都关注了我的公众号《泫言》