MAGIC
Home Tags Archives Links here

🤓网站建立心路历程

2020-06-25 👩‍💻编程

img
网站配置设定 ：favicon Site page
博客内容插入 ：图片 视频 音频 链接 emoji
🎴🎥🎵📎😜
（近段时间寻找的博客教程合集及自己的实践方法）
建立博客网站教程链接见文章”编写博客备忘录”

可在右侧导航栏导航

1.网站

仅针对此博客网站主题：cards，不知道其他主题是不是相同设置。
cards主题demo页：https://theme-cards.ichr.me/demo/
cards主题官方配置教程：https://theme-cards.ichr.me/config/

网站显示
左：favicon图标 右：title

1.1.favicon更换

记住！图标最好是16*16像素。在线制作网址：http://www.faviconico.org/

该主题card（此方法仅针对主题cards，对所有网页统一处理）

网页图片方法

cards官方配置教程：https://theme-cards.ichr.me/config/
我用的方法：将图片上传到sm.ms，复制链接（格式如下的），粘贴至主题项目目录_config.yml文件 head 中的 favicon 后面

1
2
favicon: 图片链接
例：favicon: https://i.loli.net/2020/06/25/KGzSXexqk9BjOa2.png

示例图片

本地图片

需要将图片放置到 source 文件夹（即md文件所在的上级文件夹）。favicon 后面输入下方内容

1
2
favicon: /图片名.png
例子： favicon: /icon.png

*html写法（在html内书写，仅对当前网页处理）

见文章《如何拥有博客自定义网页》，自定义网页跳过主题渲染，需要额外添加favicon。
参考教程
在页面中的<head>标签中添加<link>标签引入图片。

1
2
3
4
5
6
7
8
9
10
11
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon">
<!-- 第一行是必写的，适应绝大多浏览器 -->
<link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon">
<!-- 为所有浏览器提供备用icon -->
<link rel="apple-touch-icon" type="image/png" sizes="144x144" href="logo-144.png"/>
<!-- apple-touch-icon 大小需144x144，Apple设备safari浏览器，可添加至主页，并展示该icon
href--url链接，文件路径
type--MIME标识
      ICO 文件 image/vnd.microsoft.icon（image/x-icon，兼容更好！）
      GIF 文件16x16px image/gif
      PNG 文件16x16px image/png -->

1.2.title更换

在根目录_config.yml中Site后，修改title后的名称。

1
2
3
 # Site
title: hexo
例：title: ok

1.3.增加页面page

cards主题有自带的几个page相关设置（点击网页右上角按钮出现），例如: 标签tags 分类categories 友链links
cards主题官方教程：https://theme-cards.ichr.me/pages/

若只是需要自定义的增加page，可以参考下方教程，但页面只能与文章页相同排布
网络教程：https://www.cnblogs.com/hankleo/p/11606224.html

我额外加入了about me的page，流程如下
（1）
终端输入如下命令

1
hexo new page "about me"

根目录source文件夹内自动新建子文件夹about me
其中文件index.md里可以编写文章，为about me添加内容
文章名字可以在此front-matter（即md文件最上方的分割区域，如下）更改

1
2
3
4
---
title: About me  #可修改，网页显示此名（默认是文件夹名，但不受文件夹名影响）
date: 2020-06-27 01:12:19
---

（2）cards主题项目目录里_config.yml文件cover中的menu后添加如下代码

1
2
3
4
5
6
# 封面 cover 设置
cover: 
  # cover 按钮菜单，通常用于站内导航
  menu: 
    - name: 关于我 #按钮显示的是此名称，不受文章名字影响
      url: /about me/ #输入文件路径

（3）hexo s 预览可以看到首页界面多出了一个链接按钮，点击可到达文章页面

！！！！！！
（后来发现这个index.md里也可以借助与友链links相同格式，达到分享其他社交平台网址的作用。）
front-matter如下格式，

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: About me  #可修改，网页显示此名，默认文件夹名，但不受文件夹名影响
date: 2020-06-27 01:12:19

layout: links
links: 
  - name: 谢小diang # bilibili空间
    url: https://space.bilibili.com/313199103?share_medium=android&share_source=copy_link&bbid=XY7DB9A74A00670C6DE928B70B1B906A528B7&ts=1593195211275
    avatar: https://i.loli.net/2020/06/25/KGzSXexqk9BjOa2.png
    target: _blank
    backgroundColor: '#fff'
    textColor: '#444'
---

2.博客内容书写语法

常用markdown语法大汇总(超详细~)

以下是除了文字的其他添加内容的有关语法 个人分享

1.超链接 2.图片 3.视频（音频） 4.emoji

2.1.超链接

