琅環书生 无远弗届 皆有可能 2025-11-07T09:53:50.000Z https://blog.chn.us.kg/ 琅環书生 Hexo 上线迎客，手搓一个新博客专注于写作！ https://blog.chn.us.kg/blog/zz-23/ 2025-11-07T09:53:50.000Z 2025-11-07T09:53:50.000Z 新博客演示站点

为什么要搭建一个新的博客？

   其实我已经有一个博客站点了本站 ，一直接触的是静态的博客，于是就选择了社区文档最全的Hexo，后来也是更换过好几次主题，最终稳定在了安知鱼主题。但一直有个问题困扰着我，那就是静态博客写作体验感总感觉不太丝滑，不像typecho、WordPress这种集成了数据库，支持后台管理或者一键写作的功能。近期主题开发者安知鱼大佬也是新开发了一款类似动态博客的应用anheyu，这就解决了这一难题。我也是试用了一下，感觉很多都集成了，而且也很方便管理后台文章、页面了。但因为我魔改的地方很多，多到已经数不过来了，于是就想问下能不能将现有已经魔改主题在不动的情况下迁移到anheyu上，最后在讨论群里好友告诉我新框架基于vue写的，这也就意味着实现的难度陡增，于是就放弃了，转头又把之前部署的qexo重新配置了下，充当写作和管理后台的工具。

   无独有偶，我是一个经常逛友链，从友链又去别的友链探索的人，起初觉得博客花里胡哨也挺好看，于是就魔改了很多，如果感兴趣可以去翻一翻之前的水文博客一周年记事，里面有初期改动的一些汇总。后来经常去逛像杜老师说、湘铭呀、满心等博客站点，这些站点给我很简约，而且加载速度很快。但当时也没想去换成这种简约的博客，只能说萌发了一颗待发芽种子。

   真正想要重新再搭一个站点的原因是，每次创作的流程繁琐，其实我已经简化了很多，想博文封面已经纯改成css实现了，但为了追求博客文章风格一致，不仅要考虑配色、封面图上层的图标、尤其是图标还得对应博文内容，往往等这些一切准备就绪，突然没了灵感，创作也戛然而止，没了兴趣。于我而言，博客其实就是一探索好玩的技术、分享生活的地方，所以就想干脆脆化繁为简，新劈一个站点，用来创作、记录生活。没有图片、图标的束缚，让一切回归文字记录本身，于是就有了新的站点。

为什么要选择Hugo作为框架?

   其实最初想用的是Typecho，都已经部署好且完了几轮，但最后发现对于使用现成的模板框架完全没问题，Typecho已经集成了评论、友链、图片等管理后台，主要有三方面原因：一是如果想魔改主题，说实话php的语法对现阶段的我而言还是有难度的；二是是考虑到我部署的是家里的小主机，虽然博客访问量可能也就我一个人，但是万一哪天访问量太大，小主机性能堪忧；三是不想用mysql等数据库，因为小主机内存有一点点，如果采用sqllite，之前使用它部署过emby,经常出问题，一旦数据文件损坏，那站点基本凉凉，更何况我是一个不爱备份的人。基于以上三点，我最终选择了静态。那么问题就简单了HexoorHugo？之所以选择hugo是因为已经有一个hexo的博客了，另外据说hugo速度很快，于是抱着尝尝鲜的心态，就选用了Hugo。说实话不用不知道一用吓一跳，Hugo的速度的确快的飞起，全程只需要一个hugo server，而且只要安装了go，再装个hugo程序就可以了；但缺点就是社区资源不够丰富，主题也不够多，但这已经够用了。

新博客用的什么主题，有哪些亮点？

   新博客主题是我魔改的，主要是参考了Hugo框架的主题PaperMod主题，其次是Typecho框架的OneBlog主题，然后自己重构了新的页面，主界面如下，采用极简的设计，没了花里胡哨的双栏，瀑布式的A4风格。文章采用文字+封面的风格，但是图片不是必填的，主要是为了回归博客主身，让文章更加纯粹。

▲ 博客主页

   其次就是归档页面采用了时间线串联的方式，以月份为单位进行切割。也将分类和标签加入了归档页面，方便文章的检索。

▲ 归档页

   最大亮点是将即刻做成了朋友圈的样式，这个之前在我Hexo博客里也模拟做过即刻说说，但是它的评论是在整个界面的最下方，没有跟着即刻动态，于是也是在逛友链jeray博客被他的高仿真朋友圈页面吸引了，于是看了下他用的主题是oneBlog，但我试了下没有这个功能，于是从他的朋友圈界面的url：http://home.jeray.wang:5030/里发现和他的博客https://hi.jeray.wang/站点不一样，我猜想应该是部署了两个Typecho吧，于是自己就基于此改造出了自己的即刻界面。下面是暗夜模式下的即刻。

▲ 即刻页

   再就是博客必不可少的一个功能，友链和文章页面，因为现在博客用的就是Liushen开发的FriendCircleLite，于是在新的站点也是采用这个获取友链的文章。

▲ 友链页

新站点、新起点

   之前是个爱写的人，曾许诺洗尽铅华，笔耕不辍，如今借着新博客站点上线之际，再次践行当初的诺言，期待将更多有趣的、好玩的、有意思的东西记录下来，朝花夕拾也未尝不是另一种生活的态度的呢。
   最后，自己魔改的主题我就厚着脸皮起了个名字Zhuang，由于初期阶段，对很多功能可能还不太满意，所以现阶段暂不打算开源，等我强大了有能力，说不定也会厚着脸皮为开源大业做出贡献，当然如果有志同道合的小伙伴，欢迎加友链。（Tips：加友链不是为了追求展示处+1，而是像好友般相互给予能量的高质量友链）

]]> 其实我已经有一个博客站点了 ，一直接触的是静态的博客，于是就选择了社区文档最全的Hexo，后来也是更换过好几次主题，最终稳定在了安知鱼主题。但一直有个问题困扰着我，那就是静态博客写作体验感总感觉不太丝滑，不像typecho、WordPress这种集成了数据库，支持后台管理或者一键写作的功能。 国庆节出游记 https://blog.chn.us.kg/blog/zz-22/ 2025-10-17T06:02:23.000Z 2025-10-17T06:20:59.000Z 序言

  不知为何，总有一种感觉，现如今时间就像搭了飞机一样，速度快的惊人，转眼又是一年国庆节，去年国庆出游的场景仿佛就在眼前，另外自从上班久了，体重随着班味越来越重，身上的戾气的苗头也只增不减，再者加上随着年岁的递增，好些之前经历的一些事情是转头即忘，为了不让这8天白白流失，在老婆的建议下，出去走走，去去班味，本文就当流水账来记吧，之所以拖了这么久才写，一是懒，二是工作忙，三是本文利用qexo编辑器编辑，尝试让博客回归简单，随时写随时记。

Day1: 外滩看风也看人

  也不知道是去年国庆去了外滩的缘故，还是因为上海实在玩遍了无处可去的缘故，于是第一天决定去外滩看风景。早上也不用赶时间于是一觉自然醒，此时感觉非常富有，毕竟有8天假期在手。第一站去了北外滩新建的来福士广场，之前在东大名路上班曾去过一次，这次带老婆去看看来福士负一楼的老上海复古风。明明记得第一次去的时候还是很大的，但这次去感觉好小，但里面的做旧真的是复原了上个世纪的风格，虽然上世纪的上海我也未曾经历过，但是那个年代的一些共有特点还是大同小异的。逛完后发现了一家 山西刀削面，因为是北方人对面食来者不拒，在上海快十几年了没怎么发现有山西的面食，距离上次吃估计还是高中食堂的鸡肉刀削面，但事实证明，这是挂羊头卖狗肉的一家店，除过面条劲道一些之外，没有别的优点。
  随着外滩滨江大道北扩，吃完后我们沿着东大名路前往北外滩，沿着那条熟悉又陌生的道路，不由得想起了5年前我在上海的第二份工作，那时候刚参加工作没多久，为了省钱，中午吃饭是哪里便宜去哪吃，哪有团购就去哪吃，常去的一个是白玉兰下面的兰亭序牛肉面，还有一个就是青海人开的一家拉面馆，再就是一个大食堂，后两者都在东大名路上，这次故地重游发现吃过的店也都关门了，就像我再也找不回五年前的自己一样，想想还是有点可悲的。

▲ 北外滩
  后来一路从北外滩滨江大道徒步到了外滩，北外滩因为是新建的前几年人还不算多，今年人是格外的多，天气也不错，吹吹黄浦江的风，沿着江边散步，也是惬意，晚上去吃了南京东路的傣妹。

Day2: 志愿军·浴血和平

  假期第二天，由于昨天步行超过20公里，于是就在家缓一缓，下午去了附近的商场，吃了 天水麻辣烫，不出所料，不仅盐少态度还很差，中途点了一瓶大窑，就让先把钱付一下，麻辣烫的钱已经付过了，我又不是赖账或者吃完就跑的人，这种体验感差到极点，就冲这绝不会去吃第二次，麻辣烫里盐还少，一点都不好吃！吃完后老婆理完发我们就去了电影院，去看了志愿军最后一部。
  第二部是去年国庆节看的，整体来说第三部还算不错前后有呼应，看到黄继光炸碉堡这一幕，眼泪不自觉流了下来，近年来世界并不和平、俄乌冲突、巴以冲突局部战乱频发，虽然生活在和平年代，更应该珍惜和平，这来之不易的和平。

▲ 志愿军·浴血和平

Day3: 苏州一日游

  假期第三天决定去苏州，之所以选择苏州是因为可以当天可以往返，还能省住宿的钱，不得不说假期的酒店价格比平常涨了2-3倍，出去玩又是早出晚归，所以住酒店简直是当冤大头，于是聪明且钱包不鼓的我选择了当天往返。
  早上八点半就已经抵达了苏州，吃过早饭就去了拙政园外景，里面已经去过了，沿着平江路体验了 一条平江路，半部江南诗的江南古街风华，逛完后去吃了赣菜，然后就去了 西园寺，后来才知道西园寺2018年主动退出了4A级景区，将日游客量从300万降至千人以内，以恢复宗教场所清净本质。‌‌西园寺还挺大的，门票也不贵一人5元，切记不要买门口的猫条，因为寺庙里的猫早都饱餐了，你的猫条压根用不到。

▲ 平江路
  从西园寺出来后步行前往 `寒山寺`，寒山寺的门票比西园寺贵，成人40元，可能是因为唐代诗人张继的“`月落乌啼霜满天，江枫渔火对愁眠。姑苏城外寒山寺，夜半钟声到客船。`”的绝句给寒山寺打了一个响当当的广告吧。寒山寺的人流量确实比大排队了好久才进去，但寺庙里面没有西园寺大，于是很快就逛完了。
▲ 寒山寺
  最后一个景点选择了靠近高铁站的 `金鸡湖`，坐地铁抵达东方之门，本想着环绕着金鸡湖走一圈的，可到了之后有点傻眼了，确实有点大于是放弃了，在附近逛了逛了吃了网红披萨，拍了一些夜景就动身去高铁站了，地图显示不远，于是步行前往，但走到一半时后悔已经来不及了，只能硬着头皮走下去。原本想着时间还早在高铁站吃晚饭，到了后才发现高铁站一楼都是关门的，可能是因为不是苏州主站吧，于是只能回上海再吃了。抵达上海到家已经是10店多了，附近想吃的饭店也打扫卫生了，于是买了包泡面当晚餐了。
▲ 东方之门

Day4: 躺平的一天

  国庆已经过去一半了，说实话开始有些焦虑了，这假期过得也太快了，今天就不出去了，在家买些菜做些好吃的，明天决定去奉贤，之所以去这是因为上海其他区都去过了，唯独奉贤区从未去过。在家躺平的一天也是快乐的一天，生活有紧有松，随心所欲一点才是生活。

Day5: 奉贤李窑村

  查了一下地图从我住的地方去奉贤坐地铁得2个半小时，到奉贤已经下午一点了，吃了一碗岐山臊子面，就去了奉贤环城西路地铁站附近的四季生态园，景点的游客很少，一路上加起来不到10个人，虽然吧国庆期间不想去人山人海的景点，但这荒凉的确实有种说不出的感觉。

▲ 四季生态园
  从四季生态园里出来搭乘公交前往了奉贤一个新晋网红村落——李窑村。在路上碰到了入党誓词，顺便重温了一下自己当初入党的誓言。
▲ 重温入党誓词
  李窑村由于地图上标记的位置是一个行政概念，地图上显示已经到了到网红打卡地方却不好找，也是费了很大力气终于找到了，抵达时太阳快要落山了，真是拍照的好时机，从屋外望着一大片稻田在夕阳的映照下，蓝天白云的天际就像一幅挂在墙上的风景画，美的无与伦比，也可能是因为有了众多的游客前来打卡，窗外的景色显得更加温暖治愈，这一刻慢下来享受大自然的变化，在时光里慢慢流淌着踏实和平和，看过稻田里装满了夕阳，金色的光芒映衬出嫩绿的稻穗，感叹幸福或许就是这样，在某时某地看过某种风景，而身边正好也有某人陪伴。
▲ 李窑村

Day6: 海湾国家森林公园

  原计划奉贤是一日游，晚上便返回的，但考虑到大老远的来一趟实在折腾，最出名的碧海金沙和海湾国家森林公园还没去，于是两人一合计，干脆在奉贤住一晚。
  第二天早起，酒店附近竟然没找到早餐店，于是想着赶车干脆去景区附近吃点，可谁知到了景区惊呆了，本以为会是人山人海排队买票的场景，可结果就是售票窗口寥寥无几，就连附近小吃都没有，买完票进去后才发现了一个小超市买了点吃的。进去后没有想象中的好，景点没啥特色，也没有林间小路那种感觉，关键那天气温直接飙升至37°，硬是徒步丈量了大半个公园，里面的好多博物馆都是私人的，也有倒闭的，进去后娱乐设施也没有，就连在路上随机碰到一个游客都感觉好亲切，因为压根就没游客，说实话压根不如国家共青森林公园，而且票价还要60，真的是不值票价，也不知道哪里来的勇气收这么高。切记避坑，上海海湾森林公园千万别去，当然你如果是为了徒步锻炼身体，倒是可以的。从公园出来已经下午了，实在是逛不动了，于是打车去了环城西路的宝龙广场回了顿火锅，以弥补劳累的胃。吃完后就直接返回了。

▲ 海湾国家森林公园

Day7: 医院

  由于之前体检检查出身体有些问题需要去医院详细检查一下，于是就去了医院。去了后结果自然是不尽人意，排查出一些问题，从这段文字的长短就能知道我不愿多说了。还是规律生活，清淡饮食，保持良好生活习惯，开了些药吃完再去复检，也希望能有作用。

Day8: 最后一天，抓紧快乐

  我表示很不情愿的来到这一天，10月8号，估计没有多少人会喜欢吧，估计大家都希望10月8号永远不要到来。这一天还是来了，那家及时行乐，调整好心态，抓紧享受这最后一天。
  突发奇想，有个愿望：希望明年的国庆节，早点来！

写在最后

  文章写的比较凌乱，主要是流水线式的记录生活，免得老年了没事可回忆，朝花夕拾或许也是另一种回味人生的态度。

▲ 国庆快乐
]]> 值此中华人民共和国成立76周年之际，也是国庆遇上中秋的最后一个长假，不能在家躺着，于是觉得出去走走，去去班味…… 让你的博客支持LivePhoto照片 https://blog.chn.us.kg/blog/zz-21/ 2025-05-16T00:18:32.000Z 2025-05-16T00:18:32.000Z 一、效果预览
▲ LivePhoto 照片展示(若没有显示，请F5刷新当前页面)

二、添加JS脚本

   在主题js目录下（如我的是themes\anzhiyu\source\js）新建一个livephoto.js文件，添加以下代码：

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
(function() {
    // 当文档加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 查找所有带有live-photo类的元素
        var livePhotoElements = document.querySelectorAll('.live-photo');

        if (livePhotoElements.length > 0) {
        // 如果页面上有实况照片元素，才加载LivePhotosKit.js
        var script = document.createElement('script');
        script.src = 'https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js';
        script.onload = function() {
            // LivePhotosKit.js加载完成后，初始化所有实况照片
            initializeLivePhotos(livePhotoElements);
        };
        document.head.appendChild(script);
        }
    });

    // 初始化所有实况照片元素
    function initializeLivePhotos(elements) {
        elements.forEach(function(element) {
        // 获取照片和视频的URL
        var photoSrc = element.getAttribute('data-photo-src');
        var videoSrc = element.getAttribute('data-video-src');

        if (photoSrc && videoSrc) {
            // 创建LivePhotosKit播放器
            var player = LivePhotosKit.Player(element);

            // 设置照片和视频源
            player.photoSrc = photoSrc;
            player.videoSrc = videoSrc;

            // 添加鼠标悬停事件来播放实况照片
            element.addEventListener('mouseenter', function() {
            player.play();
            });

            element.addEventListener('mouseleave', function() {
            player.pause();
            });

            // 添加触摸事件支持（移动设备）
            element.addEventListener('touchstart', function() {
            player.play();
            });

            element.addEventListener('touchend', function() {
            player.pause();
            });

            // 添加样式
            element.style.position = 'relative';
            element.style.overflow = 'hidden';
            element.style.display = 'inline-block';
        }
        });
    }
    })();

三、添加CSS样式

   在主题css目录（如我的是themes\anzhiyu\source\css）下新建一个livephoto.css文件，添加以下代码：

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
.livephoto {
    display: grid;
    place-items: center; 
    margin: 0;
    padding: 0;
}

.live-photo {
    display: grid;
    place-items: center; 
    width: 100%;
    max-width: 800px;
    height: auto;
    aspect-ratio: 4/3;
    margin: 20px 0;
    border-radius: 8px;
    cursor: pointer;
}

.live-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.live-photo video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

四、引入js和css文件

   在主题配置文件_config.yml中，找到inject选项，在head和bottom选项下,分别添加以下代码：

1
2
3
4
5
6
7
8
inject:
  head:

    # Livephoto
    - <link rel="stylesheet" href="/css/livephoto.css">
  bottom:
    # Livephoto
    - <script src="/js/livephoto.js"></script>

五、一键三连

   到这里，你已经成功添加了LivePhoto支持，接下来你只需要在你的博文里添加如下代码即可达到效果。

1
2
3
4
<div class="livephoto">
  <div class="live-photo" data-photo-src="https://images.chn.us.kg/hexo/post/019-post-01.webp" data-video-src="https://images.chn.us.kg/hexo/post/019-post-01.mov">
  </div>
</div>

注意事项：

  1. LivePhoto照片的URL请替换为你自己的照片和视频的URL。（视频格式好像需要是.mov，我用.mp4的视频显示不来，其他格式没试过）；
  2. 实况照片的动态视频，iPhone手机可用将实况图片的视频直接保存，格式就是.mov的。
  3. hexo一键三连hexo clean && hexo g && hexo s，确保所有文件都生成后，你的博客就支持LivePhoto照片了。
]]> 自从LivePhoto诞生以来，越来越多的相机开始支持LivePhoto拍摄，而博客也逐渐开始支持LivePhoto的展示。本文将介绍如何让你的博客支持LivePhoto照片。 17年前，5月12日14时28分04秒 https://blog.chn.us.kg/blog/zz-20/ 2025-05-12T06:28:04.000Z 2025-05-12T06:28:04.000Z

  每个人心底都会有某个时刻记忆犹深，而2008年5月12日14时28分04秒是绝大多数国人心痛的瞬间，那年我十四、初二下学期，那天我在上微机课，2008年的5月12日，你在做什么？。

那年十四，我上初二

   初中距离家远（百度了下，精确来说是3.4公里），在现在看来，这点距离和“距离远”简直是差的太多。可正是因为这点距离，在那个年代，和我的同学一样，从初一便开始寄宿学校。也是从那时起，很多事情记忆都特别深，可能那是第一次学着面对这个未知的社会吧，所以会有独特的记忆吧。

   我记得冬天不知什么原因，学校经常停水。夏天还好，只要有水就行，可冬天不一样，北方的冬天寒冷而漫长，那时候大多数的日子是热水+馍，如果没有热水，别说吃饭，就连洗脸都是问题……但哪里都有脑子灵的同学，他就能搞来热水，然后一个宿舍的同学都用这一盆热水洗脸，由于经常没水洗脸，再加上宿舍十几号人，往往是一盆清水洗完变一盆黑水，我不想洗也没办法，很多天都没洗脸，有水总比没有的强，于是紧闭双眼、皱着眉头，愣是洗完了……但这不是今天想要记录的重点，今天想要记录的是17年前的今天，2008年的5月12日。

地震那天，是微机课

   学校的夏季作息时间下午是13点30分左右到校，那天下午我们班的第一节课是微机课，可能很多人没听说过这个课程名，实际上就是电脑课程。这是那个时候我们最想上的课程，虽然每台电脑都是局域网，且都被老师控制着。但对于每周只有一节课的我们来说，这简直比任何课程都稀奇。

   做完午操后，我们班兴高采烈的去了微机课教室，一进教室老师她说她的，我们开机玩自己的，有玩扫雷的、空当接龙的……玩的正嗨时，突然一阵眩晕，天花板的吊灯左摇右晃，桌子也跟着摇晃起来，一开始还以为是对面同学的恶作剧，大家互相叫喊着：“别摇桌子！”，可桌子、吊灯、眩晕感没有因为斥责声减弱，这时学校广播紧急通知：“请全体师生集合！”。大家一窝蜂的下楼，那时候我们的教室是在一楼，而微机课教室是四楼（最高的楼）。集合完后，只是排队站在每天放学的教学楼前，也没什么原由、也没说集合是为了什么。那时候没有手机，就算有学校也禁止携带，我心里抱怨：“得，好好的微机课泡汤了……”，当时并没有意识到事情的严重性，大约过了几分钟，校领导才开始通知到，由于发生了地震，要求我们不要回教室，所有年级都去操场以班级为单位自由活动，就这样人声鼎沸的操场上肆意玩耍……

地震停学，步行回家

   等到再次集合时，才知道是四川发生了地震，那时候还不知道我们和四川是邻省。于是在教育局的要求下立即放学，回校时间另行通知。那天下午我是步行回家的，一听说放学的消息，我立马来了精神，那时候家里没有电脑，但电视是我的最爱，心想终于可以回家好好看电视了，一路上总有种迫不及待想要到家的感觉，我知道那是电视对我的召唤。那时北方的树枝树叶正是翠绿的季节，回家路上的两旁，阳光透过树叶真是好看极了。

   到家后，问了奶奶她们有没有感觉到异常，奶奶说在地里除草，突然感觉到头晕就回家了，我将学校得到地震的消息说给了奶奶听，奶奶说她活了几十年也没听说过，我虽然课本里学过地震，但也是从没经历过，所以那时候对地震这个词是真没什么概念。第二天，可能是昨天太过于兴奋，不知怎么的就感冒了，奶奶去地里干活时，还特意给我冲了红糖水让我缓缓，等下午不见好就带我去看大夫。打开电视后，绝大多数电视台都在报道“5·12四川汶川7.8级地震”(刚开始是7.8级，后来8.0是修正后的)的消息，那时候第一次看见所有电视台的台标都变成了灰色，每当我看到电视里大灾面前，一方有难、八方支援、抗震救灾，众志成城的画面时，眼泪就忍不住的流，这或许就是刻在我们中国人骨子里的家国情怀。

