静态博客不完全食用指北
NotionNext
NotionNext 是一个使用 NextJS + Notion API 实现的静态博客系统,只要在 Notion 写好文章就会自动同发布为静态博客,从而专注于写作、而不需要操心网站的维护。
文档
Docusaurus
中文网站1
2
3##快速简单地安装 Docusaurus 并搭建网站框架(包含模板文件),开启 Typescript 支持
npx create-docusaurus@latest my-website classic --typescript
npm start
Hexo
1 | npm install hexo-cli -g |
升级
1 | npm install -g npm-check-updates |
安装插件
如果你没有 pug 以及 stylus 的渲染器,请下载安装(如果安装卡着不动,可在命令后添加--registry=https://registry.npmmirror.com
):1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17npm install hexo-renderer-pug hexo-renderer-stylus --save
npm install hexo-wordcount --save
npm install hexo-abbrlink --save
npm install hexo-generator-search --save
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
npm install hexo-generator-index-pin-top --save
npm install hexo-generator-feed --save
npm install hexo-filter-nofollow --save
npm install hexo-steam-games --save
npm install hexo-tag-steam --save
npm install hexo-reference --save
npm install hexo-butterfly-swiper --save
npm install hexo-footnotes --save
npm install hexo-butterfly-article-double-row --save
npm install hexo-tag-map --save
npm install hexo-butterfly-tag-plugins-plus --save
轮播1
2
3
4
5
6
7
8
9
10
11
12
13
14swiper:
enable: true # 开关
priority: 5 #过滤器优先权
enable_page: all # 应用页面
timemode: date #date/updated
layout: # 挂载容器类型
type: id
name: recent-posts
index: 0
default_descr: 再怎么看我也不知道怎么描述它的啦!
swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖
swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖
custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁
custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法
外挂标签1
2
3
4
5
6
7
8
9
10
11
12
13
14
15# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
enable: true # 开关
priority: 5 #过滤器优先权
issues: false #issues标签依赖注入开关
link:
placeholder: /img/link.png #link_card标签默认的图标图片
CDN:
anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖
issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css
hexo 自带的 markdown 渲染插件 hexo-renderer-marked 与外挂标签语法的兼容性较差,建议将其替换成 hexo-renderer-kramed1
2npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
文章双栏布局:安装 hexo-butterfly-article-double-row 插件,然后 _config.yml
新增配置项:1
2butterfly_article_double_row:
enable: true
添加翻页样式1
2
3
4
5/* 翻页按钮居中 */
#pagination {
width: 100%;
margin: auto;
}
地图1
2{% + 标签值 + 经度 + 纬度 + 文本 + 缩放等级 + 宽 + 高 + 默认图层 + %}
{% map 120.101101,30.239119, 这里是西湖灵隐寺,据说求姻缘很灵验哦!, 15, 100%, 360px, 1 %}
| 地图名 | 标签值| 经度| 纬度| 文本 | 缩放等级(14) | 宽(100%) | 高 (360px) | 图层 (1) |
| ———————- | ——————- | ———————- | ——————- | —— | ————————- | ——————— | ———————- | ————————- |
| 混合地图 | map | -180~180 | -90~90 | 文本 | 3~18 | 百分数或具体值 | 百分数或具体值 | 1~7 |
| 谷歌地图 | googleMap | -180~180 | -90~90 | 文本 | 1~20 | 百分数或具体值 | 百分数或具体值 | 1~3 |
| 高德地图 | gaodeMap | -180~180 | -90~90 | 文本 | 3~18 | 百分数或具体值 | 百分数或具体值 | 1~3 |
| 百度地图 | baiduMap | -180~180 | -90~90 | 文本 | 4~18 | 百分数或具体值 | 百分数或具体值 | 1~2 |
| Geoq 地图 | geoqMap | -180~180 | -90~90 | 文本 | 1~18 | 百分数或具体值 | 百分数或具体值 | 1~5 |
| Openstreet 地图 | openstreetMap | -180~180 | -90~90 | 文本 | 1~18 | 百分数或具体值 | 百分数或具体值 | 不支持此参数 |
- 高德地图坐标拾取系统
- 百度地图坐标拾取系统
标签页
标签、分类、友链type: “tags”、type: “categories”、type: “link”1
2
3
4hexo new page tags
hexo new page categories
hexo new page link
https://butterfly.zhheo.com1
2
3├─categories
├─link
├─tagsVuePress
指定目录
1
2mkdir Library
cd Library安装依赖
1
2yarn init
yarn add -D vuepress在 package.json 中,新增启动命令:1
2npm init
npm install -D vuepress构建报错:Error: error:0308010C:digital envelope routines::unsupported1
2
3
4"scripts": {
"docs:dev": "set NODE_OPTIONS=--openssl-legacy-provider && vuepress dev docs",
"docs:build": "set NODE_OPTIONS=--openssl-legacy-provider && vuepress build docs"
}
搜索说是 Node.js 版本问题,得每次运行 set NODE_OPTIONS=—openssl-legacy-provider
索性直接加到 package.json 中启动项目
1
2
3
4
5
6
7
8
9
10
11
12
13yarn docs:dev
npm docs:dev
新增 .gitignore 文件(git 上传忽略),按需添加想要的内容,如:
#Idea
.idea
#VuePress
docs\.vuepress\dist
temp
cache
#NPM
node_modules
yarn.lock安装主题
懒得折腾直接使用主题1
yarn add -D vuepress-theme-vdoing
然后在 config.js 中引用1
npm install -D vuepress-theme-vdoing
1
theme: 'vdoing'
更新主题
1
2
3
4yarn remove vuepress-theme-vdoing
#删除 node_modules 文件夹
yarn add -D vuepress-theme-vdoing
yarn使用插件
1
2
3
4
5
6
7
8#网络不行可以加上 --registry=https://registry.npmmirror.com
yarn add -D @vuepress/plugin-back-to-top
yarn add -D @vuepress/plugin-medium-zoom
yarn add -D @vuepress/plugin-last-updated
yarn add -D @vuepress/plugin-pwa
yarn add -D vuepress-plugin-fulltext-search
yarn add -D vuepress-plugin-reading-progress
yarn add -D vuepress-plugin-smplayer@1然后在 config.js 中引用1
2
3
4
5
6
7
8#网络不行可以加上 --registry=https://registry.npmmirror.com
npm install -D @vuepress/plugin-back-to-top
npm install -D @vuepress/plugin-medium-zoom
npm install -D @vuepress/plugin-last-updated
npm install -D @vuepress/plugin-pwa
npm install -D vuepress-plugin-fulltext-search
npm install -D vuepress-plugin-reading-progress
npm install -D vuepress-plugin-smplayer@11
plugins: []
更多设置
- v1.0 文档
- 主题配置
- Markdown 容器
- 动态首页大图 & 全背景图
Hugo
安装 golang、hugo环境变量
1
2setx /M Path "%Path%" "D:\APP\Hugo\bin\"
hugo -vError: Unable to locate config file or config directory. Perhaps you need to create a new site.
Run `hugo help new` for details.
1
hugo new site D:\Data\Code\Library Library --force
1
2
3
4
5
6
7
8
9
10├── archetypes # 内容类型
│ └── default.md
├── assets
├── content # 网站内容
├── data
├── layouts # 网站结构
├── public # 生产文件
├── static # 静态资源
├── themes # 存放主题
├── config.toml # 配置文件https://themes.gohugo.io/themes/hugo-theme-stack/
https://github.com/CaiJimmy/hugo-theme-stack1
git clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
将主题内 themes/hugo-theme-stack/exampleSite 目录下的文件复制到网站根目录下,并删除根目录下的 config.toml 文件
1
hugo server
https://jinli.cyou/p/%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99%E7%9A%84%E5%BB%BA%E7%AB%8B%E8%BF%87%E7%A8%8B%E4%B8%89hugo%E4%B8%BB%E9%A2%98stack%E7%9A%84%E4%BD%BF%E7%94%A8%E4%B8%8E%E4%BC%98%E5%8C%96/
https://glossary.airbyte.com/term/contribute-to-glossary/
https://github.com/airbytehq/glossary
https://github.com/jackyzha0/hugo-obsidian
go install github.com/jackyzha0/hugo-obsidian@latest
hugo-obsidian -input=content -output=data -index -root=.
hugo server
hugo-obsidianJekyll
Ruby
https://www.ruby-lang.org/zh_cn/downloads/
https://rubyinstaller.org/downloads/
https://rubyinstaller.cn/
gem install jekyll
jekyll -v
bundle install
bundle exec jekyll serve
obsidian-digital-garden
https://github.com/oldwinter/dg
https://github.com/maximevaillancourt/digital-garden-jekyll-template