1
2
3
4
方法一：
[链接文字](链接地址 "链接描述")
[示例链接](https://www.example.com/ "示例链接")
例：[钱塘印象交互装置](https://www.bilibili.com/video/BV1tJ411q7df "钱塘印象交互装置视频链接")

钱塘印象交互装置

1
2
3
4
方法二：
<链接地址>
<https://www.example.com/>
例：<https://www.bilibili.com/video/BV1tJ411q7df>

https://www.bilibili.com/video/BV1tJ411q7df

2.2.插入图片

1
2
![图片文字](图片地址 "图片描述")
#鼠标移到图片上会出现图片详情“图片描述”

2.2.1 网络图片插入格式（在之前的《我的第一篇博客》里有这段代码）：

1
2
3
![图片文字](图片地址 "图片描述")
![示例图片](https://www.example.com/example.PNG "示例图片")
例：![img](https://picsum.photos/600/400/?random "img")

img

注意 ：sm.ms网站上传后，居然有专门的markdown链接可以复制！！！

2.2.2 本地资源文件夹图片插入方法

hexo官网教程方法：https://hexo.io/zh-cn/docs/asset-folders
貌似不需要再安装插件，但我是失败了，可以先试试这个方法。

以下是我的可参考方法。

可能需要安装的插件

网络参考教程：https://www.cnblogs.com/codehome/p/8428738.html

先提前在根目录_config.yml里设置，将false修改为true，
此后新建文章都会新建配套同名文件夹，图片可以拖入文件夹用以后续引用。
（我的情况：后来也将图片放在别的文件夹进行引用，都无法加载，必须在同名文件夹内，有可能我的路径格式没写对）

1
post_asset_folder: true

（可以先不安装插件试试，先进行下一步）
网络教程提供插件有两个版本，不确定哪一个可以实现，二者貌似版本不同，我最后一次安装的是第二个。

1
npm install hexo-asset-image --save
1
npm install https://github.com/CodeFalling/hexo-asset-image --save
blog引用本地图片的语法（强烈建议先试试第二种写法）

（我的情况是这样，也有可能之前在其他文件夹里的图片文件路径格式没写对）
图片必须事先放入博客同名文件夹内，才能引用。

i. markdown写法

1
2
3
4
![图片文字](图片地址 "图片描述")
![示例图片](xxxx/图片名.jpg)
#文件所在文件夹可以不用添加，可直接输入图片名。
例：![img](icon.png "示例图片")

示例图片

ii. html标签写法(！！这种方法貌似不用插件！！但我早在发现这个方法时先安装了插件，无法进行试验)

第二行这种写法可以修改图片大小尺寸

1
2
3
4
<img src="图片名.jpg">
例：<img src="icon.png">
例：<img src="icon.png",alt="first", width=600 height=300>
#alt指图片无法加载出现时，鼠标移动到图片上显示的信息
拓展

（拓展：在课外学习里了解到，如果图片在其他路径也有另外的html标签写法）

比如获取上一级文件夹的图片

1
<img src="..xxxx/图片名.png">

2.3.插入视频

网络参考教程：https://www.jianshu.com/p/3525536f9dcd
包含三种视频插入方式，以及音频插入方法

（以下以bilibili为例）
复制分享链接里的“嵌入代码”直接粘贴到blog正文中。

示例图片

1
例：<iframe src="//player.bilibili.com/player.html?aid=77906634&bvid=BV1tJ411q7df&cid=133286142&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

修改视频大小，增加以下代码

1
width="800px" height="600px"

👇得到

1
2
3
#由于主题限制，我必须再缩小视频大小：600 * 450 px
#很遗憾，修改过大小的视频在手机端查看是超出屏幕的
例：<iframe src="//player.bilibili.com/player.html?aid=77906634&bvid=BV1tJ411q7df&cid=133286142&page=1" scrolling="no"  width="600px" height="450px"  border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

2.4.emoji

网络参考教程：https://www.jianshu.com/p/e66c9a26a5d5
快捷方法：到达网站👉http://emojihomepage.com/，点击表情即可复制粘贴到博客中😛。

3.写博客文章小技巧

自己在写博客时发现的便捷小方法

3.1 书写博客预览

在代码页上方点击蓝色箭头的按钮
img

就可以在编辑页右侧弹出预览页面，虽然与成品会有所差别，但带来了极大的便利，可以同步看到文章格式效果，及时校正语法。
毕竟比回到浏览器，再点击刷新预览网页，明显快捷多了。
img

注意：视频与音频貌似无法显示，如果需要预览显示图片，必须写完整 之前设定好的 与博客md文件同名的 文件夹里的 图片路径，不能省略直接写图片名称。
当然在浏览器预览里两种写法都是没有问题的

1
2
3
4
5
6
7
# 图片路径省略写法
![img](icon.png "示例图片")
<img src="icon.png">

# 图片路径完整写法
![img]("网站建立心路历程/icon.png "示例图片")
<img src="网站建立心路历程/icon.png">

最后更新于2021-07-19

👩‍💻编程 # hexo

Comments