救援物资，是袋板栗

   后来的一周时间，学校也是前脚通知返校，后脚就放学，反复了好几次。最后正是恢复教学应该是两周后了，抗震救灾的物资也分配到了我们学校，第一次吃到来自救援的物资，锡箔纸那种密封包装的板栗，尽管我们那地方虽靠近四川，但受灾程度算是轻微，但也收到了救援物资，心里阵阵暖流久久不能平息，再一次感觉到了有国才有家的自豪感。后来学校组织我们寄信给四川受灾严重的同学，虽然我忘记了信件的内容，也不知道那封信有没有开启者……

缅怀逝者，致敬重生

   时至今日，仍然难以忘记2008年5月12日14时28分，忘不掉那天的微机课、忘不掉那天的操场、回家路上的树叶、忘不掉奶奶的那杯红糖水、忘不掉那天的感冒、忘不掉电视里的抗震救灾、忘不掉那袋糖板栗……

   时至今日，再次回忆，眼眶湿润，很多人都已不在，很多人再也见不到、与其说时间会治愈一切，倒不如说是时间冲淡了一切，那种想要回到过去却又无法抵达的无力感，只有回忆蔓延，思绪缱绻，常伴吾身，指引我继续向前……

   2008年，我十四岁。2025年，十七年后。

   2008年5月12日14时28分04秒，缅怀逝者，致敬重生。

   刻在骨子里记忆，是那个时代的印记。

▲ 5·12汶川特大地震纪念馆
]]> 时至今日，再次回忆，眼眶湿润，很多人都已不在，很多人再也见不到、与其说时间会治愈一切，倒不如说是时间冲淡了一切，那种想要回到过去却又无法抵达的无力感，只有回忆蔓延、思绪缱绻，常伴吾身…… 潇洒桐庐郡，富春山居图 https://blog.chn.us.kg/blog/zz-19/ 2025-05-06T07:36:14.000Z 2025-05-06T07:36:14.000Z 序言

   五一假期，利用小长假，来了一场蓄谋已久的旅行，我一直以为只有过年回家的票难抢，谁料想从上海到桐庐，也是一票难求。5月1号的票只抢到了下午17点的，本着将时间利用到极致以及高性价比原则，于是果断退票候补了5月2号9点从上海虹桥出发的高铁，开启为期4天的五一旅行。

1.严子陵钓台 江南龙门湾

   之所以选择桐庐是因为上海周边能去的都去了，而桐庐虽地处杭州西北部，但旅游景点也是极具吸引人的。到桐庐约11点多，先去酒店办理入住，卸下一些不必要的行李，轻装旅行。午饭过后打车前往严子陵钓台，这里是桐庐最著名的景点之一，传说是东汉末年隐士严子陵在此钓鱼的地方。钓台坐落在富春江边，远处青山环绕，江水潺潺，景色宜人。但失误的一点是景点在维修，暂时闭园，只怪自己没有做好详细的攻略，但幸好在严子陵钓台，当地安排了前往江南龙门湾景点的免费接驳车，由于通往景点的道路狭窄，再加上游客、私家车的涌入，导致交通一度瘫痪，接驳车供不应求，排队等候的游客有的为此还起了冲突……尽管如此，倒也不影响此次出行的兴致。约一小时的排队等候，我们也终于抵达了江南龙门湾。

▲ 富春江畔

   这个景点只能坐游船，不然没什么好玩的，游船类型比较多，电动船、小型游船、自驾游船、大型游船……我们选择了游览时间最长的大型游船，主要是为了能多欣赏一下两岸的景色（顺道坐着休息会），江南龙门湾其实就是富春江上的一个游玩码头，坐落在严子陵钓台对面。游船航线也是一路向西，从富春江（桐庐段）一直到建德段，富春江两岸除了能看到严子陵钓台之外，其余都是自然风光，有种小三峡的感觉（轻舟已过万重山）。借用古人的话那就是**“风烟俱净，天山共色，从流飘荡，任意东西。”**

▲ 江南龙门湾

   从江南龙门湾游船下来后，去了江畔附近的塔楼，远眺富春江，景色宜人，心情大好。江南龙门湾游玩结束后，决定前往离着最近的一个网红打卡点——— 芦茨村，由于堵车，也没有共享单车，只能徒步前往，一路沿着富春江走，倒也不是那么枯燥，抵达芦茨村已是傍晚，口干舌燥的我们碰上了免费茶饮，于是一口气喝了三小杯，直呼过瘾。芦茨村是一个原始的古村落，里面说实话于我而言没太大意思，除了有条不大的溪流外，其余没啥特色，搞不懂为啥有这么多人来打卡拍照。因为我从小生活的地方和这大差不差，可能是城里人才觉得好吧，晚上在芦茨村点了当地的菜肴，不得不吐槽景点的物价，两个很普通的菜愣是平常的三四倍。用餐过后已是八点多，担心太晚打不到车回县城，于是就匆匆返回了，结束了第一天的旅行，遗憾的是芦茨村附近的马岭古道没来得及去。

2.瑶琳仙境 红石湾

   第二天，天气虽不如昨天，但还好今天的旅程是室内，午饭过后打车前往瑶琳仙境，路上碰到了成片的小麦景观，原来南方除了水稻也是种小麦的，难怪桐庐的面食味道不错，原来是有原因的。瑶琳仙境景点是典型的喀斯特地貌，里面的溶洞千奇百怪，真叫人叹为观止，感受到了大自然的鬼斧神工，什么一柱擎天、方舟、还有秘境漂流……大约游玩需3-4小时。

▲ 瑶琳仙境

   尽管很多景点都是通过灯光渲染才呈现出这么美的，但是溶洞里面各色各样的溶蚀景观确实经历了万年而成的，吐槽的点就是人太多了，通行在狭窄处容易造成拥堵，排队时间较长，总体上还不错，毕竟喀斯特地貌本就稀少，也值回票价了。

▲ 瑶琳仙境

   从瑶琳仙境出来后约下午3点多，在附近闲逛了一番后便前往红石湾,这个景点是今年新开发的，所以在攻略上并不怎么火，在徒步前往的过程中，遇到了一棵千年古树，摸了摸树枝，心中感叹千年前的古人是否也和我此刻一样的心情，据村里人说，很多外地游客来许愿，这也算是此次旅行的意外收获。

▲ 千年樟树

   抵达红石湾景区后，已经4点多，门票里包含了30分钟游船，这倒是让人喜出望外，入园第一件事就是乘坐游船，也是自己当了一回舵手，过了开船的瘾。红石湾景区里也有个喀斯特地貌，虽然没有瑶琳仙境的大，但里面是一个人都没有，简直是美呆了，估计这个景点后面会单独收费，因为它的门票真是物超所值，景区里面也有很多娱乐设施，由于五点多闭园，很多地方没来得及去。游玩结束直接打车去了富春江夜游，在江北望了望江南，在美食的天堂滋养了胃，在开心快乐中结束了第二天的旅程。

▲ 红石湾景区组图

3.大奇山国家森林公园

   第三天，去了桐庐最具代表性的景点，大奇山国家森林公园，虽名为公园，但实际是爬山，上山下山只有一条道，爬完全程大约也得3-4小时(前提是不堵人)，大奇山里面的水清澈见底，尤其以山顶的天池为最佳，这水简直绝了，可媲美四川九寨沟。排队过桥的时候还见到了水折射出的彩虹，由于山路崎岖，通行是堵了又堵，不过下山还算顺畅，都道上山容易下山难，果真应验了，到现在我的腿还是酸的。大奇山最高处有个飞瀑，这个很多人都走不到这里就下山了，有毅力的倒是在爬山去看看，最好的天池也在这段路上。

▲ 大奇山国家森林公园组图

   从大奇山下来后，补给了点能量后，便前往范仲淹纪念馆，里面记载了很多范仲淹的事迹。周边的公园也挺大的，公园里几乎没什么游客，倒是轻松闲逛的好去处。

4.滨江公园

   最后一天，一是天气预报有雨，二是桐庐景点能逛的都去了，三是考虑到马上就要上班，于是就决定在酒店呼呼大睡好好休息到退房时间。两点后吃了点东西，便动身前往桐庐博物馆,没想到博物馆不大，逛完没处去了，于是就去了滨江公园，也就是富春江的南岸，这里小吃很多，我们抵达时真是天公作美，乌云消散、天朗气清。在这胡吃海喝了一番，以此作为五一假期的终点。

▲ 天晴后的滨江公园

尾声

   桐庐的旅程三天两晚刚刚好，由于没买到4号的票，只能5号回，这样就导致今天上班的我昏昏沉沉。总结下来，桐庐此行还是很不错的，短暂的假期，可以治愈疲惫的心灵，美好的旅程，也能慰藉拼搏的自己。
   见一座山，遇一江水，山不来见我，我自见山去，水不来见我，我自向水去。再见，桐庐。难忘，2025年的五一假期。

▲ 桐庐火车站
]]> 五一假期，利用5天小长假，来了一场蓄谋已久的旅行，从潇洒桐庐郡，到富春山居，再到桐庐郡的山峰，一路上，我感受到了旅行的快乐与幸福。 清明踏青游，再探朱家角 https://blog.chn.us.kg/blog/zz-18/ 2025-04-11T03:51:43.000Z 2025-04-11T03:51:43.000Z    记得上次去青浦，还得追溯到十一年前，那时候应该是大二第一学期的国庆节，少年意气风发，同行的有来自杭州、郑州上学的高中同学，那个时候还没有从市区直达的地铁，记得很清楚的是在延安高架下有个汽车站点，坐的公交车去的青浦。现在倒是方便了，17号线直达朱家角，故地重游，一时思绪万千，竟让人很久难以释怀时间的飞逝。

   青浦第一站，先去了东方绿洲，原本以为景点是免费开放的，谁料门票50元一位，本着来都来的原则，只能进去一探究竟。总体来说这就是一个大型的公园，和其他免费公园的区别就是多了一些教育基地，比如有国内外科学家的雕像和介绍、国防爱国教育基地等，还有小朋友娱乐的趣桥，各种各式的桥，公园面积很大，逛完差不多3万多步，里面的淀山湖和苏州接壤，一眼望去能看到苏州，公园里面的花也是争奇斗艳的开着，还有游客在丛木林中寻找野菜，而我和老婆就走走停停，拍拍照，享受着难得的清明假期。都说四叶草🍀很难找，我们在这个公园里陆续找到了4片，这幸运指数属实有点高，公园里的迎春花格外好看，随手一拍，就定格了整个春天。

▲ 漂亮的迎春花

   虽然都在上海，但一天时间肯定不够玩，于是我两决定住一晚，晚上去了朱家角古镇，去的时候已经八九点了，古镇沿街的商铺都准备打烊了，于是就沿着古镇走了一圈。第二天天气比前天好，我们又去了一趟朱家角，这也是我第二次去朱家角了，距离上次已经是十一年前的事情了，朱家角古镇不大，但属于江南水乡的氛围有的都有，悠闲自在的走在砖石街上，看着琳琅满目的小玩件，天气凉爽，心情愉悦，这也算是应了那句“你一句春不晚，我就来到了真江南”。

▲ 朱家角古镇一览

   前段时间，3月22号去了一趟顾村公园，说来也巧，历史总是惊人的相似，2024年的3月22号，我自己一个人去了躺顾村公园，于是翻出十一年前的照片拍了相同位置的照片。看似没多大意义，但好像就是想呼应一下那个十一年的少年，是否会想到在未来的某天，穿破时空的枷锁，抵达曾经去过的远方，仿佛此刻的意义不能具象，只有感同身受。这次来到朱家角也不例外，于是在十一年的取景点，也拍了一张，留着以后回味，毕竟照片背后，皆是旧时光。

▲ 十一年前
▲ 十一年后

   期待下个十年，或许又是别样风景。

]]> 清明时节，难得的小长假，上海周边几乎都已经去过了，于是就想这次走远一点，去上海最西边，去体验下属于青浦的春意盎然…… 总想着下次有时间再聚，却不料下次竟是后会无期 https://blog.chn.us.kg/blog/zz-17/ 2025-02-04T03:51:43.000Z 2025-02-04T03:51:43.000Z
]]> 总想着下次还有机会，总会有时间聚的，没想到一次次的错过，最后竟会是后会无期。真的很想@所有人，无论如何都要保重身体，好好珍惜身边的人，过好每一天…… 凌晨披星戴月的赶路，只为了团聚的那一刻 https://blog.chn.us.kg/blog/zz-16/ 2025-01-27T06:55:43.000Z 2025-01-27T06:55:43.000Z 春之伊始 心之所向

   龙行渐远，蛇行将至，新岁启封，春之伊始。春节倒计时即将清零之际，对于漂泊在外的我们，便有一个不约而同的主题——那就是回家，回家过年。
   小时候盼望着过年，因为可以穿新衣、吃美食、得压岁钱，还有团聚。那时心里总有一种感觉，过年好漫长，总是等不到腊月，好不容等到了却总觉得不够意味深长，过年时间太多，又有种过不够的感觉。
   而如今过年更像是打了一个趔趄，一不留神就滑到了下一个年。于是也了种真切的感受不断的问自己，不是刚过完年吗，怎么又要过年了？这种疑惑就像一个雪球，越滚越大，直到某天破碎，也就明白了当初盼望着过年的孩子长大了，他们的内心不再单纯地只盼望着过年了，取而代之的是生活和工作，当主导核心分散成好几个时，也就慢慢无暇顾及孩童时代的盼望。
   如今的过年，与此相关的只有一个主题——那就是团聚。从上大学开始的故乡只有冬夏，再无春秋到如今一年四季皆无，只有寥寥几天的时间。前段时间看到一短视频内容，大致意思如下：**“好像我们人生中的很多重要的大事都是靠请假来完成的，结婚需要请假、参加亲人葬礼需要请假、生病去医院需要请假……”**当我把这段话说给老婆时，她倒是一语中的，她说：“那还不是因为没钱，要是有钱这些事情都不需要请假，就能完成。”嗯颇有道理，对于像我这样的一没家族显赫的背景，二没家里有矿的资源的大多数人而言，也只有请假才能完成这些人生大事。所以自从工作以来，时间总觉得越来越少，过的也越来越快，一年到头也就过年回一趟家，和家人都是聚少离多，就连一起长大的小伙伴也都是很难碰见，更别提高中还不在一个地方的朋友了。如今各自都成家立业，都忙着和生活对线，各有各家愁，各有各家事。但不管怎么变，打小的情谊和积攒的友谊，我相信不会因为见的次数少就会削减几分。即使多年不见，联系也少，但见了面那一如既往的熟悉感和久违的亲切感是经岁月洗尽铅华沉淀下最美好的东西。一句好久不见，便足以慰平生。

▲ 我两的春运开始啦

天大地大 回家最大

   好像扯得远了，今年过年回家的天数比去年更是还少的可怜，毕竟有了家庭后需要考虑的是两个人的时间，而不能再一味的自顾自了。为了能尽早回家，也是不惜买了凌晨4点的高铁。然而一场关于怎么才更具性价比的思索便开始了：住的地方距离虹桥的车程是一个半小时的地铁，而且地铁末班车10点多就停了，那也意味着我们得打出租车去，但车又是4点的，最起码需要2点出发，赶在3点多到，这样的话也就休息一两个小时，最可怕的是还要大半夜起，这简直就是冬季里最惨无人道的噩耗。而另一种方案就是直接去虹桥附近找个酒店休息，但收拾完过去后差不多也晚上十一二点了，即使距离虹桥高铁站足够近，那也得3点就起吧，与之比较也就多了一个小时的休息时间。于是干脆去它的，想起当年上大学，绿皮火车硬座至少18个小时起步。

▲ 目标上海虹桥火车站

   于是我两决定干脆直接到虹桥，找个好位置等待着候车，于是也就有了今天这篇博客的诞生。比起朋友圈我更喜欢在博客里记录一些生活的琐事，因为当初自己搭建部署博客的主要目的是为了记录生活，分享生活，再到享受生活。

一路前行 向西而行

   原本以为夜晚的虹桥应该人不会太多，但没想到很快就被打脸了，上下三层简直就是人从中，还想找个舒适的位置坐着休息，在这一刻也变得更具象化——有椅子就行，不敢奢求别的。

▲ 凌晨的上海虹桥火车站

   在我眼疾手快，身体力行的配合下，很快就占据了两把靠椅，终于可以休息会了，可我却不能睡，这万一睡过头错过了高铁，那可真是……
此刻看着旁边的她已熟睡，于是我便开始了码字流水账，在四面八方声音的萦绕下，在这晚不眠灯光的衬托下，她睡得很香，那一刻的幸福具象化了……

   从上大学开始，便很享受在列车上戴上耳机听音乐，如今依旧不曾改变，只不过那时候是一个人，如今是两个人。
(谢谢你能看到这里，由于是熬夜码的水文，实在是没有精力检查错字，或有词不达意狗屁不通的地方，请忽略，最后祝看到这篇水文的有缘人蛇年大吉，巳巳如意，而我继续一起前行，一路向西了)

▲ 2025蛇年大吉
]]> 每逢过年抢票、挤车成了家常便饭，漂泊在外的游子，为了能回家过年，真是受尽了折磨，尤其是像我这么离家远的人，估计所有跋山涉水的艰辛都只为了春节和家人团圆时刻吧… 给你的Hexo博客添加农历年份生肖标志 https://blog.chn.us.kg/blog/zz-15/ 2025-01-24T06:55:43.000Z 2025-01-24T06:55:43.000Z 序言

   闲来无事就逛逛主题的目录结构，发现了一个几乎没怎么用到的js文件：themes\anzhiyu\scripts\helpers\year.js，被里面的十二生肖给吸引了进去，我也不懂为什么会有这个文件的存在，于是在项目里搜了下都没在其他地方发现有引用它，于是突发奇想，就将博客的侧边栏个性欢迎的标志和页脚处，修改成了每年都换成对应年份的生肖标志，现在看着舒服多了，教程如下。

效果预览

   通过调用year.js会根据年份自动取值对应的icon，当然我在原有的js基础上进行了一些修改，不仅会显示生肖标志，另外当鼠标放上去，Hover会显示当前年份的祝福描述，预览效果如下：

欢迎来访
👏 欢迎来自 上海省上海市 的小伙伴访问本站！ 十里洋场烟花地，风云际会上海滩！
🌍 你距离琅環书生大约 0 公里！
🏠 你的IP为：220.196.98.94
🕞 下午好，喝点茶，提提神！

修改后的js文件

   当然你可以使用默认的，我是因为发现里面的icon好像都失效了，于是去iconfont里找了十二生肖的icon，你如果直接使用这个icon应该是没法用的，建议你也去自己找些icon然后在主题配置文件引用进来，修改对应的icon即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
hexo.extend.helper.register("getAnimalIcon", function (year) {
  var index = parseInt(year) % 12;
  var icon = {
    0: { icon: "icon-zz-monkey", desc: "🐒猴年祝您万事不愁" },
    1: { icon: "icon-zz-rooster", desc: "🐔鸡年祝您大展宏图" },
    2: { icon: "icon-zz-dog", desc: "🐶狗年祝您万事皆旺" },
    3: { icon: "icon-zz-pig", desc: "🐷猪年祝您诸事顺遂" },
    4: { icon: "icon-zz-rat", desc: "🐀鼠年祝您财源广进" },
    5: { icon: "icon-zz-ox", desc: "🐂牛年祝您牛气冲天" },
    6: { icon: "icon-zz-tiger", desc: "🐯虎年祝您如虎添翼" },
    7: { icon: "icon-zz-rabbit", desc: "🐰兔年祝您吉祥如意" },
    8: { icon: "icon-zz-dragon", desc: "🐲龙年祝您龙腾虎跃" },
    9: { icon: "icon-zz-snake", desc: "🐍蛇年祝您行运高照" },
    10: { icon: "icon-zz-horse", desc: "🐎马年祝您一马当先" },
    11: { icon: "icon-zz-goat", desc: "🐑羊年祝您喜气洋洋" }
  };
  return icon[index];
});

调用方式：

  • getAnimalIcon(year).icon：调用当前年份的生肖icon；
  • getAnimalIcon(year).desc：调用当前年份的生肖描述；（主要是为了展示用的）

调用实例

   比如我想修改的是侧边栏个性欢迎的icon，希望它每年根据年份自动显示对应的生肖icon
   修改themes\anzhiyu\layout\includes\widget\card_announcement.pug

1
2
3
4
5
6
7
8
if theme.aside.card_announcement.enable
  - var nowYear = new Date().getFullYear()
  .card-widget.card-announcement
    .item-headline
      a.faa-parent.animated-hover(title='👏欢迎来访' + (getAnimalIcon(nowYear).desc) draggable='false')
        i.fab.iconfont(class=getAnimalIcon(nowYear).icon).faa-tada
      span= _p('欢迎来访')
    .announcement_content!= theme.aside.card_announcement.content

一键三连

   改完后，执行hexo clean && hexo g && hexo d，这样你的博客就有了每年都会自动更换的生肖icon标志。

]]> 闲来无事逛主题的目录，发现了一个几乎没怎么用到的js，于是突发奇想，就将博客的侧边栏个性欢迎的标志和页脚，修改成了每年都换成对应的生肖标志。 给你的Hexo博客添加灯笼和春联 https://blog.chn.us.kg/blog/zz-14/ 2025-01-23T00:08:43.000Z 2025-01-23T00:08:43.000Z 效果预览

⚠️ 本教程仅适用于Hexo框架的anzhiyu主题，其他主题请谨慎参考。🙏

   今年是中国春节成为非遗的第一个春节，当火红的灯笼🏮高高挂起来，过年的氛围一下子就起来了，再加上春联，简直就是完美！

灯笼元素

  1. 修改themes\anzhiyu\layout\includes\layout.pug文件，新增下列代码，大概是在第9行，其实pug文件最好使用pug语法，我是因为懒，实在不想再转换了，就直接使用html了。
