1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="google-site-verification" content="xBT4GhYoi5qRD5tr338pgPM5OWHHIDR6mNg1a3euekI" /> 8 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> 9 <meta name="description" content="Web & Mobile Loverï¼Software Engineer"> 10 <meta name="keywords" content="serpean Blog, Web, JavaScript, Java, Software"> 11 <meta name="theme-color" content="#000000"> 12 13 <!-- Open Graph --> 14 <meta property="og:title" 15 content="serpean Blog"> 16 17 <meta property="og:type" content="website"> 18 <meta property="og:description" 19 content=""> 20 21 <meta property="og:image" content="https://serpean.github.iohttps://github.com/serpean.png"> 22 <meta property="og:url" content="https://serpean.github.io/"> 23 <meta property="og:site_name" content="serpean Blog"> 24 25 <title>serpean Blog</title> 26 27 <!-- Web App Manifest --> 28 <link rel="manifest" href="/pwa/manifest.json"> 29 30 <!-- Favicon --> 31 <link rel="shortcut icon" href="/img/favicon.ico"> 32 33 <!-- Canonical URL --> 34 <link rel="canonical" href="https://serpean.github.io/"> 35 36 <!-- Bootstrap Core CSS --> 37 <link rel="stylesheet" href="/css/bootstrap.min.css"> 38 39 <!-- Custom CSS --> 40 <link rel="stylesheet" href="/css/hux-blog.min.css"> 41 42 <!-- Custom Fonts --> 43 <!-- <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> --> 44 <!-- Hux change font-awesome CDN to qiniu --> 45 <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" 46 type="text/css"> 47 48 49 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 50 <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 51 <!--[if lt IE 9]> 52
52<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
52 53
53<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
53 54 <![endif]--> 55 56 <!-- ga & ba script hoook --> 57
57<script></script>
57 58 59 <!-- Google AdSense --> 60 <!--
60<script data-ad-client="ca-pub-6487568398225121" async 61 src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
61 --> 62 63 <!-- Google tag (gtag.js) --> 64 </script>
vendor: 81 bytes, lines 64-66
64 65 66 <script async src="https://www.googletagmanager.com/gtag/js?id=
66G-PG6W7H2EY1
vendor: 20 bytes, lines 66-67
66"></script> 67
67<script> 68 var _gaId = 'G-PG6W7H2EY1'; 69 window.dataLayer = window.dataLayer || []; 70 function gtag(){dataLayer.push(arguments);} 71 gtag('js', new Date()); 72 73 gtag('config', _gaId); 74 </script>
74 75 76</head> 77 78 79<!-- hack iOS CSS :active style --> 80<body ontouchstart=""> 81 82 <!-- Navigation --> 83 84<nav class="navbar navbar-default navbar-custom navbar-fixed-top"> 85 86 87 <div class="container-fluid"> 88 <!-- Brand and toggle get grouped for better mobile display --> 89 <div class="navbar-header page-scroll"> 90 <button type="button" class="navbar-toggle"> 91 <span class="sr-only">Toggle navigation</span> 92 <span class="icon-bar"></span> 93 <span class="icon-bar"></span> 94 <span class="icon-bar"></span> 95 </button> 96 <a class="navbar-brand" href="/"> 97 <img src="/img/logo.svg" alt="serpean Blog"> 98 </a> 99 </div> 100 101 <!-- Collect the nav links, forms, and other content for toggling --> 102 <div id="huxblog_navbar"> 103 <div class="navbar-collapse"> 104 <ul class="nav navbar-nav navbar-right"> 105 <li> 106 <a href="/">Home</a> 107 </li> 108 109 110 111 112 <li> 113 <a href="/about/">About</a> 114 </li> 115 116 117 118 119 120 <li> 121 <a href="/archive/">Archive</a> 122 </li> 123 124 125 126 127 128 129 130 131 132 133 134 135 <li class="search-icon"> 136 <a href="javascript:void(0)"> 137 <i class="fa fa-search"></i> 138 </a> 139 </li> 140 </ul> 141 </div> 142 </div> 143 <!-- /.navbar-collapse --> 144 </div> 145 <!-- /.container --> 146</nav> 147
148<script> 149 // Drop Bootstarp low-performance Navbar 150 // Use customize navbar with high-quality material design animation 151 // in high-perf jank-free CSS3 implementation 152 var $body = document.body; 153 var $toggle = document.querySelector('.navbar-toggle'); 154 var $navbar = document.querySelector('#huxblog_navbar'); 155 var $collapse = document.querySelector('.navbar-collapse'); 156 157 var __HuxNav__ = { 158 close: function () { 159 $navbar.className = " "; 160 // wait until animation end. 161 setTimeout(function () { 162 // prevent frequently toggle 163 if ($navbar.className.indexOf('in') < 0) { 164 $collapse.style.height = "0px" 165 } 166 }, 400) 167 }, 168 open: function () { 169 $collapse.style.height = "auto" 170 $navbar.className += " in"; 171 } 172 } 173 174 // Bind Event 175 $toggle.addEventListener('click', function (e) { 176 if ($navbar.className.indexOf('in') > 0) { 177 __HuxNav__.close() 178 } else { 179 __HuxNav__.open() 180 } 181 }) 182 183 /** 184 * Since Fastclick is used to delegate 'touchstart' globally 185 * to hack 300ms delay in iOS by performing a fake 'click', 186 * Using 'e.stopPropagation' to stop 'touchstart' event from 187 * $toggle/$collapse will break global delegation. 188 * 189 * Instead, we use a 'e.target' filter to prevent handler 190 * added to document close HuxNav. 191 * 192 * Also, we use 'click' instead of 'touchstart' as compromise 193 */ 194 document.addEventListener('click', function (e) { 195 if (e.target == $toggle) return; 196 if (e.target.className == 'icon-bar') return; 197 __HuxNav__.close(); 198 }) 199</script>
199 200 <!-- Search --> 201<div class="search-page"> 202 <div class="search-icon-close-container"> 203 <span class="search-icon-close"> 204 <i class="fa fa-chevron-down"></i> 205 </span> 206 </div> 207 <div class="search-main container"> 208 <div class="row"> 209 <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> 210 <form></form> 211 <input type="text" id="search-input" placeholder="$ grep..."> 212 </form> 213 <div id="search-results" class="mini-post-list"></div> 214 </div> 215 </div> 216 </div> 217</div> 218 219 <!-- Page Header --> 220 221 222 223 224 225 226 227<header class="intro-header" style="background-image: url('/img/home-bg-city.jpg')"> 228 <div class="container"> 229 <div class="row"> 230 <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> 231 232 <div class="site-heading"> 233 234 <h1>serpean Blog</h1> 235 <span class="subheading"></span> 236 </div> 237 </div> 238 </div> 239 </div> 240</header> 241 242 243<!-- Main Content --> 244<div class="container"> 245 <div class="row"> 246 247 248 <!-- USE SIDEBAR --> 249 <!-- PostList Container --> 250 <div class="col-lg-8 col-lg-offset-1 col-md-8 col-md-offset-1 col-sm-12 251 col-xs-12 postlist-container"> 252 253<div class="post-preview"> 254 <a href="/2023/03/02/industry-4-0/"> 255 <h2 class="post-title"> 256 Industry 4.0 Software 257 </h2> 258 259 <h3 class="post-subtitle"> 260 The future of the industry 261 </h3> 262 263 <div class="post-content-preview"> 264 265 The project that has been carried out consists of a study of the state of the art of Industry 4.0 and its relationship with software development. To this end, firstly, research has been carried out... 266 267 </div> 268 </a> 269 <p class="post-meta">
270 Posted by Sergio Pérez on March 2, 2023 271 </p> 272</div> 273<hr> 274 275<div class="post-preview"> 276 <a href="/2022/07/05/sap-commerce-kibana-101/"> 277 <h2 class="post-title"> 278 SAP Commerce Kibana 101 279 </h2> 280 281 <h3 class="post-subtitle"> 282 Start to control the cloud logs 283 </h3> 284 285 <div class="post-content-preview"> 286 287 SAP Commerce is a platform for building e-commerce websites and online stores. Kibana is a visualization tool for analyzing and understanding data stored in Elasticsearch, which is used to store lo... 288 289 </div> 290 </a> 291 <p class="post-meta"> 292 Posted by Sergio Pérez on July 5, 2022 293 </p> 294</div> 295<hr> 296 297<div class="post-preview"> 298 <a href="/2022/07/05/hello-world/"> 299 <h2 class="post-title"> 300 Hello World! 301 </h2> 302 303 <h3 class="post-subtitle"> 304 New blog style 305 </h3> 306 307 <div class="post-content-preview"> 308 309 310 Hello World! 311 312 313 314 </div> 315 </a> 316 <p class="post-meta">
317 Posted by Sergio on July 5, 2022 318 </p> 319</div> 320<hr> 321 322<div class="post-preview"> 323 <a href="/2022/02/03/sap-commerce-wsl-setup/"> 324 <h2 class="post-title"> 325 SAP Commerce WSL Setup 326 </h2> 327 328 <h3 class="post-subtitle"> 329 Run Linux to compile and windows for everything else. 330 </h3> 331 332 <div class="post-content-preview"> 333 334 This tutorial explains how to set up a Windows Subsystem for Linux 2 (WSL2) environment to work with SAP COMMERCE (also known as Hybris). WSL2 allows you to run a Linux environment directly on your... 335 336 </div> 337 </a> 338 <p class="post-meta"> 339 Posted by Sergio Pérez on February 3, 2022 340 </p> 341</div> 342<hr> 343 344 345<!-- Pager --> 346 347 348 </div> 349 <!-- Sidebar Container --> 350 <div class="col-lg-3 col-lg-offset-0 col-md-3 col-md-offset-0 col-sm-12 351 col-xs-12 sidebar-container"> 352 <!-- Featured Tags --> 353 354 355 356<section> 357 358 <h5><a href="/archive/">FEATURED TAGS</a></h5> 359 <div class="tags"> 360 361 362 363 364 365 366 <a data-sort="0002" 367 href="/archive/?tag=Sap+Commerce" 368 title="Sap Commerce" 369 rel="2">Sap Commerce</a> 370 </div> 371</section> 372 373 374 <!-- Short About --> 375 <section class="visible-md visible-lg"> 376 <hr> 377 <h5><a href="/about/">ABOUT ME</a></h5> 378 <div class="short-about"> 379 380 <img src="https://github.com/serpean.png" /> 381 382 383 <p>Backend Software Engineer.</p> 384 385 <!-- SNS Link --> 386 387 388 389<ul class="list-inline"> 390 391 392 393 394 395 396 397 398 <li> 399 <a target="_blank" href="https://github.com/serpean"> 400 <span class="fa-stack fa-lg"> 401 <i class="fa fa-circle fa-stack-2x"></i> 402 <i class="fa fa-github fa-stack-1x fa-inverse"></i> 403 </span> 404 </a> 405 </li> 406 407 408 <li> 409 <a target="_blank" href="https://www.linkedin.com/in/serpean"> 410 <span class="fa-stack fa-lg"> 411 <i class="fa fa-circle fa-stack-2x"></i> 412 <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i> 413 </span> 414 </a> 415 </li> 416 417</ul> 418 </div> 419</section> 420 421 <!-- Friends Blog --> 422 423 424 <!-- Ads --> 425 <!--
425<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
425 --> 426<!-- first shot --> 427<!-- <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6487568398225121" data-ad-slot="4814308751" 428 data-ad-format="auto" data-full-width-responsive="true"></ins>
429<script> 430 (adsbygoogle = window.adsbygoogle || []).push({}); 431</script>
431 --> 432 433 </div> 434 435 </div> 436</div> 437 438 439 440 441 <!-- Footer --> 442<footer> 443 <div class="container"> 444 <div class="row"> 445 <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> 446 <!-- SNS Link --> 447 448 449 450<ul class="list-inline text-center"> 451 452 453 454 455 456 457 458 459 <li> 460 <a target="_blank" href="https://github.com/serpean"> 461 <span class="fa-stack fa-lg"> 462 <i class="fa fa-circle fa-stack-2x"></i> 463 <i class="fa fa-github fa-stack-1x fa-inverse"></i> 464 </span> 465 </a> 466 </li> 467 468 469 <li> 470 <a target="_blank" href="https://www.linkedin.com/in/serpean"> 471 <span class="fa-stack fa-lg"> 472 <i class="fa fa-circle fa-stack-2x"></i> 473 <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i> 474 </span> 475 </a> 476 </li> 477 478</ul> 479 480 <p class="copyright text-muted"> 481 Copyright © serpean Blog 2024 482 </p> 483 </div> 484 </div> 485 </div> 486</footer> 487 488<!-- jQuery -->
489<script src="/js/jquery.min.js "></script>
489 490 491<!-- Bootstrap Core JavaScript --> 492<!-- Currently, only navbar scroll-down effect at desktop still depends on this -->
493<script src="/js/bootstrap.min.js "></script>
493 494 495<!-- Custom Theme JavaScript -->
496<script src="/js/hux-blog.min.js "></script>
496 497 498<!-- Simple Jekyll Search -->
499<script src="/js/simple-jekyll-search.min.js"></script>
499 500 501<!-- Service Worker --> 502
503<script src="/js/snackbar.js "></script>
vendor: 1 bytes, line 503
503
504<script src="/js/sw-registration.js "></script>
504 505 506 507<!-- async load function -->
508<script> 509 function async(u, c) { 510 var d = document, t = 'script', 511 o = d.createElement(t), 512 s = d.getElementsByTagName(t)[0]; 513 o.src = u; 514 if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); } 515 s.parentNode.insertBefore(o, s); 516 } 517</script>
517 518 519<!-- 520 Because of the native support for backtick-style fenced code blocks 521 right within the Markdown is landed in Github Pages, 522 From V1.6, There is no need for Highlight.js, 523 so Huxblog drops it officially. 524 525 - https://github.com/blog/2100-github-pages-now-faster-and-simpler-with-jekyll-3-0 526 - https://help.github.com/articles/creating-and-highlighting-code-blocks/ 527 - https://github.com/jneen/rouge/wiki/list-of-supported-languages-and-lexers 528--> 529<!-- 530
530<script> 531 async("http://cdn.bootcss.com/highlight.js/8.6/highlight.min.js", function(){ 532 hljs.initHighlightingOnLoad(); 533 }) 534 </script>
534 535 <link href="http://cdn.bootcss.com/highlight.js/8.6/styles/github.min.css" rel="stylesheet"> 536--> 537 538 539 540 541 542 543 544<!--fastClick.js -->
545<script> 546 async("//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js", function () { 547 var $nav = document.querySelector("nav"); 548 if ($nav) FastClick.attach($nav); 549 }) 550</script>
550 551 552<!-- Baidu Tongji --> 553 554 555 556<!-- Side Catalog --> 557
558<script type="text/javascript"> 559 function generateCatalog(selector) { 560 561 // interop with multilangual 562 if ('' == 'true') { 563 _containerSelector = 'div.post-container.active' 564 } else { 565 _containerSelector = 'div.post-container' 566 } 567 568 // init 569 var P = $(_containerSelector), a, n, t, l, i, c; 570 a = P.find('h1,h2,h3,h4,h5,h6'); 571 572 // clean 573 $(selector).html('') 574 575 // appending 576 a.each(function () { 577 n = $(this).prop('tagName').toLowerCase(); 578 i = "#" + $(this).prop('id'); 579 t = $(this).text(); 580 c = $('<a href="' + i + '" rel="nofollow">' + t + '</a>'); 581 l = $('<li class="' + n + '_nav"></li>').append(c); 582 $(selector).append(l); 583 }); 584 return true; 585 } 586 587 generateCatalog(".catalog-body"); 588 589 // toggle side catalog 590 $(".catalog-toggle").click((function (e) { 591 e.preventDefault(); 592 $('.side-catalog').toggleClass("fold") 593 })) 594 595 /* 596 * Doc: https://github.com/davist11/jQuery-One-Page-Nav 597 * Fork by Hux to support padding 598 */ 599 async("/js/jquery.nav.js", function () { 600 $('.catalog-body').onePageNav({ 601 currentClass: "active", 602 changeHash: !1, 603 easing: "swing", 604 filter: "", 605 scrollSpeed: 700, 606 scrollOffset: 0, 607 scrollThreshold: .2, 608 begin: null, 609 end: null, 610 scrollChange: null, 611 padding: 80 612 }); 613 }); 614</script>
614 615 616 617 618<!-- Multi-Lingual --> 619 620 621<!-- Simple Jekyll Search -->
622<script> 623 // https://stackoverflow.com/questions/1912501/unescape-html-entities-in-javascript 624 function htmlDecode(input) { 625 var e = document.createElement('textarea'); 626 e.innerHTML = input; 627 // handle case of empty input 628 return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue; 629 } 630 631 SimpleJekyllSearch({ 632 searchInput: document.getElementById('search-input'), 633 resultsContainer: document.getElementById('search-results'), 634 json: '/search.json', 635 searchResultTemplate: '<div class="post-preview item"><a href="{url}"><h2 class="post-title">{title}</h2><h3 class="post-subtitle">{subtitle}</h3><hr></a></div>', 636 noResultsText: 'No results', 637 limit: 50, 638 fuzzy: false, 639 // a hack to get escaped subtitle unescaped. for some reason, 640 // post.subtitle w/o escape filter nuke entire search. 641 templateMiddleware: function (prop, value, template) { 642 if (prop === 'subtitle' || prop === 'title') { 643 if (value.indexOf("code")) { 644 return htmlDecode(value); 645 } else { 646 return value; 647 } 648 } 649 } 650 }); 651 652 $(document).ready(function () { 653 var $searchPage = $('.search-page'); 654 var $searchOpen = $('.search-icon'); 655 var $searchClose = $('.search-icon-close'); 656 var $searchInput = $('#search-input'); 657 var $body = $('body'); 658 659 $searchOpen.on('click', function (e) { 660 e.preventDefault(); 661 $searchPage.toggleClass('search-active'); 662 var prevClasses = $body.attr('class') || ''; 663 setTimeout(function () { 664 $body.addClass('no-scroll'); 665 }, 400) 666 667 if ($searchPage.hasClass('search-active')) { 668 $searchClose.on('click', function (e) { 669 e.preventDefault(); 670 $searchPage.removeClass('search-active'); 671 $body.attr('class', prevClasses); // from closure 672 }); 673 $searchInput.focus(); 674 } 675 }); 676 }); 677</script>
677 678 679 680<!-- Image to hack wechat --> 681<img src="/img/icon_wechat.png" width="0" height="0" /> 682<!-- Migrate from head to bottom, no longer block render and still work --> 683 684</body> 685 686</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.