</head>
<body>
- <?php include("${commonhtml}/header.php"); ?>
+ <?php include("${commonhtml}/beforemain.php"); ?>
<main>
<h1>404 NOT FOUND !!</h1>
</p>
</main>
- <?php include("${commonhtml}/footer.php"); ?>
+ <?php include("${commonhtml}/aftermain.php"); ?>
</body>
</html>
\ No newline at end of file
--- /dev/null
+<?php include("${commonhtml}/sidemenu.php"); ?>
+<?php include("${commonhtml}/footer.php"); ?>
--- /dev/null
+<?php include("${commonhtml}/header.php"); ?>
<title><?php echo "${title}" ?> | オリジナルLinuxディストリを自作しよう2</title>
+<!-- PHPでconsole.logを行う -->
+<?php
+ function console_log( $data ){
+ echo '<script>';
+ echo 'console.log('. json_encode( $data ) .')';
+ echo '</script>';
+ }
+
+?>
--- /dev/null
+<aside id="sidemenu-right">
+ <h2>もくじ</h2>
+ <span id="index"></span>
+ <span id="relation_page">
+ <?php
+ $relation = "${_SERVER['DOCUMENT_ROOT']}/buildmydist-2/pages/$distro/relation.php";
+ console_log($relation);
+
+ if(file_exists($relation)){
+ echo "<h2>関連ページ</h2>";
+ include($relation);
+ }
+ ?>
+ </span>
+
+ <h2>サイト内検索</h2>
+ <p>ここで検索できるようにする</p>
+
+ <h2>いろいろリンク集</h2>
+ <ul>
+ <li>ふぁすこーど</li>
+ <li>ぎっとはぶ</li>
+ <li>ランダムで表示</li>
+ </ul>
+
+</aside>
?>
</head>
<body>
- <?php include("${commonhtml}/header.php"); ?>
+ <?php include("${commonhtml}/beforemain.php"); ?>
<main>
<h2>このサイトについて</h2>
<p>様々なメジャーなLinux系OSを自分の好きなようにカスタマイズして、再配布するためのサイトです。</p>
</main>
- <?php include("${commonhtml}/footer.php"); ?>
+ <?php include("${commonhtml}/aftermain.php"); ?>
</body>
</html>
</head>
<body>
- <?php include("${commonhtml}/header.php"); ?>
+ <?php include("${commonhtml}/beforemain.php"); ?>
<main>
<h2>Alter Linuxについて</h2>
<p>AlterISO3ではArchisoでできないことをコードを書かずにかんたんに実行できるようにする工夫がなされています。</p>
</main>
- <?php include("${commonhtml}/footer.php"); ?>
+ <?php include("${commonhtml}/aftermain.php"); ?>
</body>
</html>
</head>
<body>
- <?php include("${commonhtml}/header.php"); ?>
+ <?php include("${commonhtml}/beforemain.php"); ?>
<main>
<h2>Arch Linuxについて</h2>
<p>ArchisoはあくまでCLIのArch Linux公式のライブCDをビルドすることに特化しているため、初心者にはとっつきにくいものになっています。</p>
</main>
- <?php include("${commonhtml}/footer.php"); ?>
+ <?php include("${commonhtml}/aftermain.php"); ?>
</body>
</html>
</head>
<body>
- <?php include("${commonhtml}/header.php"); ?>
+ <?php include("${commonhtml}/beforemain.php"); ?>
<main>
<h2>ディストリ開発を始める準備</h2>
<p>ビルドしたOSは基本的に仮想環境でテストを繰り返すことになります。</p>
<p>複数の仮想環境でテストをして、環境依存の問題などを確認するために複数の仮想環境でテストを行います。</p>
<p>全て無料で利用できるソフトウェアで、様々な用途に利用できるのでインストールしておきましょう。</p>
+ <p>詳しくは<a href="/buildmydist-2/pages/misc/virtual.php">こちら</a>を参照してください</p>
+ <h3>中学生程度の英語を読める程度の能力</h3>
+ <p>Linuxのエラーはほぼ全て英語で書かれています。そのため英語が読めないと何も出来ません</p>
+ <p>といっても、<code>No such file or directory</code>というようなかんたんな英語しか無いのでそこまで心配する必要はありません。どうしても英語が苦手という人はGoogle翻訳とDeeplを使うとかなり正確な翻訳を得ることが出来ます。</p>
+
</main>
- <?php include("${commonhtml}/footer.php"); ?>
+ <?php include("${commonhtml}/aftermain.php"); ?>
</body>
</html>
--- /dev/null
+<a href="http://localhost/buildmydist-2/">トップに戻る</a>
\ No newline at end of file
</head>
<body>
- <?php include("${commonhtml}/header.php"); ?>
+ <?php include("${commonhtml}/beforemain.php"); ?>
<main>
<h2>Fedora 33 について</h2>
<p>Fascode Networkで開発されているSerene Linuxは現在はFedoraベースで開発されています</p>
</main>
- <?php include("${commonhtml}/footer.php"); ?>
+ <?php include("${commonhtml}/aftermain.php"); ?>
</body>
</html>
</head>
<body>
- <?php include("${commonhtml}/header.php"); ?>
+ <?php include("${commonhtml}/beforemain.php"); ?>
<main>
<h2>このページは何？</h2>
<p>ようは開発をする上で便利なリンク集です。</p>
</main>
- <?php include("${commonhtml}/footer.php"); ?>
+ <?php include("${commonhtml}/aftermain.php"); ?>
</body>
</html>
</head>
<body>
- <?php include("${commonhtml}/header.php"); ?>
+ <?php include("${commonhtml}/beforemain.php"); ?>
<main>
<h2>このページは何？</h2>
<p>ようは開発をする上で便利なリンク集です。</p>
</main>
- <?php include("${commonhtml}/footer.php"); ?>
+ <?php include("${commonhtml}/aftermain.php"); ?>
</body>
</html>
</head>
<body>
- <?php include("${commonhtml}/header.php"); ?>
+ <?php include("${commonhtml}/beforemain.php"); ?>
<main>
<h2>ほげほげ</h2>
<p>ふごふご！ほげぇ！？ふご！ふごふご！！コケェッ！！！</p>
</main>
- <?php include("${commonhtml}/footer.php"); ?>
+ <?php include("${commonhtml}/aftermain.php"); ?>
</body>
</html>
--- /dev/null
+<a href="http://localhost/buildmydist-2/">トップに戻る</a>
\ No newline at end of file
</head>
<body>
- <?php include("${commonhtml}/header.php"); ?>
+ <?php include("${commonhtml}/beforemain.php"); ?>
<main>
<h2>Ubuntu 18.04 LTSについて</h2>
<p style="text-align: center;"><a href="/buildmydist/">→こちら！！！れ！れ！！←</a></p>
</main>
- <?php include("${commonhtml}/footer.php"); ?>
+ <?php include("${commonhtml}/aftermain.php"); ?>
</body>
</html>
</head>
<body>
- <?php include("${commonhtml}/header.php"); ?>
+ <?php include("${commonhtml}/beforemain.php"); ?>
<main>
<h2>Ubuntu 20.04 LTSについて</h2>
<p>Ubuntu 20.04ではPython 2が公式パッケージから削除されたことによって、以前の方法が使えなくなりました。</p>
</main>
- <?php include("${commonhtml}/footer.php"); ?>
+ <?php include("${commonhtml}/aftermain.php"); ?>
</body>
</html>
+window.addEventListener("load", function(){
+ var target = $("main, #sidemenu-right");
+ target.wrapAll("<div id=\"main-container\">")
+})
--- /dev/null
+// サイドバーに目次を表示する
+// 参考: https://www.marorika.com/entry/create-toc
+
+document.addEventListener('DOMContentLoaded', function () {
+ // 目次を追加する先(table of contents)
+ var contentsList = document.getElementById('index');
+
+ // 作成する目次のコンテナ要素
+ //var div = document.createElement('div');
+ var div = contentsList;
+
+ // main配下のh2、h3要素を全て取得する
+ var matches = document.querySelectorAll('main h2, main h3');
+
+ // 取得した見出しタグ要素の数だけ以下の操作を繰り返す
+ matches.forEach(function (value, i) {
+ // 見出しタグ要素のidを取得し空の場合は内容をidにする
+ var id = value.id;
+ if(id === '') {
+ id = value.textContent;
+ value.id = id;
+ }
+
+ // 要素がh2タグの場合
+ if(value.tagName === 'H2') {
+ var ul = document.createElement('ul');
+ var li = document.createElement('li');
+ var a = document.createElement('a');
+
+ // 追加する<ul><li><a>タイトル</a></li></ul>を準備する
+ a.innerHTML = value.textContent;
+ a.href = '#' + value.id;
+ li.appendChild(a)
+ ul.appendChild(li);
+
+ // コンテナ要素である<div>の中に要素を追加する
+ div.appendChild(ul);
+ }
+
+ // 要素がh3タグの場合
+ if(value.tagName === 'H3') {
+ var ul = document.createElement('ul');
+ var li = document.createElement('li');
+ var a = document.createElement('a');
+
+ // コンテナ要素である<div>の中から最後の<li>を取得する。
+ var lastUl = div.lastElementChild;
+ var lastLi = lastUl.lastElementChild;
+
+ // 追加する<ul><li><a>タイトル</a></li></ul>を準備する
+ a.innerHTML = value.textContent;
+ a.href = '#' + value.id;
+ li.appendChild(a)
+ ul.appendChild(li);
+
+ // 最後の<li>の中に要素を追加する
+ lastLi.appendChild(ul);
+ }
+ });
+
+ // 最後に画面にレンダリング
+ //contentsList.appendChild(div);
+});
--- /dev/null
+// 参考: https://into-the-program.com/sidebar-follow-to-scrolling/
+$(window).on('load', function () {
+ var adjust = 0; //スクロール時のトップ位置調整用（問題なければ0）
+ var sidebar = $('#sidemenu-right'); //サイドバーを指定
+ var wrap = $('#main-container'); //ラッパーを指定
+
+ var adjustTop = 0;
+ var sidebarTop = parseInt(sidebar.css('top'));
+ var sidebarMax = wrap.height() + adjust - sidebar.height();
+
+ $(window).on('scroll', function () {
+
+ var h = sidebarTop + $(window).scrollTop();
+
+ if (h < sidebarMax) {
+
+ if($(window).scrollTop() < adjust) {
+ adjustTop = 0;
+ } else {
+ adjustTop = adjust;
+ }
+ var offset = sidebarTop-adjustTop + $(window).scrollTop() + 'px';
+ sidebar.animate({top: offset},{duration:0, queue: false});
+ //sidebar.css({top: offset});
+
+ }
+ });
+});
/* === ここから本文 === */
main{
- padding: 1%;
- margin-bottom: auto;
+
}
/* === ここまで本文 === */
margin-left: auto;
}
/* === ここまでフッター === */
+
+
+/* === ここから目次 === */
+#index li{
+ list-style: none;
+
+}
+
+#index ul{
+ padding-left: 10px;
+}
+#index a{
+ text-decoration: none;
+}
+#index a:visited{
+ color: blue;
+}
+/* === ここまで目次 === */
+
+/* === ここから関連ページ === */
+#relation_page a{
+ text-decoration: none;
+ color: blue;
+}
+/* === ここまで関連ページ === */
+/* === ここからメニューバー === */
#bar-container{
/*
flexboxでいい感じに配置する
/* スマホ用ボタンを隠す */
#open-sp-menu{
display: none;
-}
\ No newline at end of file
+}
+
+/* === ここまでメニューバー === */
+
+
+/* === ここから本文 === */
+main{
+ /* メインコンテンツの横の余白 */
+ padding-left: 1%;
+ padding-right: 1%;
+ margin-left: 4%;
+ margin-right: 1%;
+ margin-top: 1%;
+ margin-bottom: 1%;
+}
+/* === ここまで本文 === */
+
+
+/* === ここからサイドメニュー === */
+main{
+ width: 65%;
+ /* border: solid 1px black; */
+}
+
+#sidemenu-right{
+ /* 横幅設定 */
+ width: 25%;
+
+ /* 線を描写 */
+ /* border: solid 1px black; */
+ box-sizing: border-box;
+
+ /* 余白設定 */
+ padding-left: 1%;
+ padding-right: 1%;
+ margin-top: 1%;
+ /* margin-right: 4%; */
+ margin-bottom: 1%;
+
+ /* 固定 */
+ position: absolute;
+ right: 0;
+
+ /* スクロール */
+ overflow: scroll;
+}
+
+/* サイドメニューのスクロールバーを隠す */
+#sidemenu-right{
+ /* IE, Edge 対応 */
+ -ms-overflow-style: none;
+ /* Firefox 対応 */
+ scrollbar-width: none;
+}
+
+#sidemenu-right::-webkit-scrollbar {
+ display:none;
+}
+
+#main-container{
+ display: flex;
+ margin: 0 auto;
+ position: relative;
+}
+/* === ここまでサイドメニュー === */
+/* === ここからメニューバー === */
.bar-logo{
font-size: medium;
font-weight: 900;
.show-menu{
display: inline-block !important;
}
+/* === ここまでメニューバー === */
OSDN Git Service