1
2
3
4
5
6
html(charset='utf-8' lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
  head
    include ./head.pug
+    if theme.denglong.enable
+      <div class="denglong"><div class="deng-box1"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">新</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box2"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">春</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box3"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">快</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box4"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">乐</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div></div>
  body(data-type="anzhiyu")
  1. 主题配置文件新增全局开关，在themes\anzhiyu\_config.yml文件中，新增下列代码：
1
2
+ denglong:
+   enable: true  #true 开启 false关闭

春联元素

  1. 修改themes\anzhiyu\layout\includes\loading\fullpage-loading.pug文件按，新增春联的pug代码：
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
#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
  .loading-bg
    img.loading-img(class='nolazyload' src=url_for(loading_img))
    img.loading-image-dot(class='nolazyload' src=url_for(loading_dot))
+    if theme.duilian.enable
+      div.duilian
+        .left-panel
+          .couplet-container
+            .couplet-decor.top
+            .couplet
+              p=theme.duilian.left_panel
+            .couplet-decor.bottom
+        .center-panel
+          .horizontal-scroll
+            .couplet-decor.left
+            .couplet
+              p=theme.duilian.center_panel
+            .couplet-decor.right
+        .right-panel
+          .couplet-container
+            .couplet-decor.top
+            .couplet
+              p=theme.duilian.right_panel
+            .couplet-decor.bottom
script.
  1. 主题配置文件新增全局开关（主要是方便后续进行管理，避免了一直修改pug文件的繁琐。true=开启或者false关闭,也可以自定义春联的内容（有精力的也可以将其调用春联的API,实现每次刷新自动更换春联内容）在themes\anzhiyu\_config.yml文件中，新增下列代码：
1
2
3
4
5
+ duilian: 
+   enable: true  #true 开启 false关闭
+   center_panel: 金蛇献瑞
+   left_panel: 天增岁月人增寿
+   right_panel: 春满乾坤福满楼

css样式

   在themes\anzhiyu\source\css\目录下，新增样式，如chinese-new-year.css，我将上述灯笼和春联的css样式写在了一起，代码如下：

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
/* 新年灯笼🏮 */
.deng-box1 {
    position: fixed;
    top: -30px;
    left: 10px;
    z-index: 9999;
    pointer-events: none;
}
.deng-box2 {
    position: fixed;
    top: -30px;
    right: 10px;
    z-index: 9999;
    pointer-events: none;
}
.deng-box3 {
    position: fixed;
    top: -40px;
    left: -20px;
    z-index: 9998;
    pointer-events: none;
}
.deng-box4 {
    position: fixed;
    top: -40px;
    right: -20px;
    z-index: 9998;
    pointer-events: none;
}
.deng-box4 .deng, .deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, .8);
    border-radius: 50% 50%;
    transform-origin: 50% -100px;
    animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px #fc903d;
}
.deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, .8);
    border-radius: 50% 50%;
    transform-origin: 50% -100px;
    animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px #fa6c00;
}
.deng-a {
    width: 100px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, .1);
    margin: 12px 8px 8px 8px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
.deng-b {
    width: 45px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, .1);
    margin: -4px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
.xian {
    position: absolute;
    top: -20px;
    left: 60px;
    width: 2px;
    height: 20px;
    background: #dc8f03;
}
.shui-a {
    position: relative;
    width: 5px;
    height: 20px;
    margin: -5px 0 0 59px;
    animation: swing 4s infinite ease-in-out;
    transform-origin: 50% -45px;
    background: orange;
    border-radius: 0 0 5px 5px;
}
.shui-b {
    position: absolute;
    top: 14px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #dc8f03;
    border-radius: 50%;
}
.shui-c {
    position: absolute;
    top: 18px;
    left: -2px;
    width: 10px;
    height: 35px;
    background: orange;
    border-radius: 0 0 0 5px;
}
.deng:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    z-index: 999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: orange;
    background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);
}
.deng:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    margin-left: 20px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: orange;
    background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);
}
.deng-t {
    font-family: 华文行楷, Arial, Lucida Grande, Tahoma, sans-serif;
    font-size: 4.5rem;
    color: #dc8f03;
    font-weight: 500;
    line-height: 85px;
    text-align: center;
    margin: 0 0 0 -16px;
}
.night .deng-box2,
.night .deng-box4,
.night .deng-t {
    background: 0 0!important;
}
@-moz-keyframes swing {
    0% { -moz-transform: rotate(-10deg); }
    50% { -moz-transform: rotate(10deg); }
    100% { -moz-transform: rotate(-10deg); }
}
@-webkit-keyframes swing {
    0% { -webkit-transform: rotate(-10deg); }
    50% { -webkit-transform: rotate(10deg); }
    100% { -webkit-transform: rotate(-10deg); }
}


/* 对联 */
.loading-bg .duilian .left-panel,
.loading-bg .duilian .right-panel {
  width: 40%;
  height: 100%;
  position: fixed;
  top: 40px;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-bg .duilian .couplet-container {
  background: rgba(216,0,15,0.8);
  position: relative;
  box-shadow: 0 0 20px rgba(220,143,3,0.1);
  border-radius: 30px 30px 5px 5px;
  width: 90px;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid rgba(255,217,0,0.831);
}
.loading-bg .duilian .couplet-container:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 2px solid rgba(255,217,0,0.831);
  border-radius: 25px 25px 3px 3px;
  opacity: 0.6;
}
.loading-bg .duilian .couplet-container .couplet-decor.top {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 30px;
  background: rgba(216,0,15,0.8);
  border: 4px solid rgba(255,217,0,0.831);
  border-radius: 15px 15px 0 0;
}
.loading-bg .duilian .couplet-container .couplet-decor.top:before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: rgba(216,0,15,0.8);
  border: 4px solid #dcbf03;
  border-radius: 50%;
}
.loading-bg .duilian .couplet-container .couplet-decor.bottom {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 30px;
  background: rgba(216,0,15,0.8);
  border: 4px solid rgba(255,217,0,0.831);
  border-radius: 0 0 15px 15px;
}
.loading-bg .duilian .couplet-container .couplet-decor.bottom:after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: rgba(216,0,15,0.8);
  border: 4px solid rgba(255,217,0,0.831);
  border-radius: 50%;
}
.loading-bg .duilian .couplet {
  color: rgba(255,217,0,0.831);
  font-size: 2.5rem;
  writing-mode: vertical-rl;
  font-family: "华文行楷", cursive;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  position: relative;
  z-index: 1;
  letter-spacing: 15px;
  line-height: 1.3;
  font-weight: bold;
  margin: 0 auto;
}
.loading-bg .duilian .left-panel {
  left: 0;
  /* transform: translateX(-100%); */
}
.loading-bg .duilian .right-panel {
  right: 0;
  /* transform: translateX(100%); */
}
.loading-bg .duilian .center-panel {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.loading-bg .duilian .center-panel .horizontal-scroll {
  background: rgba(216,0,15,0.8);
  width: 240px;
  height: 80px;
  border: 4px solid rgba(255,217,0,0.831);
  border-radius: 20px;
  position: relative;
  box-shadow: 0 0 20px rgba(220,143,3,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 25px;
}
.loading-bg .duilian .center-panel .horizontal-scroll:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 2px solid rgba(255,217,0,0.831);
  border-radius: 25px;
  opacity: 0.6;
}
.loading-bg .duilian .center-panel .horizontal-scroll .couplet-decor.left,
.loading-bg .duilian .center-panel .horizontal-scroll .couplet-decor.right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 50px;
  background: rgba(216,0,15,0.8);
  border: 4px solid rgba(255,217,0,0.831);
}
.loading-bg .duilian .center-panel .horizontal-scroll .couplet-decor.left {
  left: -15px;
  border-radius: 15px 0 0 15px;
}
.loading-bg .duilian .center-panel .horizontal-scroll .couplet-decor.left:before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: rgba(216,0,15,0.8);
  border: 4px solid rgba(255,217,0,0.831);
  border-radius: 50%;
}
.loading-bg .duilian .center-panel .horizontal-scroll .couplet-decor.right {
  right: -15px;
  border-radius: 0 15px 15px 0;
}
.loading-bg .duilian .center-panel .horizontal-scroll .couplet-decor.right:after {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: rgba(216,0,15,0.8);
  border: 4px solid rgba(255,217,0,0.831);
  border-radius: 50%;
}
.loading-bg .duilian .center-panel .horizontal-scroll .couplet {
  color: rgba(255,217,0,0.831);
  font-size: 2.5rem;
  writing-mode: horizontal-tb;
  font-family: "华文行楷", cursive;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  position: relative;
  z-index: 1;
  letter-spacing: 0.3em;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  margin-left: 0.3em;
}

一键三连

   完成上述步骤后，执行hexo clean && hexo g && hexo d，不出意外的话，你就可以看到博客上已经有了灯笼和春联。

]]> 去年网站加了两个灯笼，有小伙伴问我怎么加的，懒得写教程就没记录，今年加上后又有小伙伴来问，授人以鱼不如授人以渔，这不教程来了，请参考。 支付宝集五福开始啦，送你一张敬业福！ https://blog.chn.us.kg/blog/zz-13/ 2025-01-17T06:36:03.000Z 2025-01-17T06:36:03.000Z 序言

   支付宝于2016年上线了集五福活动，如今已经第10个年头了，每年辛辛苦苦集齐五福，但分到的却是一毛不值，金额只能以分计算。尽管遭受着大家的吐槽，支付宝集五福活动却依旧我行我素，每年都如期而至。不过换个角度想，其实背后的意义在于：支付宝通过五福活动赚足了营销费和其他商家的广告费。而对于我们个人，说白了也压根没指望着参加活动能瓜分多少钱，更多的是集五福活动成了春节前的造势活动，过年的象征意义远大于实际钱数。总有那么一种感觉，集五福了，也就距离过年不远了。
   这不2025集五福活动又又又要开始了，而今年和去年还有点不一样。

2025年集五福

   2025年的集五福活动，1月15日支付宝还大张旗鼓的在上海举行了2025支付宝集福啦发布会，这逼格整的挺高的。

▲ 2025支付宝集福啦发布会

   支付宝对今年的“集五福”活动做了重大调整，从往年只集一套（五福）变成了29套，每套福卡也是5张，每套卡都有它的稀有卡（如敬业福），每个用户限集5套。什么火热的黑神话、蠢萌的露比、还有迪士尼、奥特曼、漫威、乐高等各类主题福卡。另一个变化是，往年集齐1套五福要等到除夕开奖，今年活动开启后，用户每集齐一套卡就可随时兑换红包。具体的大家伙自己扒吧。

早鸟卡——稀有福

   现在去支付宝搜集福啦，就可以提前获取3张福卡，有一张就是稀有卡。到时间就能揭晓稀有卡是什么了。

▲ 2025支付宝早鸟卡活动

IP主题福卡

支付宝官方表示：“今年是支付宝集福的第10年，除了一点小小心意红包，也希望大家可以选喜欢的卡，过开心的年。”

▲ 支付宝经典五福、黑神话IP、露比IP、奥特曼IP

福利指引

具体规则如下：

  1. 福卡1套变29套，在经典福卡基础上新增28套特色主题福卡，用户可任选5套来集；
  2. 开奖机会1次变5次，每集齐1套福卡，立刻开奖，不必再等除夕；
  3. 持续至大年初五，过年也能玩；
  4. 集卡方式更多样，除了扫福字、看视频得福卡，扫IP主题元素、碰一下支付也能得福卡；
  5. 福卡可以提前领，1月15日-1月19日，上支付宝搜【集福啦】有机会得万能福。

   最后祝大家都能集齐五福，过美好蛇年！

]]> 每到过年，支付宝集五福活动如期上线，虽然人均分的不多，但过年的氛围远远大于那几分钱，2025集五福开始啦，准备好扫敬业福！ 2024再见，2025你好，元旦快乐！ https://blog.chn.us.kg/blog/zz-12/ 2024-12-31T15:59:18.000Z 2024-12-31T15:59:35.000Z 2024再见，2025你好。
元旦快乐！

序言

   此刻已经是2024年的最后一天了，准确来说是倒计时不足三个小时了，不管这一年过的艰辛还是甜蜜，忐忑还是不舍，时间在往前走，岁月不会为谁而留步，每一年对于我们所有人来说都是独一无二的印记，过去了就不复存在。每到岁末年初，总会有许多人对往事感慨不已，而我，也不例外。

关于2024

   2024年的元旦我和老婆去了趟金山，也是冲着纪实人文频道里宣传的日出东方，金山如画，迎接2024新年日出去的。虽然天公不作美，但还是在2024年的第一天，我两看到了新年的第一轮月光（清晨五点多等日出的时候看到的）和第一轮日出，虽然那天很冷，但是跨年的意义不言而喻，仪式感可谓是拉满。

   2024年在工作上没有太大的变动，主要是学会了思考和使用技巧来提高效率，也在思考中学会了一些处理事情的方法，虽然谈不上很多，多少也是有点收获的。在项目组中也算是元老的存在了，但在很多事情上还是做的不够好，其实很多事情得过且过就行了，但自己的性格是那种能做得更好就不会罢休的性格，所以很多时候自己做的太好了，领导也不会夸你，反而会因为下一件事没有之前做的好而逼逼叨叨几句，所以还是得自己学着聪明些，工作嘛是干不完的，得学会排解压力，毕竟除了工作还有生活需要投入更多的时间，这辈子工作也仅仅是为了养家糊口而已，分内之事尽心尽力，其他的酌情而定，毕竟在一定程度上我做得多，未必拿的多。人都是有功利心的，更何况咱也只是甲方驻场人员，同工又不同酬，与其内耗或者说给自己加活，倒不如趁时间去提升自己的能力，争取早日实现创业或者向更好的方向发展。

   2024基本上出去的时间更少了，4月份去了一次扬州，当时还和老婆开玩笑，人家古人是烟花三月下扬州，我们倒好四月了才下扬州。虽然没赶上樱花但是瘦西湖的风景确也不错，千红万紫一片春，也算没负春日好时光，扬州做的好的一点是出了高铁站，就有直达免费的公交，虽然咱也不是掏不起公交费的人，但是就冲着人能给外地人免票乘坐公共交通工具，这一点属实会让外地的游客心里暖暖的。不过很快打脸了，晚上就碰到了住宿的问题，为此还惊动了警察叔叔，不过最后还是解决了，所以总结下来就是，扬州很好，但下次应该不会再去了的那种……除此之外，8月份因故回了一趟家，就再也没出过上海。国庆假期七天，就在上海逛了逛，先是去了广富林遗址公园，据说这是上海的根，遇到了一些庙宇进去拜了拜，只求得心安。后面又去了上海共青森林公园，再就是这个月去了泰晤士小镇，小镇上荒凉的让人不敢相信，主要是缺少烟火气，泰晤士小镇里的游客指头都能数的清，可见其有多荒凉。

   其余的2024波澜不惊，就像一汪湖水静静地流淌在岁月之间，偶有泛起的涟漪，过后又平静如初，不知为何总感觉这些年时间过得越来越快，快得有点不适应，总感觉去年跨年刚过去不久，真是应了那句，时光冉冉，岁月如梭，在经意和不经意间，时光已悄然流逝，也有可能是年纪到了一定的程度，记得小时候盼望着过年，总是感觉好漫长，如今却愈发觉得这年未免有些太快了。所以啊，还是要在有限的时间里，做些有意义的事，免得以后后悔时光流逝，一无所获。

   如果要给2024一个字概括，我觉得应该是“平”，一来是日子过得平淡，也可能是步入而立之年对生活的态度也有所不同了，之前那种争强好胜的心态已经逐渐趋于钝化、之前朋友圈分享生活的想法现在也变得是我过得好就行了，没必要秀了；另外一点是平安，这一年家人朋友都算平安，当然我也希望来年继续平凡而平安的度过。

   2024，搁笔至此，虽有牵挂，但也难书，毕竟昨日难复，往事不可追。

   再见，2024。

展望2025

   新的一年即将来临，太多的期望也都需要脚踏实地去实现，不如趁着新年新气象，一步一个脚印，让自己去踏出属于2025的精彩！

   新的一年，真的要好好计划一下了，无论是生活，工作还是学习上，都要有所建树，不要受人影响，做好自己的每一个选择，时光易逝，把握当下，记录生活，记录感动，希望来年平安顺遂，健康喜乐。

   当然也希望，2025，所愿皆所成，所求皆所得，所行皆可达。

   最后也希望爱我的和我爱的所有人，平安喜乐，元旦快乐！

   也祝屏幕前的你，元旦快乐！2025，从头开始！

2025·日出日落

   早上醒的时间刚刚好，7点钟刚好是日出后的十分钟，赶紧拿起手机，于是就随手拍下了这新年的第一缕阳光。

▲ 拍摄于：2025-01-01·上海 f/1.95 ISO50

   下午回家途中，看到夕阳正好，也随手拍了下来。2025的第一天，有始有终。

▲ 拍摄于：2025-01-01·上海 f/1.95 ISO50

]]> 今天是2024年的最后一天，不管这一年好与坏，它都走到了终点，是时候说再见了，2024再见，2025你好，元旦快乐！ 苦读半生的终点，大抵都以毕业论文为终点 https://blog.chn.us.kg/blog/zz-11/ 2024-12-27T07:19:38.000Z 2024-12-27T11:39:35.000Z

今天偶然整理电脑文件时，翻出了当年的毕业论文，不管论文的写得好与差，这些评判的标准都随着毕业典礼的结束烟消云散，而它的象征意义现阶段来说仍然是值得怀念的。看着这些文字，随即浮现出毕业前夕挑灯熬夜写论文的日子，虽然已经过去了很多年，但这段过往仍历历在目，因为那也算是大学时代的一个句号，突然心血来潮，与其纪念不如就将原文粘过来保存在博客里，一是回味这段大学的青葱岁月，二是为以后留下一点点纪念。

中国钢铁出口贸易存在的问题及对策分析

摘 要

   钢铁产业是中国的支柱产业，对中国国民经济有重要的影响；中国的钢铁贸易在世界钢铁市场中扮演着重要角色，是全球钢铁产业发展中不可缺少的部分。随着钢铁产业的飞速发展，中国钢铁产业和钢铁出口贸易面临着诸多问题。因此，研究中国钢铁出口贸易存在的问题是中国对外贸易领域中的重要课题。
   本文首先简述了中国钢铁产业和出口贸易现状，运用数据统计分析中国钢铁21世纪以来的贸易现状。接着对世界经济的影响进行了分析，主要以世界钢铁市场供需关系来说明其影响作用；借助线性模型分析中国钢铁出口贸易对中国国民经济的作用。然后分析得出中国钢铁出口结构不合理、贸易摩擦、贸易保护、进口铁矿石依赖度高等问题。最后基于以上问题分别对各主体提出相应对策：分别是政府应合理对待冲突确保出口贸易制度化、钢铁协会加强引导促进出口贸易规范化、钢铁企业积极应对保障出口贸易正常化。
   关键词：钢铁产业、贸易保护主义、钢铁出口

Study on China’s Steel Export Trade Problems and Countermeasure

ABSTRACT

   The iron and steel industry is China’s pillar industry, has the important influence to the Chinese national economy, the Chinese steel trade plays the important role in the world steel market, is the global steel industry development essential part. With the rapid development of iron and steel industry, China’s steel industry and steel export trade face many problems. Therefore, the study of China’s steel export trade is an important issue in the field of foreign economic and trade.
   First of all, this paper summarizes the status quo of China’s steel industry and export trade, and analysis of China’s steel trade since the 21st century the status quo by using data. Then it analyzes the impact on the world economy, mainly in the world steel market supply and demand relationship to explain its impact; Analysis of the effect of China’s steel export trade on China’s national economy by using linear model. And then analyzed the irrational structure of China’s steel exports, trade friction, trade protection, high dependence on imported iron ore and other issues. Finally, based on the above problems, the corresponding policies are put forward, the government should rationally treat the conflict to ensure the institutionalization of export trade, strengthen the guidance of Iron and Steel Association to promote the standardization of export trade, and iron and steel enterprises should actively handle the normalization of export trade.
   Keyword：Iron and steel industry、Trade protectionism、Steel export trade

一、 前言

（一）研究背景与意义

  1. 研究背景

   钢铁产业在中国是支柱产业，其在国民经济组成部分中占比最大。从中国改革开放以来，中国钢铁产业发展迅速，逐渐形成了“走出去”模式，在中国现代化发展进程中发挥着重要作用。随着经济全球化和工业技术的不断升级，中国钢铁产业既有机遇又有挑战。全球经济目前处于低迷状态，中国经济在新常态的战略部署下低速增长。对于人口增长、新型钢铁应用的出现和新兴市场的发展预期下，钢铁行业将再现增长，现代社会的发展离不开钢铁产业。2016年整个中国钢铁行业虽然受到世界范围钢材价格波动的影响，但通过中国钢铁企业生产积极性和国家政策性的支持，中国钢铁产量较2015年仍然呈现小幅度的上升趋势。
中国钢铁出口贸易主要以低附加值板材和半成品为主要出口产品，与发达国家相比中国钢铁贸易以量取胜，尽管随着中国产品结构的不断升级和技术改造，在一定领域内出现了高附加值的钢铁产品，但由于中国钢铁贸易数量出口额大于进口额，利润额在一定时间内无法扭转这一局面。加之中国钢铁出口贸易产品定价较低在世界钢铁贸易竞争中容易遭受其他国家钢铁贸易保护，导致中国钢铁贸易摩擦激烈。中国粗钢产量世界排名第一但原材料依赖于进口，主要利润来自国外，长期以往中国钢铁贸易容易受制于国外。

  1. 研究意义

   每个国家的支柱产业不仅起到支撑本国经济的作用还无时不刻与本国经济相关的各个行业息息相关。中国钢铁贸易作为中国的支柱产业对于中国经济影响重大，并对中国经济增长、出口贸易、充分就业和中国市场稳健运行有着重要作用，因此解决好中国钢铁贸易中存在的问题是确保中国钢铁出口平稳健康发展的前提条件，也是解决中国钢铁产业作为支柱产业的关键所在。
   另外中国钢铁产业对内表现为生产结构不合理、产品浪费、产能过剩；对外贸易表现出产品附加值低、贸易摩擦激烈、国际竞争力不强。中国钢铁贸易内忧外患的局面亟待解决。基于中国钢铁贸易内忧外患的背景，本文以中国钢铁出口贸易存在问题及对策分析为主题，主要研究中国钢铁贸易现状、问题及原因分析，从钢铁贸易参与各方提出解决对策，为中国钢铁出口贸易平稳健康发展提供理论参考。

（二）国内外研究现状

  1. 国外研究现状

   在国外对于中国钢铁贸易的研究主要以中国钢铁市场、钢铁原料进口、贸易摩擦等方面展开。
   Rachel Tang 2010年9月在《China’s Steel Industry and Its Impact on the United States: Issues for Congress》一文中指出：中国虽是世界第一产钢大国，但中国钢铁集中性并不高，其钢铁生产、销售渠道与售后服务分散。另外指出中国拥有将近1200家钢铁制造商，其中70%是大中型钢铁制造商，其余为小型工厂。由于技术问题造成生产效率低和环境污染等问题，造成中国钢铁产量高的同时成本也高。
   Rachel Tang在2010年《中国钢铁业和及其对美国的影响︰ 国会的问题》一文中指出：据2011年世界钢铁协会数据统计，近91%的粗钢产量来自中国，但由于中国本土铁矿石生产满足不了中国大量钢铁生产，中国铁矿石近1/2依赖进口。这使得中国对于铁矿石原料的需求激增改变着世界供求关系的变化。
   对于中国钢铁出口贸易遭受的反倾销问题，Chad P. Brown在《The WTO and Antidumping in Developing Countries》一文中指出美国钢铁企业认为，中方政府对于本国钢铁采取的一系列资助行为，是影响美国钢铁产业良好发展的关键性问题。美国认为迫使美方针对于中国钢铁出口产品的反倾销和反补贴是因为中国钢铁贸易产品存在不公平竞争。美国国会关注的焦点主要集中在，中国钢铁生产急速扩大，引起世界市场波动和美国国内需求变化以及中国钢铁产品质量问题。

  1. 国内研究现状

   关于贸易摩擦的研究宋彦在2016年4月《中国钢铁产品出口中的贸易摩擦》一文中指出中国钢铁出口贸易摩擦不断的原因主要有三点：首先是中国钢铁产业迅速发展导致对其他国家造成影响加大；其次是中国钢铁产品定价优势造成其他国家以反倾销为名对中国钢铁出口贸易进行调查；最后一点是欧美等国为了将优惠政策植入本土产品，对中国钢铁产品采取抵制，这很大程度造成中国钢铁出口贸易摩擦频繁。
   关于对于中国钢铁贸易摩擦现状的研究和分析，陈卫东在2016年发表的《美国对中国钢铁产品337调查须过“三关”》一文中指出中国连续13年成为美国337调查涉案最多的国家，从2007年以来截至到2016年4月，美国政府发起的“337调查”总共有392起，与中国有关案件多达169起，占比重近43%。值得一提的是，2016年5月26日，中国钢铁遭遇出口贸易历史上的第一次“337调查”。另外宋彦在2016发表的《反倾销案件在中国钢铁产品出口中的体现及解决对策》一文中根据2015年对华钢铁产品反倾销的统计，2015年1-3月份反倾销案件达33起。2014年以来，欧盟对华产品发起贸易救济调查15起，其中钢铁产品8起，占比53%；2015年美国共对华发起43起反倾销调查和22起反补贴调查；2016年欧盟发起4起对华钢铁产品反倾销反补贴调查。
   霍咚梅、肖邦国2016年5月在发表的《我国钢铁外贸与贸易摩擦浅析》中分析了中国钢铁对外贸易和贸易摩擦情况以及中国钢铁产业频繁受到贸易摩擦的原因，并对我国钢铁产业应对贸易摩擦的措施提出了建议。
关于中国钢铁出口贸易的研究，王素在2016年发表的《中国钢铁出口去哪儿？》一文中分析了中国钢铁出口贸易遭遇的贸易摩擦主要是反倾销、反补贴、美国“337调查”和贸易救济调查为主。另外也为中国钢铁产品出口提出中国钢铁产能过剩不仅要靠全球经济复苏拉动，也要靠中国钢铁各方冷静对待，切忌“病急乱投医”。另外就是中国粗钢产量世界第一，要利用“一带一路”战略，调整钢铁产品结构，由粗钢向高附加值钢铁产品过渡，让粗钢和高端钢泾渭分明。
   马胜利在2012年3月发表的《浅议人民币升值对中国钢铁产品进出口贸易的影响》中一方面讨论了人民币升值与钢铁产品进口之间的关系，另一方面也分析了人民币升值对中国钢铁出口贸易的抑制作用，最后为中国钢铁企业进出口战略调整提供了理论依据。
   吴丽艳在2012年4月发表的《我国钢铁贸易存在的问题及对策分析》的文章中指出中国钢铁贸易发展速度较快，同时又产能过剩。这些原因导致中国钢铁贸易既存在条件恶化的环境问题又存在贸易摩擦频繁的国际贸易争端问题，另外指出中国钢铁贸易结构不合理的现状：钢铁进出口市场过度集中、对于钢铁原材料进口依存度高。最后对资源和环境等问题进行研究分析，并提出中国应该鼓励进口低端钢铁产品，并且指出要推动钢铁技术升级的对策建议。
   韩晓磊、张超在2011年2月发表的《基于低碳经济的中国钢铁工业进出口结构分析》一文中分析了中国钢铁进出口存在的问题，指出中国进口钢材产品主要以高端产品为主，而出口钢材大部分是低端钢材，在分析中国钢铁工业中的碳排放现状、钢材进出口结构及其对实现低碳减排目标影响的基础上，提出了对应的政策建议。

二、中国钢铁产业发展概述

（一）中国钢铁产业发展现状

表1：2015年世界钢铁公司粗钢产量排名
（单位：亿吨）

排名公司总部所在国产量 (亿吨)
1安赛乐米塔尔卢森堡0.97
2河钢集团中国0.48
3新日铁住金(NSSMC)日本0.46
4浦项制铁韩国0.42
5宝钢集团中国0.35
6沙钢集团中国0.34
7鞍钢集团中国0.33
8日本钢铁工程控股公司日本0.30
9首钢集团中国0.29
10塔塔钢铁集团印度0.26

数据来源：世界钢铁协会编制的《世界钢铁统计数据2016》

  1. 中国钢铁行业生产规模

   2015年世界粗钢产量达16.21亿吨，同比下降2.9%。2015中国钢铁消费量占全球消费量44.8%，2014年为45.9%。根据世界钢铁协会发布的《世界钢铁统计数据2016》中以粗钢产量为统计单位对世界钢铁公司进行了排名，其中世界前十名中国钢铁公司占了5席，在统计的94个会员国家中，中国钢铁总共占有50席，占比53.2%。 数据来源：世界钢铁统计数据2016
   据中国国家统计局公布的数据显示得知，2016年全国粗钢产量8.08亿吨，同比2015年生产的粗钢增长1.2%；生铁产量7.01亿吨，增长0.7%；钢材产量11.38亿吨，增长2.3%。2016年中国的粗钢产量超过2015年的8.04亿吨。数据来源：中国国家统计局2016年是“十三五”的第一年，2016年中国主要以推进供给侧结构性改革为主线，保持社会经济平稳运行。
   由表2可知，中国钢铁公司产量较大，尤其以河钢集团和宝钢集团为首的大型钢铁生产公司的粗钢产量占据世界粗钢产量的较大份额。2016年12月，中国粗钢产量0.67亿吨，同比增长3.2%；生铁产量0.57亿吨，同比增长4.1%；钢材产量0.96亿吨，同比下降0.2%；钢材日均产量0.031亿吨，同比增长0.4%，环比下降2.9%。由此可见，中国钢铁生产后劲很大，从数据显示出中国钢铁生产不论是从同比还是环比都有增长趋势，这也体现出“十三五”开局之年钢铁产业逐步稳步发展的良好态势。数据来源：中国证券网

表2：2011-2015年中国粗钢产量公司排名
（单位：亿吨）

公司20112012201320142015中国世界
河钢0.440.430.460.470.4812
宝钢0.430.430.440.430.3525
沙钢0.320.320.350.350.3436
鞍钢0.300.300.340.340.3347
首钢0.300.310.320.310.2959
武钢0.380.360.390.330.26611
山钢0.240.230.230.230.22712
鞍钢0.170.170.190.190.19815
海钢--0.190.180.16918
建龙-0.120.140.140.151020

数据来源：世界钢铁协会编制的《世界钢铁统计数据2016》

  1. 中国钢材价格及成本

   2016年中国钢铁市场中的8大钢材产品种在中国10个城市的上涨额度均超过0.12万元/每吨，其中上涨最大的是冷轧卷为0.21万元；上涨额度最小的是H型号钢为0.12元。其他钢材品种的上涨额度处于中间水平，大致幅度在0.13万元到0.18万元左右。从涨幅来看大的是冷轧卷板同比增长83.1%；H型号钢涨幅最小但增长幅度也高达60.5%，其他品种的涨幅均保持在63%-83%之间。数据来源：墨心，2016年国内钢铁市场盘点及2017年展望[J]，天津冶金，2017(2)

图1：2016年1-12月中国钢材价格指数走势

数据来源：中国钢铁工业协会网站

   2016年中国国内钢材价格指数从1月份持续上升，直到4月份开始价格指数下降但从5月份到12月份钢材价格指数又持续上涨，且在12月份达到最高点，总体来说2016年中国国内钢材价格指数在小范围内波动但总体持续上涨。

   2016年，我国钢铁原料价格大幅上涨。据监测数据显示，截至2016年12月30日，唐山地区66%品位干基铁精粉价格涨幅72.6%；进口铁矿石，澳大利亚61.5%粉矿日照港市场价格较年初上涨91.4%。唐山地区二级冶金焦价格较年初上涨194.2%。2016年由于原料价格上涨，2016年底的方坯成本价较年初上涨43.1%，可见钢铁生产成本在2016年有较大提升。从原料市场趋势来看，2017年尽管全球铁矿石市场仍有约3亿吨的供应增量，但考虑到铁矿石资源品位下降，铁矿石消费量维持稳定或略有增长，铁矿石市场价格或仍将呈震荡上行态势，价格底部继续缓慢抬高。 数据来源：中国物流与采购网

（二）中国钢铁出口贸易现状分析

表3：2000-2015年中国钢材进出口贸易量与贸易额

年份钢材进口量(亿吨)钢材出口量(亿吨)钢材出口金额(亿美元)钢材进口金额(亿美元)
20000.160.0622.2985.36
20010.170.0518.6789.64
20020.240.0521.83123.66
20030.370.0731.05199.16
20040.290.1783.34207.85
20050.260.21130.78246.08
20060.190.43262.30198.27
20070.170.63441.33205.53
20080.150.59634.42234.33
20090.170.25222.72194.80
20100.160.43368.19201.12
20110.160.49512.66215.76
20120.140.56514.87178.05
20130.140.62532.13170.52
20140.140.94708.13179.14
20150.131.12628.15143.35

数据来源：中华人民共和国统计局——国家数据

  1. 中国钢铁出口贸易量

   根据世界钢铁协会统计的世界钢铁统计数据2016中显示，2015年世界粗钢总产量量达到16.21亿吨。数据来源：世界钢铁协会2015年中国钢铁出口总量1.17亿吨，占2015年世界总消费量的7.4%。中国钢铁进口量0.13亿吨，钢铁净出口量为0.98吨。数据来源：世界钢铁统计数据2016
   由上面的表3以时间序列纵向列举了2000-2015年中国钢材进出口贸易量和贸易额的变化情况。2001年中国加入世界贸易组织以后，中国的钢材出口贸易量和贸易均出现了较大幅度的上涨，其中贸易量同比增长41.2%。自从2006年开始中国钢铁贸易从净进口变为净出口贸易，在以后的10年间均保持着较大幅度的增长趋势。
   根据中国海关总署的相关数据统计，中国钢材出口量在2015年第一次挺进了1亿吨，这一数据更是打破了整个世界在钢铁出口贸易领域中的最高纪录。另外据统计，2016年5月份中国钢材出口市场份额呈向上走势，5月份出口0.94亿吨，比4月份增加了3.7%。数据来源：中国海关总署

图2：2000-2015中国钢材进出口贸易量

数据来源：根据中华人民共和国统计局——国家数据整理而得

   图2以时间序列反映了自2000年至2015年15年以来中国钢材进出口贸易量的历年变化情况，中国钢铁出口逐年增加且增长幅度逐年扩大。通过对比往年数据得出中国钢材生产具有力度大、产量高的特点。另外中国钢材进口量从2011年以来呈现平稳态势且略有下降走势。由图1和表3分析可知，中国的钢铁贸易已成为钢铁净出口国，并且每一年的净出口量也在持续扩大。

图3：2000-2015年中国钢材进出口贸易额

数据来源：根据中华人民共和国统计局——国家数据整理而得

   中国钢材进出口贸易额和中国钢材进出口贸易量成正相关，自从2001年中国加入世界贸易组织以来中国钢材进出口贸易发展到了一个新的阶段。2006年中国钢材出口贸易量首次超过进口贸易量，也首次从净进口转变为净出口国。2009年由于全世界范围的金融危机的影响，中国钢材进出口贸易量及贸易额均是在近10年以来最低的一年，由此可见中国钢材进出口贸易反映市场的灵活性与世界市场的动荡息息相关。在此期间2014年中国钢材出口额最多，但通过图2可知2015是中国钢材年出口量最多的年份，从这一方面也就解释了2015年中国钢材价格整体低于2014年钢材价格水平，也从数据方面验证了2015年对于中国钢材市场是艰难发展的一年。
  1. 中国钢铁产品出口结构

   图4统计了从2008年金融危机期间到2013年中国钢铁产品主要贸易种类结构所占比重，通过观察分析得出，从总体来说中国钢铁产品贸易结构在这6年对外出口贸易中并没有太大变化，其各种类产品所占比重均维持在一定数值左右。

图4：2000-2013年中国各钢铁产品在钢材出口额中的比重

数据来源：根据贸易数据库查询的数据整理计算而得

   从2000年至2013年中国钢铁产品占据中国钢铁出口贸易比重来看，中国钢铁出口贸易主要以板带材钢、管材钢和棒线材为主，其他出口钢铁产品种中还有钢丝、角型钢、半成品和一次性材料。从时间序列来看，中国钢铁产品出口结构中的变化保持着总体平稳、个别年份差异较大的变化特点，这主要受到国内生产和国外需求等因素的影响而导致的。

图5：2013年中国钢铁出口贸易产品结构

数据来源：贸易数据库查询的数据整理计算而得

   图5就2013年中国钢铁出口贸易产品结构进行列举，从这张2013年中国钢铁出口贸易结构图中不难发现，在中国现有的钢铁产品出口贸易结构现状中，板材钢出口的比重为40.77%，占2013年中国钢铁产品出口贸易的最大比重，其次是管材钢比重达到28.23%、棒线材18.92%，三者总占比87.92%，由此可见中国钢铁产品主要以板材钢、管材钢和棒线材组成。2008年至2013年中国钢铁产品出口结构虽然每年都会有所变动，但从总体老看中国钢铁产品出口结构在这6年以来占比均保持稳定趋势。
  1. 中国钢铁主要出口地区

   图6反映的是2015年中国钢铁出口贸易主要地区的情况，其中占比重较大的地区依次是亚洲国家、中东地区、非洲、欧盟、其他美洲国家等。其中中国钢铁近一半以上出口到亚洲国家，出口地区最少的是大洋洲；其次钢铁出口较多地区是美洲地区，其中北美贸易区占4%，其他美洲国家占7%，与之相似的是欧洲地区，欧盟28国（2015）和其他欧洲国家出口总占比也接近11%。

图6：2015年中国钢铁贸易主要出口地区贸易量

数据来源：根据世界钢铁统计数据2012-2016整理而得

   图7反映了2011年至2015年中国钢铁主要出口地区贸易量情况，分析得知中国钢铁出口贸易地区较为稳定，随着年份的增加每年钢铁出口到这些地区的贸易量也逐年增加。其中增长最大的是亚洲地区，从2011年出口的0.25亿吨增加到2015年的0.64亿吨，增长2.5倍左右。

图7：2011-2015年中国钢铁贸易主要出口地区贸易量

数据来源：根据世界钢铁统计数据2012-2016整理而得

   根据表4，出口地区较为稳定的是日本和大洋洲地区，其每年出口量基本维持在0.01亿吨左右。纵观5年中国钢铁对外贸易地区，中国对外出口市场以亚洲为主、其次是欧美、非洲等地区。这也说明中国钢铁出口贸易市场较大，预期前景较好。

表4：2011-2015年中国钢铁贸易主要出口地区贸易量
（单位：亿吨）

国家地区20112012201320142015
其他亚洲国家0.250.310.340.510.64
中东0.040.050.060.090.11
非洲0.030.030.050.070.09
欧盟0.050.040.040.060.09
其他美洲国家0.040.050.060.090.08
北美自贸区0.020.030.030.050.04
其他欧洲国家0.010.010.010.010.03
独联体0.020.020.030.020.02
日本0.010.010.010.020.01
大洋洲0.010.010.010.010.01

数据来源：根据世界钢铁统计数据2012-2016整理而得

三、中国钢铁出口贸易对世界和中国经济的影响分析

   在对人口增长、新型钢铁应用的涌现及新兴市场的发展预期下，钢铁行业将再现增长, 现代社会的发展离不开钢铁。
   中国钢铁生产量和消费量在世界上都占很大比重，中国钢铁出口贸易逐渐成为世界钢铁贸易市场中不可缺少的重要部分。随着中国钢铁消费量和产量的逐年增加，中国钢铁出口贸易对世界和中国经济也发挥着不可替代的重要作用。

（一）中国钢铁出口贸易对世界经济的影响分析

  1. 中国钢铁产量世界排名第一

   2015年世界粗钢产量16.21亿吨，中国粗钢产量8.038亿吨，占据世界总产量的49.6%。2016年中国粗钢产量8.08亿吨，同比2015年增长1.2%。通过图8：2015年世界粗钢产量分地区构成可以看出世界粗钢产量构成地区中中国接近1/2，由此可见中国钢铁生产对世界钢铁具有巨大的引导作用，也是世界钢铁生产量最大的国家。

图8：2015年世界粗钢产量分地区构成

数据来源：世界钢铁统计数据 2016

  1. 中国是世界最大的钢铁消费国

   中国钢铁市场具有特殊性，一方面中国是世界最大的钢铁出口国，一方面也是世界最大的钢材进出口国。中国之所以是世界上最大消费国，主要是因为中国对钢铁生产原材料的需求较大而国内由于资源有限和铁矿产出存在质量和技术上的差异导致中国国内的原料不足于满足中国钢铁生产，因此像铁矿石等一些钢铁生产原料严重依赖进口，而这也就使得中国成为世界上钢材消费最大的国家。除此之外也需进口部分中国国内无法生产的钢铁产品以满足国内需求。
   2015世界成品钢材总消费量15亿吨，中国消费量6.723亿吨，中国钢铁消费量占世界总消费量的44.8%。由图9：2015年世界钢铁消费量可以看出中国消费量也接近世界消费量的1/2，中国钢铁消费量也对世界经济具有积极推动作用，也是世界钢铁消费最大的国家。

图9：2015年世界钢铁消费量

数据来源：世界钢铁统计数据 2016

   由图8和图9可以看出中国钢铁产量和中国钢铁消费量在世界地位中占据着重要位置。从经济方面分析，中国钢铁生产量为世界提供了上亿吨钢材，在世界钢铁贸易中扮演着刺激世界经济的作用；中国钢铁消费量一方面通过进口原料用以生产的过程中对世界贸易经济具有重大的推动作用。无论是从占比还是数量两方面分析，中国钢铁在产量和消费中均占据着世界钢铁市场的半壁江山，对世界经济的发展趋势和全球经济化进程发挥着独特作用力，因此通过上述分析得出，中国钢铁贸易对整个世界经济市场的作用影响巨大，是世界经济市场中重要的一环。

（二）中国钢铁出口贸易对中国经济影响的实证分析

  1. 中国钢铁产业是中国的支柱产业

   钢铁出口贸易是我国目前所有出口贸易中占比最大、出口数量最多的一种对外贸易。在中国钢铁产业链广泛，且各环节紧密相连，因此钢铁产业对我国国民经济也是影响最大。从表5映出中国钢铁从2011年以来中国钢铁出口贸易额逐年增加到2014年达到最高值为708.13亿美元，而中国钢铁进口贸易除过2014年有增加以外，从2011年开始中国钢铁进口贸易额随着进口数量的减少而呈现出下降趋势。
   中国钢铁作为中国的支柱产业，对中国其他行业的发展和未来都有很大的借鉴性和联系性。整个钢铁产业链也是吸附中国劳动力最多的，不仅对钢铁行业发展影响巨大，对于中国的就业也有不可磨灭的贡献作用。因此从行业和产业的角度来分析中国钢铁产业其对中国经济的影响不仅有经济的作用还有稳定行业发展、解决就业压力，起到维护社会稳定的积极作用。

表5：2000-2015年中国钢材进出口贸易额
（单位：亿美元）

年份钢材出口额钢材进口额钢材净出口额
200022.2985.36-63.07
200118.6789.64-70.97
200221.83123.66-101.83
200331.05199.16-168.11
200483.34207.85-124.51
2005130.78246.08-115.30
2006262.30198.2764.03
2007441.33205.53235.80
2008634.42234.33400.10
2009222.72194.8027.92
2010368.19201.12167.07
2011512.66215.76296.90
2012514.87178.05336.82
2013532.13170.52361.61
2014708.13179.14528.98
2015628.15143.35484.80

数据来源：中华人民共和国统计局——国家数据

  1. 中国钢铁出口贸易对中国GDP的影响

   国民收入核算有三种方法——生产法、支出法和收入法。支出法核算从一个国家在一定时期内最终产品和服务的总需求（即总支出）角度来核算国民收入。宏观经济一般认为，总需求包括消费、投资、政府购买和净出口。其中消费$C$是指居民的消费支出；投资$I$是指资本形成；政府购买$G$是指政府在商品和服务上的总支出；净出口$(X - M)$是指出口与进口的差额，因此支出法核算的国民收入构成公式为：
$$
GDP = C + I + G + (X - M)
$$
   在经济学中如果将消费和政府购买（政府消费）统称为消费，那么消费、投资和净出口就是拉动或推动经济增长的三大动力，也就是西方经济学中常说的“三驾马车”。范立夫、张捷，中国经济增长与净出口关系的实证分析[J]，财经问题研究，2010(6)

   根据公式得知，净出口与$GDP$成正相关。图10直观反映出了中国钢铁贸易15年来的净出口差额，从2000年到2005年中国钢材进口大于出口，2006年开始中国成为净出口国，并在近10年中净出口贸易差额不断增加。2011年钢铁进出口贸易差额相差296.90亿美元，到2014年中国钢铁净出口贸易额达到528.98亿美元，是近5年以来净出口贸易额最多的一年，2015年虽然中国钢铁产量在近5年以来产量最多，但由于国际钢铁市场不景气造成中国钢铁贸易额并没与超过2014年的最高点。通过上述支出法核算国民经济收入$GDP$净出口额$(X - M)$与$GDP$成正比，因此净出口额差距越使得国民经济收入总量也越大。中国钢铁进出口额虽然在2015年有下降趋势，但通过数据预测和观察预期内中国钢铁贸易随着世界钢铁市场的回暖将在未来发挥巨大的积极推动经济的作用。

图10：2000-2015年中国钢铁进出口贸易额

数据来源：数据来源：中华人民共和国统计局——国家数据整理而得

  1. 中国钢铁出口贸易对中国GDP的回归分析

   本论文中的回归分析研究样本区间是1996-2015年的数据，以21年的时间为序列，以$GDP$（国内生产总值）和$NE$（钢材净出口额）为研究对象。通过回归性研究来说明中国钢铁出口贸易对中国$GDP$的影响作用。

  • (1) 样本数据

表6：1995-2015年中国GDP与钢材净出口贸易额
（单位：亿元）

年份国内生产总值（GDP）钢材净出口额（NE）占比%
199561339.9-297.8-0.49%
199671813.6-356.2-0.50%
199779715-315.9-0.40%
199885195.5-316.8-0.37%
199990564.4-385.6-0.43%
2000100280.1-434.7-0.43%
2001110863.1-489.2-0.44%
2002121717.4-701.9-0.58%
2003137422-1158.8-0.84%
2004161840.2-858.2-0.53%
2005187318.9-794.7-0.42%
2006219438.5441.30.20%
2007270232.31625.40.60%
2008319515.52757.80.86%
2009349081.4192.50.06%
2010413030.31151.60.28%
2011489300.62046.50.42%
2012540367.42321.60.43%
2013595244.42492.50.42%
20146439743646.20.57%
2015689052.13341.70.48%

2017-05-19 汇率：1美元=6.8929人民币
数据来源：中华人民共和国统计局——国家数据整理而得

  • (2) 散点图假设函数模型

图11：1996-2015年中国钢铁净出口贸易额和GDP相关性分析

数据来源：中华人民共和国统计局——国家数据整理而得

图12：函数选择

   在选择模型中型$(GDP,C,NE)$， $Y = \beta_1 \times X_i + \beta_0$，其中$Y = GDP$，$\beta_0 = C$，$\beta_1 = NE$

  • (3) 建立回归方程(EViews结果)

图13：1996-2015年中国GDP和钢铁净出口贸易额EViews结果

   由上图EViews结果分析如下：

   建立一元线性回归方程：$Y = 123.0662 \times X_i + 191704.4$。在回归方程中，$X_i$表示中国钢铁净出口额，$Y$代表的是中国$GDP$，回归方程模型表示的是在1996-2015年间，中国钢铁出口贸易额每增加1亿元时，中国的$GDP$增加123.0662亿元。

  • (4) 回归方程检验

   通过上图得知$t_0=8.780623$，$t_1=9.225697$。因此$S_{\beta_0}=\frac{\beta_0}{t_0}=21832.6649$，$S_{\beta_1}=\frac{\beta_1}{t_1}=13.3395$。假如给定一个显著性水平$\alpha=0.05$，查t分布表中的自由度为19，$\alpha=0.05$的临界值，得到$t_{\alpha/2}(19) = 2.093$。$t_1=9.225697 > t_{\alpha/2}(19) = 2.093$，说明解释变量中国钢铁出口贸易额在5%的显著性水平下显著，即通过了变量显著性检验。

   $R^2=0.807902$，拟合优度表明，中国国民收入的95%的变化可以由中国钢铁出口贸易额的变化来解释。

  • (5) 预测

   综上分析计算结果和检验结果得知，$Y = 123.0662X_i + 191704.4$，$R^2 = 0.8079$， $n = 21$，$S_{\beta_0} = \frac{\beta_0}{t_0} = 21832.6649$，$S_{\beta_1} = \frac{\beta_1}{t_1} = 13.3395$，$S = 1573.529192$。利用所得函数模型进行预测。

   假设2017年中国钢材出口额为4000亿元，则2017年中国的$GDP$预测值为：$Y=123.0662X_i+191704.4$，代入$X_i=4000$，即$Y=123.0662×4000+191704.4$，得出$Y=683969.2$亿元。因为存在标准误差$S=1573.529192$，样本数$n=21$，则在显著水平$\alpha=0.05$下，中国2017年$GDP$的预测区间为：$[Y±t_{\alpha/2}×S]$，即$[683969.2±2.093×1573.529192]$，得出$[683969.2±3293.396599]$。当2017年中国钢铁出口贸易额为4000亿元时，在显著水平$\alpha=0.05$下，中国$GDP$预测区间为$[680675.8034, 687262.5966]$亿元。

四、中国钢铁出口贸易存在的问题及原因分析

（一）欧美等国钢铁贸易保护主义升温

   产能过剩在全球已成普遍性，世界上任何一个曾经依赖钢铁产业的地区或者国家都遇到过这样的问题。目前的中国正处于这一阶段。钢铁出口大于进口，且因价格等问题。欧美经常通过各种名义对中国钢铁实施调查和指责。单从2016年来分析，欧美就钢铁产能过剩问题对中国施压不断变本加厉，要求中国削减产能，并对中国诸多钢铁产品发起反倾销反补贴调查和对有关产品进行贸易保护，其中涉及的产品种类多，发起的调查和贸易保护也逐渐升温。对此美国国际贸易委员会对华首次发起“337”调查。
   欧美对中国钢铁业发起的“贸易战”不仅如此。从2015年伊始，外国对华钢铁贸易案达50多起。为了化解冲突和争端，中国现已采取一系列有效措施来强化钢铁产品的自身品质和化解产能过剩等问题来规避来自于国外苛刻的贸易保护主义。钢铁面临的问题不是中国一国的问题，真正要想解决这一领域的问题还需要全世界的努力和共同合作应对。

（二）中国钢铁出口贸易摩擦不断加剧

   中国钢铁出口贸易的主要问题就是反倾销调查、反补贴调查及贸易保护措施等，据表6中国贸易救济信息网不完全统计得知，2015年国外对中国钢铁贸易发起6起出口贸易调查，其中包括欧盟4起，墨西哥和巴基斯坦各1起。在这些出口贸易调查中，主要针对的问题是中国钢铁产品的反倾销问题调查。近年来，中国钢铁凭借着国内劳动力、生产规模粗钢产量世界最大，钢铁出口定价较低赢得市场份额的同时也更容易引起国外欧美等国发起的贸易调查和贸易保护，这就造成了中国钢铁贸易在出口时更易受到贸易摩擦带来的损失，虽然中国钢铁出口量大，但由于其钢铁出口定价本身较低以及贸易摩擦使中国钢铁出口贸易利润与贸易数量关系并不紧凑，这也使得中国钢铁虽然作为全世界第一生产和出口贸易大国而利润却不足以达到世界钢铁贸易利润的平均水平。

表7：2015年-2016年主要出口地区对华钢铁产品调查情况

调查案件时间
墨西哥对强化钢铁绳缆发起反倾销调查2015.02.28
欧盟对华钢铁制紧固件做出反倾销日落复审终裁2015.03.30
欧盟就钢铁紧固件反倾销案执行异议程序专家组报告提起上诉2015.09.11
巴基斯坦对华钢铁线材发起反倾销调查2015.10.28
欧盟对华钢铁管对焊件进行反倾销调查2015.11.02
欧盟对华钢铁管配件做出反倾销日落复审终裁2015.11.02
欧盟对华无缝管钢铁进行反倾销调查2016.02.14
WTO通过中欧钢铁紧固件反倾销案执行异议程序上诉机构报告2016.02.18
墨西哥对华强化钢铁绳缆做出反倾销终裁2016.03.02
南非对进口轧扁钢等钢铁产品发起保障措施调查2016.04.05
美国钢铁工人联合会申请对初级未锻压铝发起全球保障措施调查2016.04.20
墨西哥对华涂镀钢铁产品做出反倾销初裁2016.08.01
南非对进口冷轧钢等钢铁产品发起保障措施调查2016.08.08
欧盟重启对华无缝钢铁管反倾销调查2016.09.26

数据来源：根据中国贸易救济信息网整理

（三）中国钢铁出口产品结构不合理

   自从2005年中国由钢铁净进口国变成为净出口国之后，随着中国钢铁出口贸易额的逐渐增加，也随之出现了一些不合理的现象。一方面中国钢铁出口贸易结构中主要以初级产品和低附加值产品为主，由于出口产品结构自身的局限性带来的环境高度污染和原料高度消耗正在困扰着整个中国钢铁市场。另一方面中国钢铁出口产品定价偏低导致国外对中国钢铁产品发起的反倾销调查屡见不鲜。正是由于中国钢铁产品出口结构的不合理和定价问题，使得中国钢铁产品在全球市场上摩擦不断。造成这个问题的原因一方面是生产技术和创新不够，另一方面是产品结构模式沿用传统，缺乏新产品。

（四）中国铁矿石对外依赖度高

   中国铁矿石对外依存度高，这样造成了中国钢铁原材料严重依赖于进口，长期以来会造成中国钢铁生产容易受到外界的牵制而不利于本国钢铁的长期发展。据统计2016年1-2月，中国铁矿石对外依存度进一步升至86.7%。数据来源：东方财富网
   造成这现象的原因主要是生产成本过高造成中国内矿山铁矿石生产量供不应求，最终导致中国铁矿石大幅依靠国外进口；其次就是由于近年来随着铁矿石价格的走跌，中国对铁矿石的进口数量增多导致对其依赖程度也逐渐上升。

五、中国钢铁出口贸易发展对策分析

   中国钢铁在国家钢铁市场日益成熟与贸易摩擦并存的时代，中国钢铁出口贸易在机遇和挑战中要想解决出口面临的问题绝非一朝一夕，不能只治标不治本。因此中国钢铁问题需要从容理性对待，从根本上着手解决钢铁出口问题，首先要从生产结构着手再就是解决产能过剩、提高生产技术等。而要想实现中国钢铁贸易的良好发展中国需要从政府层面、中国钢铁协会组织和钢铁生产企业三管齐下共同解决应对。

（一）政府合理对待冲突确保出口贸易制度化

  1. 推动钢铁产业结构升级

   对于钢铁产业，我国主要以寡头垄断的国营为主，这样一方面有利于生产集中促进钢铁产量，但同时又容易造成生产重复和资源浪费导致一系列的只经营不赚钱的局面，政府应该充分利用其职能出台相关政策和钢铁企业重组，通过整合资源、优化结构从源头上解决中国钢铁在生产上的不足。
   例如宝钢和武钢的重组合并。最近几年全世界范围内的钢铁市场处于低迷状态，而中国最大的钢铁生产企业宝钢股份2015年利润总额仅为17.91亿元，同比2014年下降高达78.36%。数据来源：中国经济网出于扭转颓势加强中国钢铁制造力，2016年9月22日下午，国资委同意宝钢集团与武汉钢铁（集团）实施联合重组。通过这种以强带弱的企业兼并重组，整合资源、优化结构是中国政府进一步深化国企改革，大胆创新体制机制，实现从管资产、管生产经营为主向管资本为主的转变，大力推进混合所有制改革、股权多元化改革和三项制度改革的有效措施。

  1. 制定钢铁生产标准

   中国钢铁出口贸易中因为产品规格不合格、产品质量等问题受到国外的调查的案件有很多。从这一点考虑，中国钢铁出口产品更应该注重品质，提倡工匠精神，争取从中国制造向中国智造的转变升级。这就要求有关的部门制定相关的技术标准和产品检验机制。
   为了进一步加强中国钢铁行业管理、规范中国钢铁企业运营生产技术和提高钢铁生产的质量，中国政府应该制定与钢铁生产标准和生产规章制度相关的有效措施和意见，要从制度层面要求中国钢铁企业合规生产和节能减排，并通过生产标准化调整产业结构和出口钢铁产品结构优化。在钢铁行业快速发展保障国民经济的同时，仍存在生产标准不明确、产业结构不合理、污染严重等诟病。因此这就要求中国政府不仅要严厉排查一切不符合规范的钢铁生产企业，还应加强中国钢铁行业立法，保障钢铁行业合理健康发展，从而为中国国民经济做出更大贡献。

  1. 规范完善产业指导

   中国的钢铁产业成就举世瞩目，给中国经济复苏也具有很大的贡献作用，只有解决和引导好钢铁产业才能确保中国钢铁市场在规范和制度内健康发展，以避免良莠不齐的现象。而规范和引导产业的责任是中国政府的职能，因此中国政府不仅要根据钢铁行业的自身特点还要结合全世界范围的钢铁市场和环境，立足于钢铁行业，从实际出发，加强中国钢铁行业的调研和分析，因地制宜出台和完善中国钢铁行业和市场的相关制度和保障措施。
   尤其是中国钢铁行业和市场刚刚经历了2015年世界钢铁市场不景气、中国钢铁出口贸易遭受的摩擦问题，中国政府应该建立适合中国钢铁产业的指导政策和出台相关的发展意见，为中国钢铁行业做出规划和指导。钢铁产业也是是2016年中央政府化解过剩产能的重点行业之一。国务院于2016年2月出台指导意见，在发展意见中明确指出，中国钢铁目前产能过剩相当严重，产能过剩带来的弊端不言而喻，因此中国将在未来5年内削减产能，争取在近5年内将产能削减1-1.5亿吨；另一项措施就是压缩产能要通过企业兼并和企业重组优化资源、整合能源，通过政府牵头、企业资源进行企业联合。中国政府通过政策性的指导意见和试点工程从中国钢铁行业的基础出发，考虑中国钢铁市场环境，为中国钢铁行业升级转变做出不可磨灭的功绩。

（二）钢铁协会加强引导促进出口贸易规范化

  1. 加强转变职能作用

   中国钢铁工业协会在面对如此复杂的贸易环境的今天，不仅要从中国国内实际出发还要放眼全球，借鉴和学习国外先进的管理经验，在协会基本职能的基础上向服务型转变。通过职能优化和明确分工将协会的工作分配到每个部门甚至细化到个人。钢铁协会在转变职能的过程中要从中国钢铁目前的实际情出发，积极引导下属单位制定相关的职能体系，加强职能服务作用。在体系上，争取由以前的指导和领导地位向协同指导和相互监督职能转变；在服务上，争取向服务型的协会职能转变。对内要保持协会意见及时整改、做到有问题必查、有情况必报；对外要及时通报协会工作，争取工作透明公开，接受协会成员监督。转变基本职更好的为协会成员和钢铁相关组织服务。

  1. 做好数据统计工作

   中国钢铁协会要服务于中国钢铁市场，要依托市场供需关系及时做好相关统计工作，合理制定相关指数，为中国钢铁出口贸易提供真实有效的数据来源。也为中国政府提供宏观决策的数据依据，为钢铁生产企业提供合理有效的数据，帮助企业根据市场反应制定相应的生产计划。
   中国钢铁协会要为协会成员做好数据统计工作，其中包括中国钢铁国内外价格走向、中国钢铁出口贸易竞争指数、中国钢铁出口贸易的其它相关数据等，中国钢铁协要充分发挥其为中国钢铁行业服务的职能作用，在做好相关数据统计的基础上确保信息通畅及时，为中国钢铁进出口企业提供决策的数据来源，这样不仅充分体现了钢铁协会职能，还为中国钢铁出口贸易提供了重要的数据，这对于中国钢铁出口应对不同出口环境遇到的问题做出决策具有重大作用。

  1. 积极发挥钢铁协会桥梁纽带作用

   中国钢铁企业协会是全国钢铁的行业组织，不仅要在党的领导之下开展工作，还应该坚持科学发展做到连接政府和企业与社会市场的桥梁纽带作用，及时做好协商和汇报工作，争取为促进中国钢铁出口贸易做出贡献。
   中国钢铁协会一方连接着企业，一方对应着政府。因此钢铁协会要及时反馈各方信息，为政府提供决策和为企业传达政策。确保信息通畅及时，为企业和政府架好桥梁纽带。

（三）钢铁企业积极应对保障出口贸易正常化

  1. 合理制定生产计划

   良好的开端是成功的一半，因此中国钢铁企业要制定合理的生产计划，从公司实际出发结合往年经验制定出属于公司合理运营的生产计划是企业的重中之重。中国钢铁应该继续落实 “三去一降一补”；在生产过程中要注重资源合理配置，优化和整合资源是解决产能过剩的前提之一，要在总任务和总目标的基础上建立短期生产规划，在中央相关部门和政策指导下开展生产工作，争取从每个企业做到“三去一降一补”。
   中国钢铁生产企业目前发展良莠不齐，有在世界上颇负盛名的生产商，也有规模和产能较小的企业，因此企业要在考虑自身的基础和现实环境后，再根据市场疲软程度制定适合本企业的发展规划，不能盲目扩大生产也不能没有作为，只有适合的才是做好的。另外中国钢铁生产商要在政府的宏观领导下依法生产，通过钢铁工业协会进行沟通调研，制定合理规划，生产优质好品。

  1. 提高钢铁生产技术

   中国钢铁出口贸易遭遇的问题主要有两个，一个是价格，另一个就是钢铁产品质量问题。因此中国钢铁生产技术必须要提高，这是保证钢铁产品质量的前提条件。一方面中国钢铁企业可以借鉴学习国外先进技术和生产工艺来弥补自身企业不足，提高本企业生产技术标准，生产优质好钢；另一方面中国钢铁企业要沉着应对国内外贸易环境，切忌急功近利，注重产量忽略产品质量，要做感动人心中国钢铁产品，以工匠精神铸就中国钢铁品质。
   中国钢铁在借鉴国外先进生产技术的同时还应该注重本国产业技术创新，培植和建立相关技术研究团队，对本行业的相关生产技术进行升级改造和再改进。鼓励企业员工进行生产技术竞赛，培养一批懂的技术的工人学习高精尖的技术，争取以优带后的模式，提高生产技术的使用率。其次研发团队要注重实际情况，从世界标准结合中国实际的基础上提高技术。

  1. 降本增效提高产品核心竞争力

   从中国钢铁行业和国外先进企业的差异来看，中国钢铁产业在产品结构、生产技术上与国外先进企业竞争力不足，因此在国际市场上处于不利地位。
   为了弥补上述不足，中国钢铁生产企业一方面要加强生产技术、优化产品结构，改进改良生产装备；另一方面培植中国钢铁核心竞争力，树立中国钢铁品质形象。试点生产优质钢铁产品，使其工艺水平领先世界，然后再通过试点推动大型钢铁企业生产技术的革新，最后以点带面彻底改变中国钢铁行业竞争力。通过培养核心竞争力加强中国钢铁在国际共同市场竞争力，研发科技含量高的钢材品种占据国际钢铁高端市场，也为产业升级改造、去产能、去库存、去杠杆、降成本和补短板奠基基础。通过降成本增效能提高产品竞争力，在赚取钢铁产品带来高额利润的同时也能推动中国钢铁产业转型升级。

结 论

   中国钢铁出口贸易对带动国民经济、提高就业和解决产能过剩都有着重要作用。中国钢铁出口贸易基于国内产业来看其主要问题就是产品结构单一、生产技术有待改进和产能过剩。基于国外来分析主要面临的问题就是易受到反倾销反补贴和贸易壁垒、国外铁矿石依赖程度高等问题。基于上述问题因此中国政府、钢铁行业、钢铁生产企业要合理应对、紧密配合。
   中国钢铁产业问题是随着钢铁发展日经月累显现出的共有问题，因此要认真对待、合理解决，通过借鉴成功案例，再结合中国实际国情形成一套适合中国钢铁行业绿色发展道路，而这并非一朝一夕之功，需要社会各界共同努力，从现在开始从点滴做起，为中国钢铁美好未来搭建降本增效之路；为中国钢铁企业描绘宏图蓝景；更为中国钢铁出口保驾护航。
   综上所述，解决中国钢铁产业问题必须有力一起使，有问题一起解决。以中国政府、钢铁行业、生产企业三者为主力制定中国钢铁规章制度及规范条例、保障信息公开做好统计服务、切实执行“三去一降一补”方针和优化产品结构、提高生产标准。我相信通过三方共同努力，中国钢铁出口贸易一定会向制度化、规范化和正常化迈进。

致 谢

   在这篇论文结尾处我要感谢大学四年给予我帮助的辅导员、专业老师、同学及我的朋友们。大学四年我学习了很多专业课的知识，也明白了很多做人的道理，这都是我大学期间最珍贵的财富。
   通过本次论文，谨向老师们表示衷心的感谢和崇高的敬意致谢在本次的论文写作过程中各位老师们提出的宝贵意见，尤其是我的论文指导老师，这半学期来对我的帮助和支持，也正是各位老师在学术上的悉心教导，才使我顺利完成论文的撰写。
   另外，也要感谢经济与管理学院的各位老师在四年的学习和生活中给予的关注，让我在四年的学习当中不仅学习到了专业知识，也明白了很多道理，给我的就业和未来的生活都带来了很大的帮助。还要感谢我的辅导员在生活和学习中都给了我很多帮助。
   最后，也要谢谢与我一起奋斗了四年的同学们，是他们的支持和关心带给我很多的温馨回忆。谢谢我的家人和朋友，在我大学四年期间对我始终如一的信任和爱护。
   在此，我要再次向他们表示我的谢意和衷心祝福。

参考文献

  1. China’s Steel Industry and Its Impact on the United States: Issues for Congress，Rachel Tang[J]， September 21, 2010
  2. Quantifying the co-benefits of decarbonisation in China’s steel sector: An integrated assessment approach[J]，D Ma，W Chen，X Yin，L Wang，2015
  3. Retrospective and Prospective Analysis on the Trends of China’s Steel Production[J]，Yanni XUAN，Qiang YUE，August，2016
  4. 于雅琦，低碳经济对中国钢铁出口的影响及对策分析[D]，吉林大学，2014(5)
  5. 黄维，低碳视角下的中国钢铁行业碳排放分析[D]，福州大学，统计学，2014(6)
  6. 韩晓磊、张超， 基于低碳经济的中国钢铁工业进出口结构分析[J]，冶金经济与管理，2011(2):12-14
  7. 马胜利，浅析人民币升值对中国钢铁产品进出口贸易的影响[D]，沈阳师范大学,政治经济学，2012(3)
  8. 吴丽艳，我国钢铁贸易存在的问题及对策分析[J]，本钢设计研究院有限责任公司，2012(4):13-14
  9. 霍咚梅、肖邦国，我国钢铁外贸与贸易摩擦浅析[J]，国际贸易，2016(5):21-24
  10. 宋彦，中国钢铁产品出口中的贸易摩擦[J]，产业观察，2016(4):223
  11. 尹皓，中国钢铁进出口贸易研究——现状、问题及对策[D]，对外经济贸易大学，2015(5)
  12. 甄燕，中国钢铁进出口贸易研究——现状、问题及对策[D]，河北大学，2013(5)
  13. 汪五一、滕蔚然，贸易摩擦对中国钢铁产品进口影响的案例研究[J]，安徽工业大学，2015(4):4-9
  14. 王茁宇，中国钢铁产品出口结构优化研究[D]，内蒙古大学，区域经济学，2015（6）
  15. 殷君君，中美钢铁产品贸易摩擦问题研究[D]，首都经济贸易大学， 国际商务，2015(3)
  16. 陈卫东, 美国对中国钢铁产品337调查须过“三关”[J]，中国发展观察，2016:30-31
  17. 王素，中国钢铁出口去哪儿？，进出口经理人[J]，2016(7):52-53
  18. 李紫宸、董瑞强，中国钢铁首遇“3 37”调查[J]，宁波经济，2016(7):38-39
  19. 宋彦，反倾销案件在中国钢铁产品出口中的体现及解决对策[J]，投资理财，2016(8):137
  20. 墨心，2016年国内钢铁市场盘点及2017年展望[J]，天津冶金，2017(1):01-12
  21. 范立夫、张捷，中国经济增长与净出口关系的实证分析[J]，财经问题研究，2010(6)
  22. 沈效志，当前金融危机形势下我国钢铁出口企业面临的困境及应对策略探索[D],西南财经大学，2009(5)
]]> 今天偶然整理电脑文件时，翻出了当时写的毕业论文，随即就想起了挑灯熬夜写论文的日子，也算是为了纪念一下，就记录在博客里…… 给你的博客网站添加一个站点监测服务 https://blog.chn.us.kg/blog/zz-10/ 2024-12-23T06:40:03.000Z 2024-12-23T07:39:35.000Z 一、效果预览

我的站点监测页面，直接看预览效果。

琅環书生·站点监测

二、原理介绍

   网站监测的原理很简单，就是通过定时访问网站，获取网站的响应时间，如果响应时间超过预设的阈值，就认为网站出现了问题。网站监测服务实际上就类似于Prometheus一样，采集数据，然后给你展示，简言之，就是需要数据+展示。
   所以本次教程采用的是Uptimerobot作为监测服务商，它是一家提供网站监测服务的公司，免费的够用了。而将数据展示到自己的网站，则使用了IMSYY大神的开源项目site-status。

二、站点监测服务(数据部分)

  1. 注册账号 点我直达注册Uptimerobot
  2. 添加需要监测的网站

监测的类型如上图所示，可以自己根据实际情况选择：https/Keywords/ping/port可选，邮箱提醒可自己决定是否开启，开启后监测到有问题的站点会给你发邮件。
3. 配置完成预览

  1. 生成UptimeRobot的APIKey

戳我直达获取APIKey，注意不要获取Main API key，而是Read-only API key，复制保存，后面会用到。

只要你的网站正常没问题的，显示的都是绿色，至此你的网站数据监测部分已经完成了，加下来就是展示部分了。

三、网页展示部分

  1. fork项目 site-status到你的仓库；
  2. 在你fork后的项目里新增.env文件（原项目里有个.env.example文件，可参考修改成属于自己的.env）,或者复制下面的代码，根据自己实际修改。最重要是的两个参数：
    API_KEY: 你刚刚生成的Key
    DEPLOYMENT_PLATFORM: auto
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
# API URL - required
## Due to potential CORS issues with the official website, you can use a reverse proxy to resolve this (please set it up yourself).
## For more details, please refer to the project README.md.
API_URL="https://api.uptimerobot.com/v2/"

# UptimeRobot Api Keys - required
## This project only requires Read-only API key
## https://dashboard.uptimerobot.com/integrations
API_KEY=""

# Deployment platform - required
## cloudflare ( default ) | auto
## If you use a platform other than cloudflare, please change to auto
DEPLOYMENT_PLATFORM="cloudflare"

# Site Title
SITE_TITLE="IMSYY 站点监测"

# Site Description 
SITE_DESCRIPTION="一个简约的站点监测 | a simple site-status pages, power by uptimerobot"

# Site Keywords
SITE_KEYWORDS="站点监测,监测,监控"

# Site Logo
SITE_LOGO="/favicon.ico"

# ICP Filing
## In China, you need to provide an ICP (Internet Content Provider) filing number.
## https://beian.miit.gov.cn/
SITE_ICP=""

# Count Days
## The number of days to count
## You are advised to fill in 30 - 90
COUNT_DAYS=60

# Show Links
## Whether to show sites links
SHOW_LINKS=true

# Password
## If you want to protect the data, you can set a password
SITE_PASSWORD=""
## Key used for jwt verification, required
SITE_SECRE_KEY="site-status"

四、Vercel部署

  1. 有Vercel的直接登录，没有的注册Vercel账号 点我直达注册Vercel；
  2. 导入项目 点我直达导入项目，选择你fork后的项目，点击Deploy按钮，等待部署完成；
    上面两个环境变量，如果没在.env文件里设置，也可以在Vercel项目设置里设置；
  3. 配置域名，vercel需要绑定自己的域名才能正常访问；
  4. 配置完成后，访问你的域名就能打开部署的站点监测页面了。
  5. 当然你也可以通过iframe标签的方式嵌入到自己的博客里，这样你的站点就能显示在自己的博客里了。
1
<iframe src="你站点监测页面的链接" style="width: 100%; height: 100%; border: none;"></iframe>

如果部署有任何问题，欢迎留言讨论~

]]> 当网站服务和接口越来越多时，很难第一时间知道网站是否存在问题，这时网站监测就显得格外重要，它简直就是及时雨，雪中炭，一举解你所急。 博客一周年记事 https://blog.chn.us.kg/blog/zz-9/ 2024-12-19T07:39:35.000Z 2024-12-19T07:39:35.000Z 一、序言

   实际上博客建站已经不止一年了，但遗憾的是之前都没有做记录，恰巧去年换了新主题，不妨以此为始，记录下博客的历年变化。也希望能以此激励自己多创作记录，毕竟博客的作用就是记录自己的生活和思考，分享自己的感悟。记得有句话，人不能因为走的远，就忘记了当初为什么选择出发，借用过来也是同理，总不能一味地追求样式和功能，而忽略了博客记录的价值。

二、关于主题

   市面上开源的博客框架有很多，最开始了解的是WordPress，不过由于自己服务器过期了，管理起来总觉得繁琐，便没在使用了；其实像做的好的在线博客也有很多，但是当你一旦接触了私有化博客后，便很难去使用在线的了，万一信息泄露、服务器删库跑路等，就很麻烦了，尽管这概率极低，但还是有可能发生的。于是后来了解到Hexo、Halo等静态博客框架，便选择了一款，开始了Hexo的搭建之路，还没时间去体验Halo框架，据说要比Hexo框架还要好，等博客稳定了去体验一下再说。
   博客基于Hexo架构后，但后来发现默认的主题太丑，不够简洁和好看，于是在寻找美化教程的同时也对比了其他风格的主题、先后尝试了Next、Fluid、Landscape、butterfly等主题，最后选择了butterfly主题，后来又偶然发现基于butterfly美化的anzhiyu主题，于是主题就此选定了。

三、博客优化

   其实主题自带的功能和美化效果已经够用了，但自己还是喜欢折腾，还记得起初为了实现页脚上方socialbar上的图标放大效果，花了不少功夫，为了实现这个竟然才是问了群里的大佬才实现的，诸如此类的小白问题还有很多，可见搭建之路还是很曲折的。后来慢慢的折腾过后，很多东西好像都能迎刃而解了，于是经过一年多的缝缝补补，我的博客终于变得好看了起来，主要有以下几点变化：

1.主页背景

   主页全图默认只支持图片格式，为了支持动态背景，于是改了pug，现在也能支持动态背景了，另外还担心使用别人的API调用随机图会不稳定，于是使用js调用自己图库里认为比较好看的背景图，还增加了随机切换背景，这样一来主页视觉效果简直是大幅提升，尤其是随机到动态背景时，效果炸裂。尽管如此但还是有一个遗憾未解决，那就是鼠标下滑主页背景和body背景的渐变效果还没做好，尤其主页是动态背景时，鼠标下滑极为生硬不够平滑，尝试了很多次都没达到令自己满意的效果，这个就留在以后有能力了再解决吧；另外一个变化就是主页显示了头像和网站名称和社交图标，也有相应的一些动画效果。当然默认也有但它只显示随机句子。

2.Banner图

   首页的Banner图，也就是网站主页右边的那张图，主题里默认是一张静态图，我最开始调用的就是必应的每日图片，实现了每天都会自动切换的效果，但后来api接口老是隔三差五出问题，于是找到了一个其他博客的banner图，实现banner随着节日节气变换，但好景不长，原作者的图片很宽，在这显示不全，导致图比较难看，后来原作者作了适配，通过API可以调用自己的图库，这个就很完美解决了我的问题，但后来又发现他的节日到还是蛮准的，但节气总是差了一两天，猜测可能是节气接口用的不是最新的，于是我就自己动手优化了，现在的banner不仅支持节日节气的背景图，还在文字上作了提醒，支持当前和下个节日节气的展示，当今天有节日或者节气也会在右下角弹出类似隐私协议和那个小弹窗进行节日提醒。

3.文章封面

   文章封面是最大的一次改动，之前的封面都是采用图片格式，如果图片不压缩分辨率越高，显示的封面也就越好看，但高分辨率的图片，也会导致像我这种没有CDN玩家的网站加载速度简直比蜗牛还慢，由于自己的封面采用的是渐变背景图，于是就突发奇想能不能搞一个纯CSS实现的文章封面，这样既不用担心网页加载慢的问题还能解决显示模糊的问题，如果采用了CSS还能实现一些动效，比如文本放大，使标题动起来，网站亮暗切换还能显示不同效果……有了这个想法后，说干就干经过一番折腾最终也是实现了，现在看到的封面效果还是很满意的，另外对主页和文章页的的图标也做了更换，之前默认是黑白的，现在全部换成了彩色图标，现在的视觉效果，个人觉得还蛮不错。

4.侧边栏

   侧边栏是我最喜欢的地方，之前加的是随机诗词更换背景的功能，后来发现自从侧边栏背景统一风格后，突然出现一个图片会很突兀，于是果断砍掉了这个随机诗词功能，新增了日历显示，有节日倒计时，还有周、月、年进度条倒计时展示，放在侧边栏还是很有排面的。

5.新增评论页面

   加这个页面的初衷是，虽然自己使用飞书+邮箱作了评论提醒，但始终没有一个可以一览众山那般预览所有评论的界面，只能通过登录评论后台去看，这样既费事又费力，于是参考别人的博客教程，搞了个评论汇总页面，将本站的最近100条评论放在了这个页面上显示，还针对博主自己的评论作了醒目处理，后面添加了一些好看的图标，实际没啥用，主要是为了提升逼格。

6.新增博客统计服务

   博客统计服务之前用的是主题默认的51LA统计，在使用过程中，总发现时不时就采集不到数据，导致about页的统计数据那一直空白。从其他人口里得知了Umami统计服务，于是就搭建部署了这个服务，目前使用下来效果还算不错，至少没有挂过，唯一担心的就是Cloudflar一旦没法用了，那这个服务也就祭了。网站统计服务其实对于像我这种小站的人来说用处不大，其实并不关注访问量，主要是有种别人有的我也得有的心态作祟，另外about页的51LA故障后显示空白，总觉得别扭，这才有了这个博客统计服务的诞生，基于umami我改了好多，小到网站图标、显示站点的favicon等，也算是折腾了很久。

7.优化Twikoo评论样式

   之前一直诟病于手机端Twikoo评论区回复的样式，很别扭，尤其是回复别人的评论，输入框被压缩的可怜，起初自己没能力也就忍忍算了，后来动手能力强了，也就顺手给改了，现在确实看着舒服多了，而且评论区的样式也更加美观了，不会出现文本超出换行显示很丑的情况了。另外在自己的评论图像上添加了博主认证icon，虽然没什么用，但还是能让人感觉到自己有点权威。

8.新增安全跳转

   之前逛知乎、稀土掘金发现他们的第三方跳转挺好看，于是想用到自己的网站上，但无奈找了一圈后都没有类似的教程，后来了解到一个插件hexo-safego，于是就试了试，使用后很多东西都不能支持自定义就放弃了，其实跳转就类似于中转站，于是就另辟蹊径使用html构建网页和js监听，实现了现在的安全中心跳转页，背景和博客背景保持一致，也支持亮暗切换。但自己一直想要当主题是dark模式时，安全中心也能于博客背景保持同步，但作了很多次尝试都没有实现，后来也就放弃了，毕竟这个功能也没什么必要。（主要可能是能力不够~）

9.新增导航页、知识库

主页导航
知识库

   另外作了两个新的网页，一个是主页导航、另一个是知识库。主页导航将自己所有的网页进行了归纳整理，更像是一个对外的整合展示，知识库则是基于Vitepress搭建的，初衷是记录和整理下自己遇到的问题、解决方案和好玩的事物，但目前搭建起来后，还没时间去弄它，等有时间了，当我的博客趋于稳定了，便再开始记录整理吧。

10.亮暗切换

   众所周知博客的亮暗切换要么是右下角的小按钮、要么是鼠标右键，这对于不了解这个主题的人来说，想切换成暗色或者亮色，确实不容易找到，于是参考别人的教程，在主页的top页上加了一个模式切换的动态按钮，这样不仅方便也好看了不少。

四、一些计划

   博客一年了，尽管有很多变化，但终究是万变不离其宗，博客的主题和样式算是稳定下来了，接下来的计划，大的其实也没有想好，但小的还是有一些的，比如：

  • 提升网站访问速度，在性能上下功夫，砍掉耗时长且没有必要的服务，提升速度；
  • 增加文章输出，多写文章，多记录生活，尽量少搞些花里胡哨的样式功能；
  • 多逛友链，借鉴和学习别人的经验和方法，毕竟活到老，学到老；
  • 解决文章中那些遗留的问题，尽量都能得到万门的处理。

   这些计划，其实都不是一蹴而就的，需要一步步积累，一步步推进，一步步实现。另外谢谢你能看到这，希望你能喜欢我的博客，也希望你能给我一些建议，让我能更好的完善博客。

]]> 尽管博客建站已经很多年了，但遗憾的是之前都没有做记录，恰巧去年换了新主题，不妨以此为始，记录下博客的历年变化。 为你的Hexo博客添加Umami网站统计服务 https://blog.chn.us.kg/blog/zz-8/ 2024-10-17T07:21:36.000Z 2024-10-17T07:21:36.000Z 一、写在前面

   先来说一下为什么要使用Umami网站统计服务，毕竟主题内置的51La已经很强大了，但是每次F12调试控制台老是报51LA的错误，这对于实际使用并不影响，但强迫症的我已经忍了很久，于是闲着逛友链时，钓到了一篇好文章，那就是煮雪话河山写的Hexo零成本方案：搭建Umami统计工具，但是在他的教程下有个问题，那就是使用Vercel构建时一直卡主不动，尝试了很多次以为是自己那个步骤没写对，折腾了很久后，就在放弃之际，又重新结合其他文档部署了一遍，终于成功了，这期间踩了很多坑，为了造福更多的小伙伴，于是我就开始了这篇部署过程。
   本教程仅在Hexo框架进行部署，其他框架请自行甄别是否适用！

二、效果演示

琅環书生统计站
Umami

三、 Umami介绍

   Umami 是一个开源的网站分析工具，它提供了一种简单而私密的方式来进行网站访问统计。Umami 的设计目标是成为一个轻量级、易于使用的替代方案，适合比较喜欢折腾的童鞋。
   官网也有Demo👉Umami，但好像是14天免费使用，具体没试过，不太清楚。

四、所需工具/服务

  • supabase创建的数据库
  • Umami源码
  • Vercel账号

五、部署教程

1.注册数据库

   首先登录Supabase创建一个数据库，注册/登录账号，具体创建流程忽略，但是设置的密码一定要复制保存下来，后面会用到。Tips：建个txt文档，记下密码，别忘了，后面还需要记住两个URL呢。

   创建后的数据库项目如下图所示

   点击进入创建好的数据库，点击设置，复制两个URL并保存。

⚠️注意：这里需要复制两个URL

  • Mode:Transaction，这个的端口是6543;
  • Mode：Session，这个的端口是5432，保存这两个URL，后面会用到。

2.保存Umami源码至仓库

   这是Umaimi的源码地址👉 https://github.com/umami-software/umami 你可以使用github直接fork到自己的仓库，也可以上传到你自己其他的git仓库，博主使用的是gitlab，所以这里以gitlab为例。
   不管是哪种方式，在你保存的项目里编辑 db/postgresql/schema.prisma这个文件，新增directUrl

1
2
3
4
5
6
7
datasource db {
  provider     = "postgresql"
  url          = env("DATABASE_URL")
+  directUrl    = env("DIRECT_DATABASE_URL")

  relationMode = "prisma"
}

   然后提交你的代码即可，请确认格式是否和上述一致。

3.部署到Vercel

   首先登录Vercel注册账号，创建项目，选择导入Git仓库，选择刚才保存的Umami源码仓库

   选择Node.js模板，添加两个环境变量，分别是DATABASE_URL和DIRECT_DATABASE_URL，分别填入刚才复制的两个URL，将[YOUR-PASSWORD]包括括号替换成你创建数据库时保存的密码。注意前者是6543端口，后者是5432端口的URL。并且在6543端口的URL的最后加上?pgbouncer=true

   点击Deploy，等待部署完成。

4.Vercel添加域名

   Vercel默认域名在大陆是没法直接访问的，需要自行添加域名才能访问，点击你部署的项目Settings，选择Domains，添加你自己的域名，点击Save。成功添加域名后，打开的主页如下图所示：

5.配置Umami

  配置好域名后，打开Umami的设置页面，默认账号是admin，密码是umami，点击登录，进入Umami的设置页面。

  1. Website：可以添加需要统计的网站
  2. Teams：可以加入或者添加团队
  3. User：可以修改、添加账号和密码。建议默认的账号和密码修改一下，毕竟默认的密码很容易被猜到。
    点击+ Add website，添加需要统计的网站，输入网站的名称，输入网站的URL，点击Save，保存设置。

添加之后点击编辑，点击Teacking code，复制这串js代码，并将这段代码添加到网站的head部分，这里演示的是 anzhiyu 主题，请根据自己的主题进行修改。

修改/themes/anzhiyu/_config.yml文件，在head部分添加如下代码:

1
2
3
4
inject:
  bottom:
    # Umami访问统计
    - <script defer src="XXXXXXX" data-website-id="XXX"></script>

六、写在后面

   可能遇到的问题：

  1. 部署时卡主，如果超过5分钟了，那一定是哪里没配置正确，尤其是检查前面两个URL是否正确。【一般部署2-3min可完成】
1
2
3
4
$ node scripts/check-db.js
✓ DATABASE_URL is defined.
✓ Database connection successful.
✓ Database version check successful.
  1. 访问统计数据不显示，请检查域名是否添加成功，以及网站是否添加成功。【检查域名是否添加成功，以及网站是否添加成功】
  2. 访问统计数据显示不全，可能是网站的访问量太少，Umami默认只显示最近30天的数据，如果需要显示更多的数据，可以修改Umami的设置。【Umami默认只显示最近30天的数据，如果需要显示更多的数据，可以修改Umami的设置】
  3. 其他问题，请留言告诉我，我会尽力帮你解决。
]]> 本教程介绍了如何在Hexo框架下使用Vercel和Supabase部署开源网站统计工具Umami，包括数据库注册、源码修改、环境变量设置及域名配置等步骤，适合喜欢轻量级分析工具的用户。 2023,时间轴即将穿透的尽头,我该如何记录这一年? https://blog.chn.us.kg/blog/zz-7/ 2023-12-31T04:01:56.000Z 2023-12-31T04:01:56.000Z
]]> 2023年，时间的轴的尽头，这一年得到了什么？失去了什么？面对新一年的到来，又有什么期待？2024年，你准备好了吗？ 如何让百度快速收录你的博客 https://blog.chn.us.kg/blog/zz-6/ 2023-11-20T00:48:57.000Z 2023-11-20T00:48:57.000Z

⚠️ 友情提醒：此方法可能已经不适用了，请谨慎参考，谢谢🙏

一、这是引言

百度搜索引擎是目前国内最大的搜索引擎，也是国内最大的门户网站，让你的博客能够被百度搜索引擎收录，是一件非常重要的事情，但对于那些站点名不是很特殊，百度极易搜索出一大堆同类相关的内容，但唯独缺少你的博客名，本教程就完美解决了这一难题。
首先，你需要一个百度搜索资源平台，比如百度站长平台、百度搜索资源平台、百度搜索资源平台，这些平台都可以帮你快速收录你的博客。
其次，你需要一个hexo框架的博客，因为本教程是基于hexo框架的博客。
最后，你需要一个域名，因为百度搜索引擎是基于域名来收录你的博客的。
接下来，我们就开始吧！

二、注册/登录百度搜索资源平台

  1. 注册百度搜索资源平台

三、快速收录

  1. 使用说明
    快速收录工具可以向百度搜索主动推送资源，缩短爬虫发现网站链接的时间，对于高实效性内容推荐使用快速收录工具，实时向搜索推送资源。
  2. 注意事项
    百度搜索资源平台为站长提供链接提交通道，您可以提交想被百度收录的链接，百度搜索引擎会按照标准处理，但不保证一定能够收录您提交的链接。
  3. 具体流程
    • 点击上方导航栏的用户中心-站点管理，根据实际信息，录入你的博客网站信息；
    • 第一步：输入网站名称，点击下一步；
    • 第二步：选择站点属性，点击下一步
    • 第三步：验证网站（这里选择HTML验证），因为anzhiyu主题支持添加站点验证到渲染的html里

四、修改主题配置文件

  1. 注意，是配是主题配置文件，修改_config.yml配置文件中，找到site_verification:字段

    1
    2
    3
    site_verification:
     - name: baidu-site-verification
       content: code-xxx  #修改为你的connect值

  2. hexo 一键三连

    1
    2
    3
    hexo clean
    hexo generate
    hexo server (hexo deploy)

  3. 点击/piblic/index.html，查看HTML代码的<head>标签与</head>标签之间是否为<meta name="baidu-site-verification" content="你的connect值" />（正常页面就是一串字符串）

五、百度搜索验证

  1. 打开百度搜索
    搜索的博客网站名，如果你的博客能被百度搜索引擎收录，那么你就成功了。
  2. 手动添加子页面
    你也可以百度站点管理里，添加你想添加的博客子页面。
]]> 本文介绍了如何让百度搜索引擎快速收录你的Hexo博客，尤其是对于那些站点名不是很特殊，百度极易搜索出一大堆同类相关的内容，但唯独缺少你的博客名，本教程就完美解决了这一难题。 带你体验下Hexo一键三连的快乐 https://blog.chn.us.kg/blog/zz-5/ 2023-11-07T07:27:37.000Z 2023-11-07T07:27:37.000Z 一、写在前面

博客在调试过程中，发现无论是Vs Code还是PyCharm上，因为调用的Windows shell终端都是power shell，无法像在Linux上使用&&连接符，这也就意味着Hexo的一键三连至少是无法在一行里丝滑完成3条指令，必须得手动敲三次才行，本着能用脚本绝不用手的原则，博主决定使用批处理来实现一键三连的快乐。

二、环境依赖

  • Windows上自带安装的power shell
  • 文本编辑器（Win自带的记事本）

三、编写脚本

  1. 编写批处理脚本
    直接复制下方代码到记事本，保存为xxx.bat即可，有兴趣的同学可以看下方解释，进行二次开发 
    1
    2
    3
    4
    5
    @echo off
    cd /d E:\Blog\zz-blog
    C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe ahexo clean
    C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe hexo generate
    C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe hexo server
  2. 批处理说明：
    • @echo off 这个的意思是关闭回显，也就是不显示正在执行的批处理命令和结果，当然你也可以设置为@echo on打开回显功能；
    • cd /d 指的是脚本执行的路径，一定要加/d，否则脚本路径会只想终端的路径，无法找到你项目路径；
    • C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe ahexo clean 终端的路径，启动终端并执行hexo指令。

四、使用方式

  1. Windows直接执行

    • 直接鼠标双击xxx.bat文件，执行效果如下图；
    • 在已有终端执行./xxx.bat（注意写全bat文件的路径）

    Tips：使用Ctrl+C键停止运行，你也可以使用Ctrl+D关闭终端，使用Enter键重新启动执行Hexo一键三连脚本；

  2. PyCharm执行

    • 在PyCharm终端执行./xxx.bat（注意写全bat文件的路径）
    • 在Pycharm调试使用，在你的博客项目里，进行配置，如下图；
    • 执行效果同手动执行，不再展示。
]]> 本文介绍了使用Pycharm调试Hexo博客时用到的三个基本命令，主要是通过windows的批处理进行一键执行，减少敲命令的烦恼，解放你的双手，提高生产力。 给你的Hexo博客添加一个朋友圈吧 https://blog.chn.us.kg/blog/zz-4/ 2023-11-01T01:27:37.000Z 2023-11-01T01:27:37.000Z 一、写在前面

博客自上线以来，一直沿用自带的朋友圈，博主因为懒，觉得没有必要，就一直没有自建朋友圈，但最近发现一个问题，别人的API一旦进行了更改或者维护，我的朋友圈就显示no data或者一片空白，本着让卡脖子的技术掌握在自己手里的原则，博主决定自建属于个人的朋友圈，本教程不需要数据库、无需服务器，只需要有GitHub账号、vercel账号以及自己的域名即可成功部署。

二、效果预览

  1. 我的朋友圈效果展示

    琅環书生

  2. 环境准备

    • GitHub
    • Vercel
    • 自己的域名

三、GitHub上的操作

  1. fork 项目到自己的仓库

    注意： 一定要fork，不要采用clone、导入的方式；如果前端部署采用带管理面板，则fork时不要修改仓库名称，否则会导致管理面板部分功能不可用。

    fork友链朋友圈的项目仓库，地址：https://github.com/Rock-Candy-Tea/hexo-circle-of-friends
    不懂fork的，跟着步骤走，在上面项目仓库代码里找到hexo_circle_of_friends目录,点击进入，

    找到fc_settings.yaml文件

    点击右上角编辑按钮

    编辑/hexo_circle_of_friends/fc_settings.yaml文件，需要修改的配置如下：
    修改link: “你自己博客朋友圈的url”,
    修改theme: “【anzhiyu主题一定要修改为common2,否则爬不到数据】“ ,其他主题根据要求添加，在此yaml文件里也有写到。 

    1
    2
    LINK:
        - {link: "https://www.yyyzyyyz.cn/link/", theme: "common2"}  # link改为你的友链页地址，theme选择你的博客主题

    点击右上角提交按钮，注意分支为main,vercel导入时也一定要和giuhub里的分支一致。

    此时，fork的项目已经到自己GitHub里，进入自己的GitHub仓库。

  2. 添加GitHub环境变量
    点击自己仓库刚刚fork的项目Settings-->Secrets-->New repository secret

    博主已经加好了，上图标记的4是已经加好的
    添加4个环境变量secret：

    • GH_NAME：github名称，也就是你GitHub的用户名
    • GH_EMAIL：github邮箱，填写你注册GitHub的邮箱
    • GH_TOKEN：github访问token，获取方式：
      1.点你仓库右上角头像-settings-左侧栏找Developer settings进入-点击Persional access token-点击Tokens(classic)-点击Generate new token；
      2.选择Generate new token(classic)；
      3.填写你的token自定义名称Note、有效期Expiration、Select scopes选择repo和workflow,点击最后的Generate token，复制生成的token字符串填写至GH_TOKEN（vercel也需要，建议复制到便签保存备用，生成页面关闭后，不容易找到token字符串）
    • STORAGE_TYPE：存储方式，填写sqlite

  3. 修改Workflow permissions

    点击你仓库项目的setting-->Actions-->General-->勾选Read and write permissions-->Save

四、 Vercel上的操作

前往Vercel (https://vercel.com/)官网，注册/登录你的账号。

  1. 导入项目
    点击New Project新建项目
    找到Import Git Repository，选择GitHub里你刚刚fork的仓库，点击Import。
    然后点击Deploy，回到首页，等待一会，就会部署完成。
    添加vercel环境变量，进入刚才创建的项目主页，点击Settings-->Environment Variables
  2. 添加Vercel环境变量
    与GitHub的保持一致，添加GH_NAME、GH_EMAIL、GH_TOKEN，此外，还需要添加VERCEL_ACCESS_TOKEN，获取方式如下：
    点击vercel页面右上角你的头像选择Settings-->Tokens--->Create
    随便输入一个名称后，点击CREATE TOKEN，复制生成的token，添加到vercel环境变量中即可

五、返回GitHub操作

回到github，启用fork后仓库的github action

  1. 点击Actions-->I understand my workflows, go ahead and enable them
  2. 之后点击update-friends-posts并启用workflow
  3. 然后点击Run workflow--->Run workflow进行第一次运行,注意选择的分支是否正确，分支选错，无法爬到数据的。
  4. 等待运行完毕后，项目仓库会上传data.db，爬取的数据都会存放在这里，注意看你的仓库里是否已经生成，并且vercel也会同步更新。
    在build里进行查看，如果post里有数据，代表着GitHub部署成功。

恭喜，GitHub部分部署完成。

六、返回Vercel操作

注：本来只需要默认的vercel地址，但由于vercel被墙，需要绑定自定义域名后，才可以正常使用。

  1. 点击Domains添加自己的域名
  2. 添加域名，如xxx.你的域名，并在你的域名注册商将你加的域名进行解析： 
    1
    解析格式：xxx(你自己取的二级域名，同上)，CNAME, cname.vercel-dns.com.
  3. 成功配置后，在项目中找到自己域名的url地址，在这个地址后面拼接 /all 尝试访问，出现数据就说明配置成功，这个地址就是前端所需的 api 地址。

恭喜，Vercel部分搭建完成。

七、主题配置

以anzhiyu主题为例，其他主题根据其对应配置即可。

  1. 添加vue_js文件至自己博客

    /themes/anzhiyu/source/js/目录【也可以不下载直接调用，但这样朋友圈右下角的信息自己就改不了。】

    • anzhiyu主题vue_s文件: https://npm.elemecdn.com/anzhiyu-theme-static@1.1.2/friends/index.f9a2b8d2.js
    • 在自己博客/themes/anzhiyu/source/js/目录新建一个js文件，名字随意，如friend_vue_js.js
    • 将anzhiyu在线js内容复制到自己刚刚建的js文件里，并替换如下字段：
      将friends.anheyu.com替换为你的后端 url 【vercel自己的域名，也就是上面xxxx.你的域名】
      【可选】Powered by、Design by、FrontEnd by信息，根据自己喜好进行字段后面的替换，此内容是朋友圈右下角的信息展示。

  2. 修改主题配置文件

    • 修改字段如下：
    1
    2
    3
    4
    5
    6
     # 朋友圈配置
    friends_vue:
      enable: true     # true为开启朋友圈，false为关闭
      vue_js: /js/friend_vue_js.js   # 你刚刚创建的js文件路径
      apiurl: https://xxx.你的域名/ # 朋友圈后端url地址，也就是上面的xxx.你的域名
      top_background: https://xxx.jpg    # 朋友圈顶部图片

  3. 一键三连

    • hexo clean
    • hexo generate
    • hexo deploy

八、注意事项

  1. 为什么部署好、分配好域名后，之后执行vercel的地址+/all，显示500: Internal_server_error?
    可能的原因是在action，run的分支确定和vercel里项目的分支一致，检查你仓库下是否有data.db文件
  2. 为什么部署完成，之后执行vercel的地址+/all，显示start_error?
    这主要是因为爬虫没有取到数据导致的
  3. GitHub和Vercel的项目分支一定要一致
  4. 其他报错请根据build的日志信息，具体分析。

如果部署过程中有任何疑问，可以留言评论，我看到后会第一时间和你取得联系。如果此教程对你有用，请留下你的赞美~

]]> 本文介绍了Hexo博客添加朋友圈的部署流程，基于anzhiyu主题，朋友圈项目采用hexo_circle_of_friends，以GitHub+sqlnet+vercel的部署方式。 anzhiyu主题标签样式 https://blog.chn.us.kg/blog/zz-3/ 2023-10-30T02:37:36.000Z 2023-10-30T02:37:36.000Z

AnZhiYu主题中大部分标签移植于[店长]的[hexo-butterfly-tag-plugins-plus]，转载请注明来自[安知鱼]

段落文本 p

1
{% p 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
  • 彩色文字
    在一段话中方便插入各种颜色的标签，包括：

    红色

    、

    黄色

    、

    绿色

    、

    青色

    、

    蓝色

    、

    灰色

    。
  • 超大号文字
    文档「开始」页面中的标题部分就是超大号文字。

    A Wonderful Theme for Hexo

1
2
3
4
5
6
- 彩色文字
  在一段话中方便插入各种颜色的标签，包括：{% p red, 红色 %}、{% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %}、{% p blue, 蓝色 %}、{% p gray, 灰色 %}。
- 超大号文字
  文档「开始」页面中的标题部分就是超大号文字。
  {% p center logo large, Volantis %}
  {% p center small, A Wonderful Theme for Hexo %}

行内文本 span

1
{% span 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
  • 彩色文字
    在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
  • 超大号文字
    文档「开始」页面中的标题部分就是超大号文字。

    A Wonderful Theme for Hexo
1
2
3
4
5
6
- 彩色文字
  在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
- 超大号文字
  文档「开始」页面中的标题部分就是超大号文字。
  {% span center logo large, Volantis %}
  {% span center small, A Wonderful Theme for Hexo %}

行内文本样式 text

1
2
3
4
5
6
{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}
  1. 带 下划线 的文本
  2. 带 着重号 的文本
  3. 带 波浪线 的文本
  4. 带 删除线 的文本
  5. 键盘样式的文本 command + D
  6. 密码样式的文本：这里没有验证码
1
2
3
4
5
6
1. 带 {% u 下划线 %} 的文本
2. 带 {% emp 着重号 %} 的文本
3. 带 {% wavy 波浪线 %} 的文本
4. 带 {% del 删除线 %} 的文本
5. 键盘样式的文本 {% kbd command %} + {% kbd D %}
6. 密码样式的文本：{% psw 这里没有验证码 %}

分栏 tab

分栏支持内置阿里图标，如果开启了 fontawesome可以使用 fontawesome 的图标，否则只能使用默内置阿里图标

1
2
3
4
5
6
7
8
9
{% tabs Unique name, [index] %}

<!-- tab [Tab caption] [@icon] -->

Any content (support inline tags too).

<!-- endtab -->

{% endtabs %}
  1. Unique name :
    • 选项卡块标签的唯一名称，不带逗号。
    • 将在#id 中用作每个标签及其索引号的前缀。
    • 如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。
    • 仅当前帖子/页面的 URL 必须是唯一的！
  2. [index]:
    • 活动选项卡的索引号。
    • 如果未指定，将选择第一个标签（1）。
    • 如果 index 为-1，则不会选择任何选项卡。
    • 可选参数。
  3. [Tab caption]:
    • 当前选项卡的标题。
    • 如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。
    • 如果未指定标题，但指定了图标，则标题将为空。
    • 可选参数。
  4. [@icon]: - FontAwesome 图标名称（全名，看起来像“ fas fa-font”） - 可以指定带空格或不带空格； - 例如’Tab caption @icon’ 和 ‘Tab caption@icon’. - 可选参数。

Demo 1 - 预设选择第一个【默认】

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 2 - 预设选择 tabs

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 3 - 没有预设值

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 4 - 自定义 Tab 名 + 只有 icon + icon 和 Tab 名

tab 名字为第一个 Tab

只有图标 没有 Tab 名字

名字+icon

Demo 1 - 预设选择第一个【默认】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs test1 %}

<!-- tab -->

**This is Tab 1.**

<!-- endtab -->

<!-- tab -->

**This is Tab 2.**

<!-- endtab -->

<!-- tab -->

**This is Tab 3.**

<!-- endtab -->

{% endtabs %}

Demo 2 - 预设选择 tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs test2, 3 %}

<!-- tab -->

**This is Tab 1.**

<!-- endtab -->

<!-- tab -->

**This is Tab 2.**

<!-- endtab -->

<!-- tab -->

**This is Tab 3.**

<!-- endtab -->

{% endtabs %}

Demo 3 - 没有预设值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs test3, -1 %}

<!-- tab -->

**This is Tab 1.**

<!-- endtab -->

<!-- tab -->

**This is Tab 2.**

<!-- endtab -->

<!-- tab -->

**This is Tab 3.**

<!-- endtab -->

{% endtabs %}

Demo 4 - 自定义 Tab 名 + 只有 icon + icon 和 Tab 名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs test4 %}

<!-- tab 第一个Tab -->

**tab 名字为第一个 Tab**

<!-- endtab -->

<!-- tab @fab fa-apple-pay -->

**只有图标 没有 Tab 名字**

<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->

**名字+icon**

<!-- endtab -->

{% endtabs %}

按钮 btns

1
2
3
4
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}
  1. 圆角样式：rounded, circle
  2. 增加文字样式：可以在容器内增加 <b>标题</b> 和 <p>描述文字</p>
  3. 布局方式：
    默认为自动宽度，适合视野内只有一两个的情况。
参数含义
wide宽一点的按钮
fill填充布局，自动铺满至少一行，多了会换行
center居中，按钮之间是固定间距
around居中分散
grid2等宽最多 2 列，屏幕变窄会适当减少列数
grid3等宽最多 3 列，屏幕变窄会适当减少列数
grid4等宽最多 4 列，屏幕变窄会适当减少列数
grid5等宽最多 5 列，屏幕变窄会适当减少列数
  1. 如果需要显示类似「团队成员」之类的一组含有头像的链接：
xaoxuuxaoxuuxaoxuuxaoxuuxaoxuu
  1. 或者含有图标的按钮：
下载源码查看文档
  1. 圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中
心率管家

专业版

心率管家

免费版
  1. 如果需要显示类似「团队成员」之类的一组含有头像的链接：
1
2
3
4
5
6
7
{% btns circle grid5 %}
{% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %}
{% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %}
{% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %}
{% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %}
{% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %}
{% endbtns %}
  1. 或者含有图标的按钮：
1
2
3
4
{% btns rounded grid5 %}
{% cell 下载源码, /, anzhiyufont anzhiyu-icon-bolt %}
{% cell 查看文档, /, anzhiyufont anzhiyu-icon-book %}
{% endbtns %}
  1. 圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% btns circle center grid5 %}
<a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1' class="no-text-decoration">
<i class='anzhiyufont anzhiyu-icon-heartbeat'></i>
<b>心率管家</b>
{% p red, 专业版 %}
<img src='https://bu.dusays.com/2023/06/01/64787e2a1347c.png'>
</a>
<a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1' class="no-text-decoration">
<i class='anzhiyufont anzhiyu-icon-heartbeat'></i>
<b>心率管家</b>
{% p green, 免费版 %}
<img src='https://bu.dusays.com/2023/06/01/64787e515e261.png'>
</a>
{% endbtns %}

按钮 btn

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url] : 链接
[text] : 按钮文字
[icon] : [可选] 图标
[color] : [可选] 按钮背景顔色(默认 style 时）
按钮字体和边框顔色(outline 时)
default/blue/pink/red/purple/orange/green
[style] : [可选] 按钮样式 默认实心
outline/留空
[layout] : [可选] 按钮佈局 默认为 line
block/留空
[position] : [可选] 按钮位置 前提是设置了 layout 为 block 默认为左边
center/right/留空
[size] : [可选] 按钮大小
larger/留空
参数含义
url链接
text按钮文字
icon[可选] 图标，如果开启了 fontawesome可以使用 fontawesome 的图标，否则只能使用默内置图标
color[可选] 按钮背景顔色(默认 style 时）按钮字体和边框顔色(outline 时)default/blue/pink/red/purple/orange/green
style[可选] 按钮样式 默认实心数，outline/留空
layout[可选] 按钮佈局 默认为 line block/留空
position[可选] 按钮位置 前提是设置了 layout 为 block 默认为左边 center/right/留空数
size[可选] 按钮大小 larger/留空
  1. 一组按钮

This is my website, click the button AnZhiYu
This is my website, click the button AnZhiYu
This is my website, click the button AnZhiYu
This is my website, click the button AnZhiYu
This is my website, click the button AnZhiYu

  1. 调整位置/大小

AnZhiYu
AnZhiYu
AnZhiYu

  1. more than one button in center
AnZhiYuAnZhiYuAnZhiYuAnZhiYuAnZhiYuAnZhiYuAnZhiYu
  1. 居中按钮
AnZhiYuAnZhiYuAnZhiYuAnZhiYuAnZhiYuAnZhiYuAnZhiYu
  1. 一组按钮
1
2
3
4
5
This is my website, click the button {% btn 'https://anheyu.com/',AnZhiYu %}
This is my website, click the button {% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right %}
This is my website, click the button {% btn 'https://anheyu.com/',AnZhiYu,,outline %}
This is my website, click the button {% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline %}
This is my website, click the button {% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,larger %}
  1. 调整位置/大小
1
2
3
{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,block %}
{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,block center larger %}
{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,block right outline larger %}
  1. more than one button in center
1
2
3
4
5
6
7
8
9
<span>
{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,larger %}
{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,blue larger %}
{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,pink larger %}
{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,red larger %}
{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,purple larger %}
{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,orange larger %}
{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,green larger %}
</span>
  1. 居中按钮
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline larger %}
{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline blue larger %}
{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline pink larger %}
{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline red larger %}
{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline purple larger %}
{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline orange larger %}
{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline green larger %}
</div>

网站卡片 sites

1
2
3
4
{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% endsitegroup %}
xaoxuu
Colsrch
Linhk1606
1
2
3
4
5
{% sitegroup %}
{% site xaoxuu, url=https://xaoxuu.com, screenshot=https://bu.dusays.com/2023/06/01/6478965ce6557.webp, avatar=https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/avatar/avatar.png, description=简约风格 %}
{% site Colsrch, url=https://blog.chn.us.kg, screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png, avatar=https://cdn1.tianli0.top/gh/Colsrch/images/Colsrch/avatar.jpg, description=这是一段关于这个网站的描述文字 %}
{% site Linhk1606, url=https://linhk1606.github.io, screenshot=https://bu.dusays.com/2023/06/01/6478963584621.png, avatar=https://bu.dusays.com/2023/06/01/6478968743368.png, description=这是一段关于这个网站的描述文字 %}
{% endsitegroup %}

单张图片 image

1
{% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}
  1. 图片宽度高度：width=300px, height=32px
  2. 图片描述：alt=图片描述（butterfly 需要在主题配置文件中开启图片描述）
  3. 占位背景色：bg=#f2f2f2
  1. 添加描述：
每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。
  1. 指定宽度：
  1. 指定宽度并添加描述：
每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。
  1. 设置占位背景色：
优化不同宽度浏览的观感
优化不同宽度浏览的观感
  1. 添加描述：
1
{% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, alt=每天下课回宿舍的路，没有什么故事。 %}
  1. 指定宽度：
1
{% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, width=400px %}
  1. 指定宽度并添加描述：
1
{% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}
  1. 设置占位背景色：
1
{% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}

inlineImg 行内图片

1
2
3
4
{% inlineImg [src] [height] %}

[src] : 图片链接
[height] ： 图片高度限制【可选】
参数含义
src图片链接
height图片高度限制【可选】

你看我长得漂亮不

我觉得很漂亮 

1
2
3
4
5
你看我长得漂亮不

![](https://i.loli.net/2021/03/19/2P6ivUGsdaEXSFI.png)

我觉得很漂亮 {% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 150px %}

行内图片 inlineimage

1
{% inlineimage 图片链接, height=高度（可选） %}
  1. 高度：height=20px

这是 一段话。

这又是 一段话。

1
2
3
这是 {% inlineimage https://bu.dusays.com/2023/06/01/647895232e5d5.webp %} 一段话。

这又是 {% inlineimage https://bu.dusays.com/2022/05/19/6285328a83ca7.gif, height=40px %} 一段话。

label 标签

1
{% label text color %}
参数含义
text文字
color【可选】背景颜色，默认为 default，default/blue/pink/red/purple/orange/green

臣亮言：先帝 创业未半，而中道崩殂 。今天下三分，益州疲敝 ，此诚危急存亡之秋 也！然侍衞之臣，不懈于内；忠志之士 ，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有作奸 、犯科 ，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

1
2
臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

timeline

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% timeline title,color %}

<!-- timeline title -->

xxxxx

<!-- endtimeline -->
<!-- timeline title -->

xxxxx

<!-- endtimeline -->

{% endtimeline %}
参数含义
title标题/时间线
colortimeline 颜色，default(留空) / blue / pink / red / purple / orange / green

  1. 默认颜色

    2022

    01-02

    这是测试页面

  2. blue

    2022

    01-02

    这是测试页面

  3. pink

    2022

    01-02

    这是测试页面

  4. red

    2022

    01-02

    这是测试页面

  5. purple

    2022

    01-02

    这是测试页面

  6. orange

    2022

    01-02

    这是测试页面

  7. green

    2022

    01-02

    这是测试页面

  1. 默认颜色
1
2
3
4
5
6
7
{% timeline 2022 %}
<!-- timeline 01-02 -->

这是测试页面
<!-- endtimeline -->

{% endtimeline %}
  1. blue
1
2
3
4
5
6
7
{% timeline 2022,blue %}
<!-- timeline 01-02 -->

这是测试页面
<!-- endtimeline -->

{% endtimeline %}
  1. pink
1
2
3
4
5
6
7
{% timeline 2022,pink %}
<!-- timeline 01-02 -->

这是测试页面
<!-- endtimeline -->

{% endtimeline %}
  1. red
1
2
3
4
5
6
7
{% timeline 2022,red %}
<!-- timeline 01-02 -->

这是测试页面
<!-- endtimeline -->

{% endtimeline %}
  1. purple
1
2
3
4
5
6
7
{% timeline 2022,purple %}
<!-- timeline 01-02 -->

这是测试页面
<!-- endtimeline -->

{% endtimeline %}
  1. orange
1
2
3
4
5
6
7
{% timeline 2022,orange %}
<!-- timeline 01-02 -->

这是测试页面
<!-- endtimeline -->

{% endtimeline %}
  1. green
1
2
3
4
5
6
7
{% timeline 2022,green %}
<!-- timeline 01-02 -->

这是测试页面
<!-- endtimeline -->

{% endtimeline %}

可在任何界面插入类似友情链接列表效果，内容格式与友情链接界面一样，支持 yml 格式,注意yml数据具有格式要求，请注意格式对齐，防止被编辑器格式化导致格式错误从而报错。

1
2
3
{% flink %}
xxxxxx
{% endflink %}
参数含义
class_nameh2标题
flink_style【可选】友链样式，默认为 flexcard，flexcard/anzhiyu
link_list【可选】友链样式，默认为 flexcard，flexcard/anzhiyu
推荐博客
琅環书生
琅環书生 琅環书生
网站
值得推荐的网站
帮小忙
帮小忙
腾讯QQ浏览器在线工具箱
路过图床
路过图床
高速稳定的图片上传和外链服务
 
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

{% flink %}
- class_name: 推荐博客
  flink_style: flexcard
  link_list:
    - name: 琅環书生
      link: https://blog.chn.us.kg
      avatar: https://images.chn.us.kg/hexo/avatar.webp
      descr: 无远弗届，皆有可能
      siteshot: https://images.chn.us.kg/hexo/website.webp

- class_name: 网站
  class_desc: 值得推荐的网站
  flink_style: anzhiyu
  link_list:
    - name: 帮小忙
      link: https://tool.browser.qq.com/
      avatar: https://m4.publicimg.browser.qq.com/publicimg/nav/qbtool/qbtool-latest.png
      descr: 腾讯QQ浏览器在线工具箱
  
    - name: 路过图床
      link: https://imgse.com/
      avatar: https://p.zhheo.com/48bd5fa74e8e32e576772f5ecb7e71d0d906a657.png!cover_mini
      descr: 高速稳定的图片上传和外链服务
{% endflink %}

mermaid 图

使用mermaid标签可以绘制Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看mermaid文档

修改 主题配置文件

1
2
3
4
5
6
7
8
# mermaid
# see https://github.com/mermaid-js/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme:
    light: default
    dark: dark
1
2
3
{% mermaid %}
内容
{% endmermaid %}

mermaid

1
2
3
4
5
6
7
8
{% mermaid %}
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}

复选列表 checkbox

1
{% checkbox 样式参数（可选）, 文本（支持简单md） %}
  1. 样式: plus, minus, times
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 选中状态: checked

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

1
2
3
4
5
6
7
8
9
10
{% checkbox 纯文本测试 %}
{% checkbox checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% checkbox red, 支持自定义颜色 %}
{% checkbox green checked, 绿色 + 默认选中 %}
{% checkbox yellow checked, 黄色 + 默认选中 %}
{% checkbox cyan checked, 青色 + 默认选中 %}
{% checkbox blue checked, 蓝色 + 默认选中 %}
{% checkbox plus green checked, 增加 %}
{% checkbox minus yellow checked, 减少 %}
{% checkbox times red checked, 叉 %}

dogeplayer 多吉云播放器

快捷引入多吉云视频

1
{% dogeplayer 4945 ebb742fd1f0b5a7b %}

获取userId与vcode

参数含义
userId多吉云userId
vcode视频vcode

1
{% dogeplayer 4945 ebb742fd1f0b5a7b %}

折叠框 folding

折叠框folding

1
2
3
{% folding 参数（可选）, 标题 %}
![](https://bu.dusays.com/2023/06/01/64788d71c832d.webp)
{% endfolding %}
  1. 颜色：blue, cyan, green, yellow, red
  2. 状态：状态填写 open 代表默认打开。
查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试 
1
![](https://bu.dusays.com/2023/06/01/64788d71c832d.webp)
查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha 

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
{% folding 查看图片测试 %}

![](https://bu.dusays.com/2023/06/01/64788d71c832d.webp)

{% endfolding %}

{% folding cyan open, 查看默认打开的折叠框 %}

这是一个默认打开的折叠框。

{% endfolding %}

{% folding green, 查看代码测试 %}
假装这里有代码块（代码块没法嵌套代码块）
{% endfolding %}

{% folding yellow, 查看列表测试 %}

- haha
- hehe

{% endfolding %}

{% folding red, 查看嵌套测试 %}

{% folding blue, 查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

hahaha <span><img src='https://bu.dusays.com/2023/06/01/64788cd5a356b.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

一个图库集合。

tag-hide

如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个标签外挂。
请注意，tag-hide内的标签外挂content内都不建议有h1 - h6 等标题。因为Toc会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致Toc的滚动出现异常。

inline 在文本里面添加按钮隐藏内容，只限文字

( content不能包含英文逗号，可用&sbquo;)

1
{% hideInline content,display,bg,color %}

  • content: 文本内容

  • display: 按钮显示的文字(可选)

  • bg: 按钮的背景颜色(可选)

  • color: 按钮文字的颜色(可选)

Demo

1
2
3
哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}

门里站着一个人? {% hideInline 闪 %}

哪个英文字母最酷？ 因为西装裤(C装酷)

门里站着一个人? 闪

block独立的block隐藏内容，可以隐藏很多内容，包括图片，代码块等等

( display 不能包含英文逗号，可用&sbquo;)

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}

  • content: 文本内容

  • display: 按钮显示的文字(可选)

  • bg: 按钮的背景颜色(可选)

  • color: 按钮文字的颜色(可选)

Demo

1
2
3
4
查看答案
{% hideBlock 查看答案 %}
傻子，怎么可能有答案
{% endhideBlock %}

查看答案

傻子，怎么可能有答案

如果你需要展示的内容太多，可以把它隐藏在收缩框里，需要时再把它展开。

( display 不能包含英文逗号，可用&sbquo;)

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}

Demo

AnZhiYu主题安装方法

在你的博客根目录里

git clone -b master https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

如果想要安装比较新的dev分支，可以

git clone -b dev https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

单选列表 radio

1
{% radio 样式参数（可选）, 文本（支持简单md） %}
  1. 颜色: red,yellow,green,cyan,blue,gray
  2. 选中状态: checked

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

1
2
3
4
5
6
7
{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}

上标标签 tip

主要样式参考自小康的 butterfly 渐变背景标签

1
{% tip [参数，可选] %}文本内容{% endtip %}
  1. 样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
  2. 自定义图标: 支持 fontawesome。

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义 font awesome 图标

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tip %}default{% endtip %}
{% tip info %}info{% endtip %}
{% tip success %}success{% endtip %}
{% tip error %}error{% endtip %}
{% tip warning %}warning{% endtip %}
{% tip bolt %}bolt{% endtip %}
{% tip ban %}ban{% endtip %}
{% tip home %}home{% endtip %}
{% tip sync %}sync{% endtip %}
{% tip cogs %}cogs{% endtip %}
{% tip key %}key{% endtip %}
{% tip bell %}bell{% endtip %}
{% tip fa-atom %}自定义 font awesome 图标{% endtip %}

Note (Bootstrap Callout)

修改主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: false
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

Note标签外挂有两种用法。icons和light_bg_offset只对方法一生效。

fontawesome图标需开启主题配置文件中icons.fontawesome

方法一

1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

方法二

1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

方法一

参数用法
class【可选】标识，不同的标识有不同的配色
（ default / primary / success / info / warning / danger ）
no-icon【可选】不显示 icon
style【可选】可以覆盖配置中的 style
（simple/modern/flat/disabled）

方法二

参数用法
class【可选】标识，不同的标识有不同的配色
（ default / blue / pink / red / purple / orange / green ）
no-icon【可选】可配置自定义 icon (支持 fontawesome 图标和主题内置的阿里图标,fontawesome图标需开启主题配置文件中icons.fontawesome, 也可以配置 no-icon )
style【可选】可以覆盖配置中的 style
（simple/modern/flat/disabled）

方法一

  1. simple样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

  1. modern样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

  1. flat样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

  1. disabled样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

  1. no-icon样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

方法二

图标支持 fontawesome 和 主题内置的阿里图标，使用方法为加上对应的类名，fontawesome图标需开启主题配置文件中icons.fontawesome，默认未开启 fontawesome

  1. simple 样式

主题内置阿里图标

你是刷 Visa 还是 UnionPay

2022 年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

fontawesome 图标，开启主题配置文件中的icons.fontawesome为true后可见

你是刷 Visa 还是 UnionPay

2022 年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏器

  1. modern 样式

主题内置阿里图标

你是刷 Visa 还是 UnionPay

2022 年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

fontawesome 图标，开启主题配置文件中的icons.fontawesome为true后可见

你是刷 Visa 还是 UnionPay

2021 年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

  1. flat 样式

主题内置阿里图标

你是刷 Visa 还是 UnionPay

2022 年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

fontawesome 图标，开启主题配置文件中的icons.fontawesome为true后可见

你是刷 Visa 还是 UnionPay

2021 年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

  1. disabled 样式

主题内置阿里图标

你是刷 Visa 还是 UnionPay

2022 年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

fontawesome 图标，开启主题配置文件中的icons.fontawesome为true后可见

你是刷 Visa 还是 UnionPay

2021 年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

  1. no-icon 样式

你是刷 Visa 还是 UnionPay

2021 年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

方法一

  1. simple样式
1
2
3
4
5
6
7
{% note simple %}默认 提示块标签{% endnote %}
{% note default simple %}default 提示块标签{% endnote %}
{% note primary simple %}primary 提示块标签{% endnote %}
{% note success simple %}success 提示块标签{% endnote %}
{% note info simple %}info 提示块标签{% endnote %}
{% note warning simple %}warning 提示块标签{% endnote %}
{% note danger simple %}danger 提示块标签{% endnote %}
  1. modern样式
1
2
3
4
5
6
7
{% note modern %}默认 提示块标签{% endnote %}
{% note default modern %}default 提示块标签{% endnote %}
{% note primary modern %}primary 提示块标签{% endnote %}
{% note success modern %}success 提示块标签{% endnote %}
{% note info modern %}info 提示块标签{% endnote %}
{% note warning modern %}warning 提示块标签{% endnote %}
{% note danger modern %}danger 提示块标签{% endnote %}
  1. flat样式
1
2
3
4
5
6
7
{% note flat %}默认 提示块标签{% endnote %}
{% note default flat %}default 提示块标签{% endnote %}
{% note primary flat %}primary 提示块标签{% endnote %}
{% note success flat %}success 提示块标签{% endnote %}
{% note info flat %}info 提示块标签{% endnote %}
{% note warning flat %}warning 提示块标签{% endnote %}
{% note danger flat %}danger 提示块标签{% endnote %}
  1. disabled样式
1
2
3
4
5
6
7
{% note disabled %}默认 提示块标签{% endnote %}
{% note default disabled %}default 提示块标签{% endnote %}
{% note primary disabled %}primary 提示块标签{% endnote %}
{% note success disabled %}success 提示块标签{% endnote %}
{% note info disabled %}info 提示块标签{% endnote %}
{% note warning disabled %}warning 提示块标签{% endnote %}
{% note danger disabled %}danger 提示块标签{% endnote %}
  1. no-icon样式
1
2
3
4
5
6
7
{% note no-icon %}默认 提示块标签{% endnote %}
{% note default no-icon %}default 提示块标签{% endnote %}
{% note primary no-icon %}primary 提示块标签{% endnote %}
{% note success no-icon %}success 提示块标签{% endnote %}
{% note info no-icon %}info 提示块标签{% endnote %}
{% note warning no-icon %}warning 提示块标签{% endnote %}
{% note danger no-icon %}danger 提示块标签{% endnote %}

方法二

图标支持 fontawesome 和 主题内置的阿里图标，使用方法为加上对应的类名，fontawesome图标需开启主题配置文件中icons.fontawesome，默认未开启 fontawesome

  1. simple 样式
    主题内置阿里图标

    1
    2
    3
    4
    5
    6
    7
    {% note 'anzhiyufont anzhiyu-icon-rocket' simple %}你是刷 Visa 还是 UnionPay{% endnote %}
    {% note blue 'anzhiyufont anzhiyu-icon-bullhorn' simple %}2022 年快到了....{% endnote %}
    {% note pink 'anzhiyufont anzhiyu-icon-instagram' simple %}小心开车 安全至上{% endnote %}
    {% note red 'anzhiyufont anzhiyu-icon-fan' simple%}这是三片呢？还是四片？{% endnote %}
    {% note orange 'anzhiyufont anzhiyu-icon-dengpao' simple %}你是刷 Visa 还是 UnionPay{% endnote %}
    {% note purple 'anzhiyufont anzhiyu-icon-sanmingzhi' simple %}剪刀石头布{% endnote %}
    {% note green 'anzhiyufont anzhiyu-icon-ic_train' simple %}前端最讨厌的浏览器{% endnote %}

    fontawesome 图标，开启主题配置文件中的icons.fontawesome为true后可见

    1
    2
    3
    4
    5
    6
    7
    {% note 'fab fa-cc-visa' simple %}你是刷 Visa 还是 UnionPay{% endnote %}
    {% note blue 'fas fa-bullhorn' simple %}2022 年快到了....{% endnote %}
    {% note pink 'fas fa-car-crash' simple %}小心开车 安全至上{% endnote %}
    {% note red 'icon-fan' simple%}这是三片呢？还是四片？{% endnote %}
    {% note orange 'fas fa-battery-half' simple %}你是刷 Visa 还是 UnionPay{% endnote %}
    {% note purple 'far fa-hand-scissors' simple %}剪刀石头布{% endnote %}
    {% note green 'fab fa-internet-explorer' simple %}前端最讨厌的浏览器{% endnote %}

  2. modern 样式
    主题内置阿里图标

    1
    2
    3
    4
    5
    6
    7
    {% note 'anzhiyufont anzhiyu-icon-rocket' modern %}你是刷 Visa 还是 UnionPay{% endnote %}
    {% note blue 'anzhiyufont anzhiyu-icon-bullhorn' modern %}2022 年快到了....{% endnote %}
    {% note pink 'anzhiyufont anzhiyu-icon-instagram' modern %}小心开车 安全至上{% endnote %}
    {% note red 'anzhiyufont anzhiyu-icon-fan' modern%}这是三片呢？还是四片？{% endnote %}
    {% note orange 'anzhiyufont anzhiyu-icon-dengpao' modern %}你是刷 Visa 还是 UnionPay{% endnote %}
    {% note purple 'anzhiyufont anzhiyu-icon-sanmingzhi' modern %}剪刀石头布{% endnote %}
    {% note green 'anzhiyufont anzhiyu-icon-ic_train' modern %}前端最讨厌的浏览器{% endnote %}

    fontawesome 图标，开启主题配置文件中的icons.fontawesome为true后可见

    1
    2
    3
    4
    5
    6
    7
    {% note 'fab fa-cc-visa' modern %}你是刷 Visa 还是 UnionPay{% endnote %}
    {% note blue 'fas fa-bullhorn' modern %}2021 年快到了....{% endnote %}
    {% note pink 'fas fa-car-crash' modern %}小心开车 安全至上{% endnote %}
    {% note red 'icon-fan' modern%}这是三片呢？还是四片？{% endnote %}
    {% note orange 'fas fa-battery-half' modern %}你是刷 Visa 还是 UnionPay{% endnote %}
    {% note purple 'far fa-hand-scissors' modern %}剪刀石头布{% endnote %}
    {% note green 'fab fa-internet-explorer' modern %}前端最讨厌的浏览器{% endnote %}

  3. flat 样式
    主题内置阿里图标

    1
    2
    3
    4
    5
    6
    7
    {% note 'anzhiyufont anzhiyu-icon-rocket' flat %}你是刷 Visa 还是 UnionPay{% endnote %}
    {% note blue 'anzhiyufont anzhiyu-icon-bullhorn' flat %}2022 年快到了....{% endnote %}
    {% note pink 'anzhiyufont anzhiyu-icon-instagram' flat %}小心开车 安全至上{% endnote %}
    {% note red 'anzhiyufont anzhiyu-icon-fan' flat%}这是三片呢？还是四片？{% endnote %}
    {% note orange 'anzhiyufont anzhiyu-icon-dengpao' flat %}你是刷 Visa 还是 UnionPay{% endnote %}
    {% note purple 'anzhiyufont anzhiyu-icon-sanmingzhi' flat %}剪刀石头布{% endnote %}
    {% note green 'anzhiyufont anzhiyu-icon-ic_train' flat %}前端最讨厌的浏览器{% endnote %}

    fontawesome 图标，开启主题配置文件中的icons.fontawesome为true后可见

    1
    2
    3
    4
    5
    6
    7
    {% note 'fab fa-cc-visa' flat %}你是刷 Visa 还是 UnionPay{% endnote %}
    {% note blue 'fas fa-bullhorn' flat %}2021 年快到了....{% endnote %}
    {% note pink 'fas fa-car-crash' flat %}小心开车 安全至上{% endnote %}
    {% note red 'icon-fan' flat%}这是三片呢？还是四片？{% endnote %}
    {% note orange 'fas fa-battery-half' flat %}你是刷 Visa 还是 UnionPay{% endnote %}
    {% note purple 'far fa-hand-scissors' flat %}剪刀石头布{% endnote %}
    {% note green 'fab fa-internet-explorer' flat %}前端最讨厌的浏览器{% endnote %}

  4. disabled 样式
    主题内置阿里图标

    1
    2
    3
    4
    5
    6
    7
    {% note 'anzhiyufont anzhiyu-icon-rocket' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}
    {% note blue 'anzhiyufont anzhiyu-icon-bullhorn' disabled %}2022 年快到了....{% endnote %}
    {% note pink 'anzhiyufont anzhiyu-icon-instagram' disabled %}小心开车 安全至上{% endnote %}
    {% note red 'anzhiyufont anzhiyu-icon-fan' disabled%}这是三片呢？还是四片？{% endnote %}
    {% note orange 'anzhiyufont anzhiyu-icon-dengpao' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}
    {% note purple 'anzhiyufont anzhiyu-icon-sanmingzhi' disabled %}剪刀石头布{% endnote %}
    {% note green 'anzhiyufont anzhiyu-icon-ic_train' disabled %}前端最讨厌的浏览器{% endnote %}

    fontawesome 图标，开启主题配置文件中的icons.fontawesome为true后可见

    1
    2
    3
    4
    5
    6
    7
    {% note 'fab fa-cc-visa' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}
    {% note blue 'fas fa-bullhorn' disabled %}2021 年快到了....{% endnote %}
    {% note pink 'fas fa-car-crash' disabled %}小心开车 安全至上{% endnote %}
    {% note red 'icon-fan' disabled %}这是三片呢？还是四片？{% endnote %}
    {% note orange 'fas fa-battery-half' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}
    {% note purple 'far fa-hand-scissors' disabled %}剪刀石头布{% endnote %}
    {% note green 'fab fa-internet-explorer' disabled %}前端最讨厌的浏览器{% endnote %}

  5. no-icon 样式

    1
    2
    3
    4
    5
    6
    7
    {% note no-icon %}你是刷 Visa 还是 UnionPay{% endnote %}
    {% note blue no-icon %}2021 年快到了....{% endnote %}
    {% note pink no-icon %}小心开车 安全至上{% endnote %}
    {% note red no-icon %}这是三片呢？还是四片？{% endnote %}
    {% note orange no-icon %}你是刷 Visa 还是 UnionPay{% endnote %}
    {% note purple no-icon %}剪刀石头布{% endnote %}
    {% note green no-icon %}前端最讨厌的浏览器{% endnote %}

音频 audio

1
{% audio 音频链接 %}
1
{% audio https://npm.elemecdn.com/anzhiyu-music@1.0.4/%E9%9D%92%E8%8A%B1%E7%93%B7/%E9%9D%92%E8%8A%B1%E7%93%B7.mp3 %}

视频 video

1
{% video 视频链接 %}
  1. 对其方向：left, center, right
  2. 列数：逗号后面直接写列数，支持 1 ～ 4 列。
  1. 100%宽度

100%宽度

  1. 50%宽度

50%宽度

  1. 25%宽度

25%宽度

  1. 100%宽度
1
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
  1. 50%宽度
1
2
3
4
5
6
{% videos, 2 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %}
  1. 25%宽度
1
2
3
4
5
6
7
8
9
10
{% videos, 4 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %}
]]> anzhiyu主题标签样式，覆盖了几乎所有能用到的Markdown标签，包括段落文本、行内文本、行内文本样式、图片、链接、代码块、表格、公式、音视频、流程图、时序图、甘特图、幻灯片、评论、音乐播放器、视频播放器、视频直播、音频播放器、搜索、热门标签推荐等。 欢迎来参加我们的婚礼 https://blog.chn.us.kg/blog/zz-2/ 2023-09-22T05:14:52.000Z 2023-09-22T05:14:52.000Z
]]> 这是一篇博主的结婚邀请函，记录了他们一路走来的时间线和故事，有婚纱照视频，还有电子请帖，愿天下有情人终成眷属。 Hello World https://blog.chn.us.kg/blog/zz-1/ 2017-05-03T10:03:26.000Z 2017-05-03T10:03:26.000Z Welcome to [Hexo](https://hexo.io/)! This is your very first post. Check [documentation](https://hexo.io/docs/) for more info. If you get any problems when using Hexo, you can find the answer in [troubleshooting](https://hexo.io/docs/troubleshooting.html) or you can ask me on [GitHub](https://github.com/hexojs/hexo/issues)

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: [Writing](https://hexo.io/docs/writing.html)

Run server

1
$ hexo server

More info: [Server](https://hexo.io/docs/server.html)

Generate static files

1
$ hexo generate

More info: [Generating](https://hexo.io/docs/generating.html)

Deploy to remote sites

1
$ hexo deploy

More info: [Deployment](https://hexo.io/docs/one-command-deployment.html)

]]> 本文介绍了Hexo博客的部署及搭建，提到了一些关于hexo的基础指令及解释，shields.io的使用方法，以及一些hexo的插件的使用方法，是新手建站的第一步。